webpack4のアップグレード

1. webpack-cli と webpack をインストールします

"webpack": "^4.39.3"

"webpack-cli": "^3.3.7"

npm run dev がエラーを報告する
webpack と webpack-dev-server のバージョンに互換性がないため、「webpack-dev-server」: "^3.1.4" をアップグレードします。
やり直し、エラー
html-webpack-plugin のバージョンに互換性がないため、「html-webpack-plugin」: "^3.2.0" をインストールして、もう一度開始してください
「vue-loader」をアップグレードします: 「^15.0.10」を再度開始します
vue-loader の最新バージョンでは、新しい構成 VueLoaderPlugin を追加する必要があります
// webpack.dev.conf.js
// 組み込み
const { VueLoaderPlugin } = require('vue-loader')

// 次のプラグインにプラグインを追加します
: [
new VueLoaderPlugin(),
]

// webpack.prod.conf.js ファイルも
// import
const { VueLoaderPlugin } = require('vue-loader')

// 次のプラグインにプラグインを追加します
: [
new VueLoaderPlugin(),
]
再開する
開発環境のアップグレードが完了しました
npm run build を実行してエラーを報告する
webpack.optimize.CommonsChunkPlugin は非推奨になっているため、新しい構成 config.optimization.splitChunk を使用する必要があります。

// webpack.prod.conf.js
// プラグインの最適化と同じレベルで構成の最適化を追加します
: { splitChunks: { cacheGroups: { ベンダー: { test: /[\\/]node_modules[\\/]/, name: 'vendor '、チャンク: 'all' }、マニフェスト: { name: 'manifest'、 minChunks: Infinity }、 } }、 }、プラグイン: [...]

// 去去プラグインの中のこの部分代码
new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', minChunks (module) { // node_modules 内の必要なモジュールはすべてベンダーに抽出され、返されます ( module.resource && /\.js$ /.test(module.resource) && module.resource.indexOf( path.join(__dirname, '../node_modules') ) === 0 ) } }), // Webpack ランタイムとモジュールマニフェストを独自のファイルに抽出します // アプリバンドルが更新されるたびにベンダーハッシュが更新されないようにするため new webpack.optimize.CommonsChunkPlugin({ name: 'manifest',

minChunks: Infinity
}),
// このインスタンスは、コード分割されたチャンクから共有チャンクを抽出し、それらを
// ベンダーチャンクと同様の別個のチャンクにバンドルします
// 参照: https://webpack.js.org/plugins/commons- chunk-plugin/#extra-async-commons-chunk
new webpack.optimize.CommonsChunkPlugin({ name: 'app', async: 'vendor-async', Children: true, minChunks: 3 },
再実行
公式では CSS スタイルを抽出するための extract-text-webpack-plugin の使用が非推奨になっているため、代わりに mini-css-extract-plugin を使用できます。
// まず [email protected] をインストールします
// そして package.json 内のパッケージを削除します "extract-text-webpack-plugin": "^4.0.0-beta.0",

// webpack.base.conf.js

// 去掉 extract-text-webpack-plugin
// const ExtractTextPlugin = require('extract-text-webpack-plugin')

// 組み込み
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

// 以下のgenerateLoaders関数で設定を変更します(※真ん中が変更部分)
functiongenerateLoaders(loader,loaderOptions){ constloaders=options.usePostCSS?[cssLoader,postcssLoader]:[cssLoader]

if (loader) { loaders.push({ loader:loader+'-loader', options:Object.assign({},loaderOptions,{ sourceMap:options.sourceMap }) }) }

// そのオプションが指定されている場合に CSS を抽出します
// (実稼働ビルド時の場合です)
if (options.extract) {

// *********************
// ここを変更
return [MiniCssExtractPlugin.loader].concat(loaders)
// ********** *** ***********

} else { return ['vue-style-loader'].concat(loaders) } }

// webpack.prod.conf.js

// 去掉 extract-text-webpack-plugin
// const ExtractTextPlugin = require('extract-text-webpack-plugin')

// 組み込み
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

// プラグインの設定を削除
new ExtractTextPlugin({ filename: utils.assetsPath('css/[name].[contenthash].css'), allChunks: true, }),

// 次に、新しいプラグイン設定を追加します
new MiniCssExtractPlugin({ filename: utils.assetsPath('css/[name].[contenthash:12].css'), allChunks: true, }),
再開する
webpack4 はパッケージ化モード (mode) を指定する必要があります。指定するだけで済みます。package.json のコマンドで指定することも、設定に記述することもできます。

// webpack.dev.conf.js
const webpackConfig = merge(baseWebpackConfig, { モード: '開発', モジュール: {...} }

// webpack.prod.conf.js
const webpackConfig = merge(baseWebpackConfig, { モード: 'production', module: {...} }
オブジェクト '#' の読み取り専用プロパティ 'exports' に割り当てることはできません (require とexport の混合) #4039
プラグイン「transform-es2015-modules-commonjs」を .babellrc に追加します

おすすめ