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')
    }
}

configuration The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment. You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

以上报错 需要在webpack.config.js 中配置：