webpack之开发环境development

一，loader加载器

1，image-webpack-loader

• (1)目的：对图片image和svg等文件进行压缩，
• (2)流程：通过image-webpack-loader,打包后就会压缩，文件体积就会少上很多。

• vue-cli3.x的配置如下：

  config.module
  .rule('images')//开启图片压缩
  .test(/.(png|jpe?g|gif)(?.*)?$/)
  .use('image-webpack-loader')
  .loader('image-webpack-loader')
  .options({ bypassOnDebug: true })
  config.module
  .rule('svg')//开启svg压缩
  .test(/.(svg)(?.*)?$/)
  .use('image-webpack-loader')
  .loader('image-webpack-loader')
  .options({ bypassOnDebug: true })

• 使用过程注意点： 须用cnpm安装(一部分使用了二进制文件的模块，都会通过 bin-wrapper 执行下载和编译。于是乎只要能在下载之前将 bin-wrapper 内使用的下载链接替换成镜像仓库的url详解), 如果用过yarn和npm安装过，记得卸载，然后再用cnpm安装；推荐在package.json文件中添加

  "resolutions": {
  "bin-wrapper": "npm:bin-wrapper-china"
  },
  //参考https://github.com/anncwb/vite-plugin-imagemin和https://classic.yarnpkg.com/en/docs/selective-version-resolutions/

二，plugin插件

1，webpack内置DllPlugin插件,打包动态链库,减少构建时间

• 列如vuecli.3.x使用方式:
• ⑴npm install webpack-cli@^3.2.3 add-asset-html-webpack-plugin@^3.1.3 clean-webpack-plugin@^1.0.1 --dev
• ⑵创建webpack.dll.conf.js在根目录，该配置负责提取公共包。

会在public/vendor下面。

const path = require('path')
const webpack = require('webpack')
const CleanWebpackPlugin = require('clean-webpack-plugin')
// "clean-webpack-plugin": "^3.0.0"
// const { CleanWebpackPlugin } = require('clean-webpack-plugin');
// dll文件存放的目录
const dllPath = 'public/vendor'
module.exports = {
  entry: {
    // 需要提取的库文件
    vendor: [
      'echarts',
    ]
  },
  output: {
    path: path.join(__dirname, dllPath),
    // vendor.dll.js中暴露出的全局变量名
    filename: '[name].dll[hash].js',
    // 保持与 webpack.DllPlugin 中名称一致
    library: '[name]_[hash]'
  },
  plugins: [
    // 清除之前的dll文件
    new CleanWebpackPlugin(['*.*'], {
      root: path.join(__dirname, dllPath)
    }),
    // "clean-webpack-plugin": "^3.0.0"
    // new CleanWebpackPlugin(),
    // 设置环境变量
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: 'production'
      }
    }),
    // manifest.json 描述动态链接库包含了哪些内容
    new webpack.DllPlugin({
      path: path.join(__dirname, dllPath, '[name]-manifest.json'),
      // 保持与 output.library 中名称一致
      name: '[name]_[hash]',
      context: process.cwd()
    })
  ]
}

• ⑶通过vue.js配置add-asset-html-webpack-plugin，动态把上脚本加入index.html中

  chainWebpack: (config) => {
   if (process.env.NODE_ENV === 'production') {//生产环境下
          config.plugin('dll-reference-plugin')
          .use(webpack.DllReferencePlugin)
          .tap(options => {
            options[0] = {
              context: __dirname,
              manifest: require('./public/vendor/vendor-manifest.json')
              // manifest: require(path.join(__dirname, `./src/common_chunk/${chunkFolder}/manifest.json`))
            }
            return options
          })
          config.plugin('add-asset-html-webpack-plugin')
          .use('add-asset-html-webpack-plugin')
          .tap(options => {
            options[0] = {
              // dll文件位置
              filepath: path.resolve(__dirname, './public/vendor/*.js'),
              // dll 引用路径
              publicPath: '/vendor',
              // dll最终输出的目录
              outputPath: '/vendor'
              // filepath: path.resolve(__dirname, `./src/common_chunk/${chunkFolder}/lib_*.js`)
            }
            return options
          })
      }
  }