我们直接通过 webpack.config.js 实现一个最基础的打包

文件目录

  1. |--dist
  2. |--src 
  3. |    |--index.js
  4. |    |
  5. |    |--sum.js
  6. |--webpack.config.js

如图所示，我们基本的文件目录。
如果不配置入口。src/index.js 将默认成为入口。
如果不设置配置文件。webpack.config.js 将默认成为配置文件。我们这边就不修改配置文件路径了。

webpack.config.js

通过配置文件设置一下基础的信息如下，配置文件是 common.js 的语法。

  1. let path = require('path');
  2. let { CleanWebpackPlugin } = require('clean-webpack-plugin');
  3. let HtmlWebpackPlugin = require('html-webpack-plugin');
  5. module.exports = {
  6.   mode: 'development',
  7.   entry: './src/index.js',
  8.   output: {
  9.     filename: 'bundle.js',
  10.     path: path.resolve(__dirname, 'dist')
  11.   },
  12.   devtool: 'source-map',
  13.   module:{
  14.     rules: [
  15.       {
  16.         test: /\.css$/,
  17.         use: []
  18.       }
  19.     ]
  20.   },
  21.   plugins: [
  22.     new CleanWebpackPlugin({
  23.       cleanOnceBeforeBuildPatterns:['**/*']
  24.     }),
  25.     new HtmlWebpackPlugin({
  26.       template:'./src/index.html',
  27.       /** 文件最小化 **/
  28.       minify: {
  29.         /** 移除双引号 **/
  30.         removeAttributeQuotes: true,
  31.         /** 变成一行 **/
  32.         collapseWhitespace: true
  33.       },
  34.       /** 添加哈希值，防止缓存**/
  35.       hash: true,
  36.       /** 将js 插入到body中的最后一行, 不加默认会添加到 head 中，所以是必须的**/
  37.       inject: 'body',
  38.       /** 生成的html的文件名**/
  39.       filename: 'login.html'
  40.     });
  41.   ]
  42. }
  • mode 环境，development | production。开发环境不会压缩代码，生产环境会压缩代码。
  • entry 打包入口，string | object。
    • 当 entry 为 string 时，表示打包入口的路径。
    • 当 entry 为 object 时，可以配置多个入口。
  • output 打包输出配置，属性较多，这边只讲述几个：
    • filename: 输出文件名，可以根据不同参数动态生成，这边简略就先写死了，后续详细介绍。
    • path: 输出路径，必须为绝对路径
  • module 配置 loader
  • plugins 配置插件，常用插件如下：
    • clean-webpack-plugin 可以设置每次打包前都清理打包文件夹，可以通过正则表达式匹配要清理的文件

注意 ：

  1.      - clean-webpack-plugin 清理文件夹只有在 output 设置了 path之后生效，默认不会清理，
  2.      - 在webpack 5 中内置了 webpack.CleanPlugin 可以代替 clean-webpack-plugin。
  • html-webpack-plugin 打包完之后自动生成html，并且引用 js，也可以通过模版生成html，以及一些常见配置属性，如上代码

    devtool

    devtool 设置为 source-map 可以增强调试过程，source-map后面会介绍，这边对比下效果，如下：
    不加 devtool 的打包结果，都是 eval，eval主要是为了更好的热更新。
    image.png
    加了 devtool 的打包结果，就和正常代码差不多了。
    image.png

    loader

    加载器（翻译官），主要用于转化模块
    loader 编译规则：从右往左或者从下往上，也可以通过 enforce 强制改变编译顺序。

    从右到左

    这边loader 执行顺序是 css-loader => style-loader。先导出字符串，然后插入 style 标签。
    1. module.exports = {
    2. //...
    3. module:{
    4. rules: [
    5.  {
    6.    //test 匹配符合后缀的文件
    7.    test: /\.css$/, 
    8.    use: ['style-loader', 'css-loader']
    9.  }
    10. ]
    11. }
    12. //...
    13. }

    从下往上

    除了上面那种写法，还有分开写的rule，不过比较不常用
    执行顺序同样是是 css-loader => style-loader
    1. module.exports = {
    2. //...
    3. module:{
    4. rules: [
    5.  {
    6.    //test 匹配符合后缀的文件
    7.    test: /\.css$/, 
    8.    use: ['style-loader']
    9.  },
    10.  {
    11.    test: /\.css$/, 
    12.    use: ['css-loader']
    13.  }
    14. ]
    15. }
    16. //...
    17. }

    通过enforce设置执行顺序

    enforce有两个值：
  • pre 前置执行
  • post 后置执行

执行顺序同样是是 css-loader => style-loader

  1. module.exports = {
  2.   //...
  3.   module:{
  4.     rules: [
  5.       {
  6.         test: /\.css$/, 
  7.         use: ['css-loader'],
  8.         enforce: 'pre'
  9.       },
  10.       {
  11.         //test 匹配符合后缀的文件
  12.         test: /\.css$/, 
  13.         use: ['style-loader']
  14.       },
  15.     ]
  16.   }
  17.   //...
  18. }
module.exports = {
  module:{
    rules:{
      test:/\.css$/,
      use:['css-loader']
    },
    rules:{
      test:/\.css$/,
      use:['style-loader'],
      enforce:'post'
    }
  }
}

use 值的类型

use 是一个数组，其值可以是 string，也可以是一个配置对象。
当是对象时配置如下：

module.exports = {
  module:{
    rules: [
      {
        test:/\.css$/,
        use: ['style-loader', {
          loader: 'css-loader',
          options: {
            modules: true
          }
        }]
      }
    ]
  }
}

plugins

插件