关于vue 用 npm run build 出现的一系列问题解决记录 webpack打包出现的问题二期，vue的webpack插件升级问题

关于vue 用 npm run build 出现的一系列问题解决记录 webpack打包出现的问题二期，vue的webpack插件升级问题

---

问题描述

compiler.plugin is not a function at HtmlWebpackPlugin.apply

yarn add HtmlWebpackPlugin 或者
npm install HtmlWebpackPlugin

ExtractTextPlugin 不兼容版本的问题

> //var ExtractTextPlugin = require('extract-text-webpack-plugin') //
> //ExtractTextPlugin 替换为 MiniCssExtractPlugin  webpack4 之后就不用Extract 了
>     /*
    new ExtractTextPlugin({
      filename: utils.assetsPath('css/[name].[contenthash].css')
    }),*/
> var MiniCssExtractPlugin = require("mini-css-extract-plugin");
> new MiniCssExtractPlugin({
      filename:  utils.assetsPath('css/[name].[contenthash].css')
    }),

pip install mini-css-extract-plugin 替换完别忘了install 一下新的插件包

CopyWebpackPlugin has an unknown property ‘ignore’ 这个是天坑，旧版本的格式不兼容新版本，要在函数参数之前嵌套个键值对 patterns 和 options才可以引用里面的from ，to，ignore，currency等参数，不过ignore好像被删了 ，官网文档也没更新，还是旧的使用方法无嵌套方式，然后一直报错

 /*   new CopyWebpackPlugin([{
        from: path.resolve(__dirname, '../static'),
        to: config.build.assetsSubDirectory,
	    ignore:['.*']
      }],
    )*/
   

 new CopyWebpackPlugin({
      patterns:[
        { from:path.resolve(__dirname, '../static'),to: config.build.assetsSubDirectory}
    ],
      options:{
        concurrency: 100,
        }
    }),

webpack.optimize.UglifyJsPlugin 这个函数也旧了 要用新的

var UglifyJsPlugin = require("uglifyjs-webpack-plugin")
module.exports = webpackConfig
var webpackConfig = merge(baseWebpackConfig, {
'''     '''   '''
    optimization: {
      minimizer: [
        new UglifyJsPlugin(),
      ],
       splitChunks: { //  改动 splitChunks 替换旧模块
         cacheGroups:{
           commons:{
            name: 'manifest',
            chunks:'all',  // 改动 chunks 只能在 initial  async  和 all 里挑
            minChunks:1 // 改动 minChunks 只能是数字 代表模块被调用次数
           }
         }

       }
    }
 })

原因分析：

基本是bing能解决的，不行的话官网细嚼也可

解决方案：

告辞