webpack3.X升级webpack4.X

1.先升级所有相关插件。以下列出的，除了vue和vue-template-compiler 应该不用。其他最好都升到最新版本

插件	升级前	升级后
vue	2.5.2	2.5.22
webpack	3.6.0	4.29.0
babel-loader	7.1.1	7.1.5
css-loader	0.28.7	1.0.0
copy-webpack-plugin	4.0.1	4.6.0
extract-text-webpack-plugin	3.0.2	4.0.0-beta.0
file-loader	1.1.4	2.0.0
html-webpack-plugin	2.30.1	3.2.0
optimize-css-assets-webpack-plugin	3.2.0	5.0.1
style-loader	0.19.0	0.23.1
vue-loader	13.3.0	15.5.1
vue-style-loader	3.0.1	4.1.2
vue-template-compiler	2.5.2	2.5.22
webpack-bundle-analyzer	2.9.0	3.0.3
webpack-dev-server	2.9.1	3.1.14
webpack-merge	4.1.0	4.2.1
webpack-cli		3.2.1
image-webpack-loader		4.6.0

2.修改配置文件
破坏性变更：

--	变更后
UglifyJsPlugin	不在plugins使用，可以先直接删掉plugins: []里的相关代码
ExtractTextPlugin	改为MiniCssExtractPlugin，可以先直接删掉plugins: []相关代码
CommonsChunkPlugin	改为optimization，可以先直接删掉plugins: []相关代码

optimization: {
    runtimeChunk: {
        name: 'manifest'
    },
    minimize: true, // [new UglifyJsPlugin({...})]
    splitChunks: {
        chunks: 'async',
        minSize: 30000,
        minChunks: 1,
        maxAsyncRequests: 5,
        maxInitialRequests: 3,
        name: false,
        cacheGroups: {
            vendor: {
                name: 'vendor',
                chunks: 'initial',
                priority: -10,
                reuseExistingChunk: false,
                test: /node_modules\/(.*)\.js/
            },
            styles: {
                name: 'styles',
                test: /\.(scss|css)$/,
                chunks: 'all',
                minChunks: 1,
                reuseExistingChunk: true,
                enforce: true
            }
        }
    }
}

  plugins: [
    new MiniCssExtractPlugin({ // 原本是ExtractTextPlugin不要了
      filename: utils.assetsPath('css/[name].[chunkhash].css'),
      chunkFilename: utils.assetsPath('css/[id].[chunkhash].css')
    })
]

3.util修改

exports.cssLoaders = function(options) {
    options = options || {}

    const cssLoader = {
        loader: 'css-loader',
        options: {
            minimize: process.env.NODE_ENV === 'production',
            sourceMap: options.sourceMap,
            importLoaders: 1
        }
    }

    // generate loader string to be used with extract text plugin
    function generateLoaders(loader, loaderOptions) {
        let loaders = []
        if (loader) {
            loaders = [{
                loader: loader + '-loader',
                options: Object.assign({}, loaderOptions, {
                    sourceMap: options.sourceMap
                })
            }]
        }

        if (options.extract) {
            let extractLoader = {
                loader: MiniCssExtractPlugin.loader,
                options: {}
            }
            // 不清楚先后顺序是否影响编译，但当前顺序是正确的
            return [extractLoader, 'css-loader'].concat(['postcss-loader'], loaders)
        } else {
            // 不清楚先后顺序是否影响编译，但当前顺序是正确的
            return ['vue-style-loader', 'css-loader'].concat(['postcss-loader'], loaders)
        }
    }

    return {
        css: generateLoaders(),
        postcss: generateLoaders(),
        less: generateLoaders('less'),
        sass: generateLoaders('sass', { indentedSyntax: true }),
        scss: generateLoaders('sass'),
        stylus: generateLoaders('stylus'),
        styl: generateLoaders('stylus')
    }
}