webpack3.0アップグレード4.0
4708 ワード
文書ディレクトリ
1.webpack 3.11アップグレード4.26
パッケージ効率を向上させるため、webpack 3.11ベースでアップグレードしました、webpack 4.0リリース以来、ゼロ構成のwebpackはプロジェクト自体に提供される「パッケージ」と「圧縮」機能を最適化しており、vue-cliのデフォルト構成ではなく4.0をプロジェクトで使用し始めると、問題が少なくなる可能性があります.
2.インストール/アップグレード依存
これらの依存はbuildの過程で依存が新しい置換やエラーを発見し、徐々に置換されているものがあります.複数のピットに遭遇したい場合は、まずwebpack、webpack-cliを対応するバージョンdevDependenciesにアップグレードすることができます.
"extract-text-webpack-plugin": "^4.0.0-beta.0"
"html-webpack-plugin": "^4.0.0-beta.14"
"mini-css-extract-plugin": "^0.9.0" ( optimize-css-assets-webpack )
"preload-webpack-plugin": "^3.0.0-beta.4"
"script-ext-html-webpack-plugin": "^2.1.3"
"vue-loader": "^15.3.0"
"webpack": "^4.26.1"
"webpack-cli": "^3.1.2"
"webpack-dev-server": "^3.2.1"
"script-ext-html-webpack-plugin": "^2.1.3"
3.問題
const {VueLoaderPlugin} = require('vue-loader')
module.exports
plugins:[new VueLoaderPlugin()]
：
webpack.prod.conf.js webpackConfig :
optimization: {
noEmitOnErrors: true,
concatenateModules: true,
splitChunks: {
chunks: 'all',
name: 'common',
},
runtimeChunk: {
name: 'runtime'
}
}
webpack.prod.conf.js webpackConfig :
optimization:{
namedModules: true
},
：
npm i preload-webpack-plugin@next -D
.hooks instead問題:extract-text-webpack-plugin互換問題、機能:extract css into its own file解決:extract-text-webpack-pluginアンインストールmini-css-extract-plugin new MiniCssExtractPlugin({
filename: utils.assetsPath('css/[name].[contenthash].css'),
allChunks: false,
}),
//
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const smp = new SpeedMeasurePlugin();
.hooks instead解決:npm i --save-dev extract-text-webpack-plugin@next
[email protected]
optimization: {
splitChunks: {
cacheGroups: {
commons: {
name: "commons",
chunks: "initial",
minChunks: 2
}
}
}
},
new HtmlWebpackPlugin({
filename: config.build.index,
template: 'index.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
},
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
chunksSortMode: 'dependency'
}),
これで、npm run buildは正常にnpm run devを調整し、直接実行に成功しました.
4.まとめ
Cacheを開いた場合、パッケージ時間は22 s前後だったが、buildは最速8 s前後でアップグレードされた.