webpack简单入门(三)在我们开发的时候除了打包js，css文件外还要打包图片, 字体等文件; webpack5之前

在我们开发的时候除了打包js，css文件外还要打包图片, 字体等文件; webpack5之前, 我们使用file-loader, url-loader这些来加载; webpack5可以使用资源模块 asset module type来替代上面那些loader。

asset module type 使用

asset/resource 发送一个单独的文件并导出 URL。之前通过使用 file-loader 实现。
asset/inline 导出一个资源的 data URI。之前通过使用 url-loader 实现。
asset/source 导出资源的源代码。之前通过使用 raw-loader 实现。
asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。之前通过使用 url-loader，并且配置资源体积限制实现。

module: {
    rules: [
        {
            test: /\.(png|jpe?g|gif|svg)$/i,
            type: "asset",
            generator: {
                /* 
                    占位符
                    [path] 用资源原来所在文件夹名作为新生成的文件夹名
                    [name] 用原来文件名作为新生成的文件名
                    [hash] 哈希值, 后面的数组表示截取几位
                    [ext]  用原来文件的后缀名当作新生成的文件的后缀名
                */
                filename: "[path]/[name].[hash:6].[ext]"
            },
            parser: {
                /* 
                开发的时候, 一般小图片会使用url-loader转换成base64格式插入到加载的地方, 减少请求次数
                大图片一般不会转成base64格式(会导致js文件请求慢)
                现在可以用 asset module type
                示例：大于100k的才会被打包,小于100k转成base64格式
                */
                dataUrlCondition: {
                    maxSize: 100 * 1024  // 100k
                }
            }
            
        }
    ]
}

加载字体文件的步骤也是差不多

占位符文档

插件

Loader是用于特定的模块类型进行转换 ; Plugin可以用于执行更加广泛的任务，比如打包优化、资源管理、环境变量注入等(插件目的在于解决无法实现的其他事)

CleanWebpackPlugin

我们之前进行打包的时候每次想删除上次生成的文件, 只能手动删除, 使用CleanWebpackPlugin插件每次打包前可以把上次上次的打包文件删除。

安装 cnpm/npm install clean-webpack-plugin -D

配置: 不同插件的配置方式不一样, 使用时可以查看官方文档

const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
    // 其他省略
    plugins：[
        new CleanWebpackPlugin()
    ]
}

HtmlWebpackPlugin

进行项目部署的时候会有一个index.html文件，我们可以使用 HtmlWebpackPlugin插件生成一个index.html文件。

安装： cnpm/npm install html-webpack-plugin -D

配置:

const { HtmlWebpackPlugin } = require('html-webpack-plugin')
module.exports = {
    // 其他省略
    plugins：[
        // 使用默认模板
        new HtmlWebpackPlugin({
            title: "webpack案例",
            // 自定义模板使用template属性
            template: "./public/index.html"  
        })
    ]
}

HtmlWebpackPlugin文档

使用自定义模板进行打包时报错, 显示BASE_URL没有定义, 我们可以使用DefinePlugin插件, DefinePlugin允许在编译时创建配置的全局常量，是一个webpack内置的插件（不需要单独安装）：

const { DefinePlugin } = require('webpack')
module.exports = {
    // 其他省略
    plugins：[
        new DefinePlugin({
            BASE_URL: '"./"'
        })
    ]
}

CopyWebpackPlugin

如果打包过程中想将一些文件复制到打包文件夹, 可以使用CopyWebpackPlugin , 比如vue打包过程中, 会将public目录下的文件复制到dist文件夹下。

安装： cnpm/npm install copy-webpack-plugin -D

配置:

const  CopyWebpackPlugin  = require('copy-webpack-plugin')
new CopyWebpackPlugin({
      patterns: [
        {
          from: "public",  // 设置从哪里复制
          to: './abc', // 复制到哪里，可以省略， 默认复制到打包文件夹
          globOptions: {   // 设置一些额外的参数
            ignore: [   // 忽略哪些文件
              '**/index.html'   // 通过HtmlWebpackPlugin完成了index.html的生成, 不需要再复制
            ]
          }
        } 
      ]
    })

Mode

以前没有设置 Mode的时候，调试代码不方便, 比如我们打印一个没有定义的变量

Mode可以告知 webpack 使用相应模式的内置优化。默认值production

选项	描述
development	会将 `DefinePlugin` 中 `process.env.NODE_ENV` 的值设置为 `development`。为模块和 chunk 启用有效的名。
production	会将 `DefinePlugin` 中 `process.env.NODE_ENV` 的值设置为 `production`。为模块和 chunk 启用确定性的混淆名称，`FlagDependencyUsagePlugin`，`FlagIncludedChunksPlugin`，`ModuleConcatenationPlugin`，`NoEmitOnErrorsPlugin` 和 `TerserPlugin` 。
none	不使用任何默认优化选项

开发中, mode值设置为development, 有时候代码报错, 为了方便调试，我们可以设置devtool为source-map

module.exports = {
    mode: 'development',
    devtool: 'source-map',
}

设置devtool为source-map

注意

当在 webpack 5 中使用旧的 assets loader（如 file-loader/url-loader/raw-loader 等）时, 打包文件会出现重复文件。要设置 type 为 javascript/auto


module: {
   rules: [
      {
        test: /.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
            }
          },
        ],
        type: 'javascript/auto'
      },
   ]
  },

文档

资源模块