Webpack5 的开始和扩展

指南

在开始之前，请确保你安装了 Node.js

安装

如果想要在命令行中调用 webpack，需要安装 webpack-cli，大部分项目建议在本地安装；

npm install webpack webpack-cli –save-dev

创建配置文件

webpack v4 之后，可以无须任何配置，但大部分项目需要进行复杂的配置。所以需要建立配置文件

webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/index.js', //入口文件
  output: {                //输出配置
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: { // loader 文件预处理配置
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource',
      },
      {
        test: /\.(csv|tsv)$/i,
        use: ['csv-loader'],
      },
      {
        test: /\.xml$/i,
        use: ['xml-loader'],
      },
    ],
  }
};

执行打包命令

可以执行 npx webpack 或者是 配置后执行 npm run build

package.json
"scripts": {
  "build": "webpack"
}

概念

入口(entry)

指示 webpack 应该使用哪个模块，来作为构建其内部 依赖图的开始；

webpack.config.js
module.exports = {
  entry: {
    main: './path/to/my/entry/file.js',  //单页应用
  },
  entry: './path/to/my/entry/file.js',   //语法简写

  entry: ['./src/file_1.js', './src/file_2.js'],  //多页应用

  entry: {
    a2: 'dependingfile.js',
    b2: {
      dependOn: 'a2',
      import: './src/app.js',
      // dependOn: 当前入口所依赖的入口。它们必须在该入口被加载前被加载。
      // filename: 指定要输出的文件名称。
      // import: 启动时需加载的模块。
      // library: 指定 library 选项，为当前 entry 构建一个 library。
      // runtime: 运行时 chunk 的名字。
      // publicPath: 当该入口的输出文件在浏览器中被引用时，为它们指定一个公共 URL 地址
    },
  },
};

Tips:多页应用的存在是适用于模块开发，在重复性开发中可以仅配置入口文件即可生成新的项目；

输出(output)

output 属性的最低要求是，将它的值设置为一个对象，然后为将输出文件的文件名配置为一个 output.filename

webpack.config.js
module.exports = {
  output: {
    filename: 'bundle.js',  //输出文件

    filename: '[name].js',  //多文件输出
    path: __dirname + '/dist',
    // 输出到硬盘：./dist/file1.js, ./dist/file2.js

    clean: true, //输出前清理旧文件
  },
};

loader

loader 用于对模块的源代码进行转换。loader 可以使你在 import 或 “load(加载)” 模块时预处理文件。

在使用 loader 之前，你需要安装相对应的 loader；

npm install css-loader style-loader –save-dev

webpack.config.js
module.exports = {
 module: {
   rules: [
     {
       test: /\.css$/i,
       use: ['style-loader', 'css-loader'], // 多loader引入需要保证 loader 的先后顺序
     },
     {
       test: /\.(png|svg|jpg|jpeg|gif)$/i,  // 图片和字体文件可以使用内置的 Asset Modules
       type: 'asset/resource',
     },
     {
       test: /\.(woff|woff2|eot|ttf|otf)$/i,
       type: 'asset/resource',
     },
   ],
 },
};

插件(plugin)

插件 plugin 用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量

在使用 plugin 之前，你需要安装相对应的 plugin；

npm install html-webpack-plugin –save-dev

webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  //该插件将为你生成一个 HTML5 文件 ,并使用 script 标签引入你所有 webpack 生成的 bundle
  plugins: [new HtmlWebpackPlugin()],
};

模式(mode)

通过选择 development, production 或 none 之中的一个，来设置 mode 参数，你可以启用 webpack 内置在相应环境下的优化。其默认值为 production

webpack.config.js
module.exports = {
  mode: 'development',  // 开发模式
  mode: 'production',   // 生产模式
  mode: 'production',   // 无效果
};

功能

模块热更新

模块热更新，在文件修改保存后，刷新文件使浏览器访问最新代码；webpack-dev-server 提供一个静态文件服务器，提供访问，从 4.0 开始，模块热更新为默认开启；

npm install webpack-dev-server

webpack.config.js
module.exports = {
  devServer: {
    static: './dist',
    hot: true,
  },
};