webpack相关配置-CSDN博客

印记中文（官方文档同步的中文文档）： docschina.org/

1、正式文档

webpack.docschina.org/concepts/

2、各种loader方案：

www.webpackjs.com/loaders/

3、配置中的插件：

webpack.docschina.org/plugins/

4、中文指南

zhaoda.net/webpack-han…

5、如果你使用webpack4+版本，需要安装CLI

npm install --save-dev webpack-cli复制代码

6、url-loader和file-loader

url-loader的功能类似于file-loader，但是在文件大小（单位byte）低于指定的限制时，可以返回一个DataURL。

关于压缩和优化图片，增强加载处理图片功能，可以使用image-webpack-loader(https://github.com/tcoopman/image-webpack-loader)和url-loader

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192
            }
          }
        ]
      }
    ]
  }
}
复制代码

6、利用rimraf每次打包之前删除dist文件夹

安装rimraf包：

npm i rimraf -D复制代码

修改scripts配置：

"scripts": {"build:webpack1": "npm install -q webpack@1.x && npm run clean && webpack --config build/webpack1.config.js","build:webpack2": "npm install -q webpack@2.x && npm run clean && webpack --config build/webpack2.config.js","build:webpack3": "npm install -q webpack@3.x && npm run clean && webpack --config build/webpack3.config.js","build:webpack4": "npm install -q webpack@4.x webpack-cli && npm run clean && webpack --config build/webpack4.config.js","clean": "rimraf dist","build": "npm run build:webpack1 && npm run build:webpack1 && npm run build:webpack1 && npm run build:webpack1"},复制代码