安装

本地安装

进入项目文件夹，运行 npm init -y，生成 package.json 文件

// package.json
{
  "name": "webpackdemo1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "4",
    "webpack-cli": "3"
  }
}

运行以下两种命令其一，生成 node_modules 文件

yarn add webpack@4 webpack-cli@3 --dev
npm install webpack@4 webpack-cli@3 --dev

node_modules

进入 webpack 文件所在目录，通过 .\node_modules\.bin\webpack --xxx 对其进行操作

注意：当前webpack只是本地安装，安装在当前项目中，因此对 webpack 进行操作时，需要进入webpack所在目录方可操作

查询 webpack 版本号

全局安装

安装最新或特定版本
npm install --global webpack

注意：不推荐全局安装 webpack。这会将你项目中的 webpack 锁定到指定版本，并且在使用不同的 webpack 版本的项目中，可能会导致构建失败。

配置

webpack 转译 JS

执行命令:
npx webpack

初始化 webpack.config.js

运行 npx webpack 命令时，可能会碰到报错如下：

The 'mode' option has not been set, webpack will fallback to 'production' fThe 'mode' option has not been set, webpack will fallback to 'production' fThe 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaul
ts for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

原因是没有指定mode导致，
解决方法：
创建 webpack.config.js 文件

// webpack.config.js 
module.exports = {
// mode取值可为 development 或 production
// 开发模式为 development，发布模式为 production
    mode: 'development',
};

webpack.config.js 中配置 entry 和 output

var path = require('path');

// webpack.config.js 中添加 entry 和output 配置
module.exports = {
// entry 为指定默认入口文件
    entry: './foo.js',
    output: {
// 转译后输出目录，不写则默认为dist目录
        path: path.resolve(__dirname, 'dist'),
// 转译后输出文件
        filename: 'foo.bundle.js'
// 或者可以写成，dist 中输出文件名后会出现十六位 hash 数，利于 http 缓存更新
// 
        filename:'[name].[hash].js'
    }
};

http 缓存：当用户访问某网站后，网站在加载完 index.html 后，会将请求的 css、js 等资源缓存一段时间，在这段时间内，用户再次访问此网站时，只需要下载index.html，页面可从硬盘灯内存中得到css、js第已缓存资源，以实现快速访问。为文件添加十六位hash数，使得页面资源更新时，可以生成新的对应文件，与旧文件进行区分，从而告知浏览器需要请新的资源，利于 http 缓存更新。

build 配置

由于每次更新会在 dist 中产生新的带有十六位 hash 的文件，从而导致 dist 目录越来越大，因此需要每次执行前删除 dist 目录，在 package.json 文件中添加命令：

// 每次执行 npx webpack 前，先删除 dist 目录
// npx webpack 可简写为 webpack
"scripts": {
    "build": "rm -rf dist && webpack"
    // 使用 rm -rf 可能会报错，错误提示为：
    // 'rm' 不是内部或外部命令，也不是可运行的程序或批处理文件。
    // 错误原因可能：使用了Linux 下的 rm -rf 命令，而你的电脑是windows

    // 可将命令修改成以下 
   "build": "rimraf && webpack"
  },

修改后，打包执行命令：

// 命令 1
yarn build;

// 命令 2
npm run build

webpack 插件自动生成 html

安装 html-webpack-plugin
webpack 5

npm install --save-dev html-webpack-plugin
yarn add --dev html-webpack-plugin

webpack 4

npm install --save-dev html-webpack-plugin@4
yarn add --dev html-webpack-plugin@4

在 webpack.config.js 中添加配置文件，会在 dist 中生成对应文件

var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    mode: 'development',
    entry: './src/index.js',
    output: {
        filename: '[name].[hash].js'
    },
// html-webpack-plugin
    plugins: [
        new HtmlWebpackPlugin({
            // 指定生成页面的title
            title: '123',
            // 生成页面以model.html页面为模板
            template:'assets/model.html'
        })
    ]
};

// model.html页面内容
<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
     //用于接收传入的title
    <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
    
</body>
</html>

// 在 dist 中生成的 html 页面，会自动添加 script
<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>123</title>
</head>
<body>

<script src="main.1ad4c1222cd4658c9413.js"></script></body>
</html>

webpack 解析 css 文件

安装插件，如果安装的是webpack 4+，建议 style-loader 安装2.0以下版本，css-loader 安装5.0以下版本。
查询适配版本的方式参考：https://blog.csdn.net/u013594477/article/details/120890184

// 方法1：
yarn add css-loader@version --dev
yarn add style-loader@version --dev


// 方法2：
npm i css-loader@version --dev
npm i style-loader@version --dev

webpack.config.js 配置，添加以下代码：

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};

webpack-dev-derver 使用

安装 webpack-dev-derver 插件

yarn add webpack-dev-server --dev

npm  i  webpack-dev-server --dev

webpack.config.js 配置

module.exports = {
    devtool: "inline-source-map",
    devServer:{
          // webpack 4+
          contentBase:'./dist'
         // webpack 5+
          static:'./dist'，
         // 开启端口号，默认8080
          port：8080
    },
};

package.json配置

"scripts": {
     // --open 为是否运行后自动打开浏览器，不需要可以删除
    "start":"webpack-dev-server --open",
  },

运行命令，之后在对应端口打开页面

yarn strat

npm run start

注意：此命令不会自动生成 dist 目录，不依赖于 dist 目录

插件导出 css 文件

安装，webpack 4+ 建议安装1.6及以下版本

yarn add mini-css-extract-plugin --dev

npm install mini-css-extract-plugin --dev

webpack.config.js 配置，导出文件默认存储在 dist 目录，且自动链入 dist/index.html

module.exports = {
    plugins: [
        new MiniCssExtractPlugin({
            // name可以自行指定，指定格式为 index.css，不指定则默认为main
            filename: '[name].[hash].css',
            chunkFilename: '[id].[hash].css',
            ignoreOrder:false,
        }),
    ],
    module: {
        rules: [
            // css 导出
            {
                test: /\.css$/i,
                use: [MiniCssExtractPlugin.loader, "css-loader"],
            },
        ],
    },
};

webpack的安装与使用