webpack常用的插件

webpack常用的开发插件

　　1.clean-webpack-plugin

　　　　运行webpack build时先把打包进入的文件夹清空

　　　　注意，它是以对象的方式去接收的

const { CleanWebpackPlugin } = require("clean-webpack-plugin")
plugins: [
    new CleanWebpackPlugin(),
  ]

　　2.html-webpack-plugin

　　　　模板文件,动态的去创造模板文件

　　　　主要用途

　　　　　可以动态的引入js,因为每次打包后的js hash值可能不一样，它可以根据具体的hash值，引入js

const HtmlWebpackPlugin = require("html-webpack-plugin")

  plugins: [
    new HtmlWebpackPlugin({
      template: 'index.html',
      title: 'czklove',
      filename: 'index.html',
      chunks: '[name].bundle[hash].js'
    })
  ]

　　3.HotModuleReplacementPlugin 模块热替换插件

　　　webpack 内置插件，可以简单配置就能用。功能，就是提供保存后，页面刷新修改内容　

new webpack.HotModuleReplacementPlugin()

　　4.最最重要的插件，SplitChunksPlugin ,代码分割插件

optimization: {
    splitChunks: {
      chunks: 'initial', // 分割方式 async, all ，initial
      minSize: 30000, //分割后的文件最小值
      minChunks: 1, // 最小引用次数
      maxAsyncRequests: 5, // 异步的最大分割数
      maxInitialRequests: 3, // 初始模块的最大分割数
      automaticNameDelimiter: '~', // 分割后的名字用什么符号链接
      name: true,
      cacheGroups: { //缓存组
        venxx: {
          test: /vue/,
          name: 'vuevendors'
        },
        vendors: {
          test: /jquery/,
          name: 'jqueryvendors'
        }
      }
    }
  },

　　主要用途

　　　　1.做代码分割，默认是将所以的异步引入单独打包，如常见的Vue异步路由组件

　　　　2.将不常改变的模块代码单独打包，这样更有利于浏览器的缓存处理，如将vue vuex vue-router, ui库，这些都是不常改变

　　　　3.将业务代码单独打包，这是经常改变的

　　　　4.异步模块代码单独打包，做预加载处理，加快首页加载速度

　　如果项目过大，打包事件过长，可以考虑使用HappyPack 插件，开启多进程打包（不是多线程，js是单线程的）

plugins: [
      new HappyPack({
        id: 'babel', // 与loader 配置项对应
        threads: 4, // 开启多少个进程
        loaders: ['babel-loader'] //用什么loader处理
      })
    ]

猜你喜欢