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')
}
}
网友评论