webpack相关配置

333 阅读1分钟
印记中文(官方文档同步的中文文档):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"},