webpack5 + vue-cli5 をアップグレードする

この記事では全体的なアップグレードのみに焦点を当てていますが、具体的かつ微妙な落とし穴体験については、同じコラムで引き続き更新していきます。

Webパックのアップグレード

コアステップ

1. Webpack をアップグレードします。npm install webpack@latest
2. webpack-cli をアップグレードします。npm install webpack-cli@latest

プラグイン関連

1. mini-css-extract-plugin をアップグレードします。npm install mini-css-extract-plugin@latest
2. html-webpack-plugin をアップグレードします。npm install html-webpack-plugin@latest
3. IgnorePlugin 構文の変更

new webpack.IgnorePlugin({
    
    
    resourceRegExp: /^\.\/locale$/,
    contextRegExp: /moment/,
})

他の

1. 永続キャッシュをオンにする: 手動でオンにして webpack5 キャッシュ ディレクトリを生成し、パッケージ化速度を向上させます。

cache: {
    
    
    type: 'filesystem',
}

2. Node.js 関連のポリフィル: webpack5 は削除されたため、手動で導入する必要があります

resolve: {
    
    
    fallback:  {
    
    
        "path": require.resolve("path-browserify"),
        "crypto": require.resolve("crypto-browserify"),
    }
}

3. 厳密な開発ツールの記述:^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$

vue-cli のアップグレード

コアステップ

1. vue/cli-service をアップグレードします: npm install @vue/cli-service@latest(基礎となる webpack5)
2. Webpack をアップグレードします: npm install webpack@latest(Webpack のバージョンは vue-cli のバージョンと一致します)

他の

1. 永続キャッシュをオンにする: 手動でオンにして webpack5 キャッシュ ディレクトリを生成し、パッケージ化速度を向上させます。

cache: {
    
    
    type: 'filesystem',
}

2. Node.js 関連のポリフィル: webpack5 は削除されたため、手動で導入する必要があります

resolve: {
    
    
    fallback:  {
    
    
        "path": require.resolve("path-browserify"),
        "crypto": require.resolve("crypto-browserify"),
    }
}

3. IgnorePlugin 構文の変更

new webpack.IgnorePlugin({
    
    
    resourceRegExp: /^\.\/locale$/,
    contextRegExp: /moment/,
})