webpack3.x の移行とアップグレード

今回は webpack3.x の移行とアップグレードについて説明します。webpack3.x の移行とアップグレードの注意点は何ですか? 以下は実際的なケースです。

余談: 0 の設定は非常にギミックが多く、基本的にほとんどのユーザーのニーズを満たすことができないため、見ないでください。ただし、デフォルトの設定を追加すると、ユーザーにとってはより便利になります。箱から出して使用。結局のところ、以前は、パーセルの 0 構成が Webpack の脚光を浴びました。その後、私は、パーセル + vue を使用したパーセルの単純なテンプレート プロジェクトにも取り組みました。興味があれば、ご覧ください。

1. webpack 4 の新機能

0。インストール

は、webpack をインストールするだけではなく、webpack-cli: <code>webpack即可，还需要安装一个webpack-cli：

全局安装

sudo npm install -g webpack webpack-cli

局部安装（当前文件夹）

npm install --save-dev webpack webpack-cli

1. 0配置

默认的入口为 './src/' 和默认出口 './dist'；

对压缩(optimization.minimize)的设置，默认在production时开启，在development时关闭。

默认配置不仅限于上述两项。

2. mode/–mode参数

新增了mode/--mode参数来表示是开发还是生产，mode有两个可选值：development和production，production不支持监听，production侧重于打包后的文件大小，development侧重于构建的速度。

webpack --mode development

也可以在配置文件中配置：

// webpack.config.js
module.exports = {
 mode: "production",
 // ...
}

3. 对uglifyjs升级

在之前的vue脚手架创建的基于webpack的工程，在webpack.prod.conf.js

グローバルインストール

class user {
 getUsername() {
  // to do
 }
}

部分インストール(現在のフォルダー)

rules: [
 {
  test: /\.json$/,
  type: "javascript/auto"
 }
]

1.0構成

デフォルトのエントリは './src/' で、デフォルトの終了はです。 > './dist';

圧縮の設定 (optimization.minimize) は、運用中はデフォルトでオンになり、開発中はオフになります。

デフォルトの設定は上記の2項目に限定されません。

2. mode/--mode パラメーター

mode/--mode パラメーターは、開発か本番かを示すために追加されます。モードには、開発と本番の 2 つのオプションの値があります。ファイルサイズの次に開発はビルド速度に重点を置きます。

let jsonData = require('./data.json');
import jsonData from './data.json'
import { first } from './data.json'

は構成ファイルでも構成できます:

npm install -g webpack webpack-cli
npm install --save-dev webpack webpack-cli

3. uglifyjs をアップグレードします

以前の vue スキャフォールディングによって作成された webpack ベースのプロジェクトは、webpack.prod.conf.js にあります。設定で次の行がはっきりとわかります:

// UglifyJs は ES6+ をサポートしていません。ツリーシェイクを改善するために babel-minify を使用することもできます: https://github.com/babel/minify

in webpack4 .0すでに次のような es6 コードを圧縮できます:

const webpack = require('webpack')；
new webpack.optimize.SplitChunksPlugin({
 chunks: "all",
 minSize: 30000,
 minChunks: 1,
 maxAsyncRequests: 5,
 maxInitialRequests: 3,
 name: true,
 cacheGroups: {
  default: {
   minChunks: 2,
   priority: -20,
   reuseExistingChunk: true,
  },
  vendors: {
   test: /[\/]node_modules[\/]/,
   priority: -10
  }
 }
})

圧縮後は、次のようになります:

4. ローダーを削除するには、ルールを使用する必要があります

webpack3.x では、以前のバージョンのローダーがまだ保持されています。 、およびルール 新しいバージョンでは、ローダーが完全に削除され、ルールを使用する必要があります。

5.sideEffects

モジュールのpackage.jsにsideEffects:falseを追加します。exportを使用して個別にエクスポートすると、export以外のファイルがパッケージ化されなくなり、パッケージ化されたファイルが小さくなります。

関連リンク: https://github.com/webpack/webpack/tree/master/examples/side-Effects

6. webpack4 は複数の形式のモジュール タイプをサポートしていますが、調整のためにタイプを追加する必要がある場合があります

CommonJS、AMD、ESM の 3 種類のモジュールの場合は javascript/auto を使用します。

EcmaScript モジュール (.mjs) の場合は javascript/esm を使用します。他のモジュール タイプは無効です。 CommonJS および EcmaScript モジュールのみが使用できません。javascript/dynamic を使用します。🎜🎜 json タイプのファイルの場合は、require および import を使用して json をインポートできます。Webassembly の場合は、webassembly/experimental を使用します。 - 公式には実験的な機能と言われています。 🎜🎜例: 🎜rrreee🎜🎜7. JSON ファイルの ES6 インポートをサポートし、無駄なコードをフィルタリングできます 🎜🎜🎜 json ファイルをインポートするには、次の 3 つの方法があります: 🎜rrreee🎜 import { first } from ' によって導入された json ファイル./data.json」はインポートされていないコードを無視し、最初のコードのみがパッケージ化時に含まれます。 🎜🎜🎜8. CommonsChunkPlugin を削除し、optimization.splitChunks と optimization.runtimeChunk に置き換えます🎜🎜🎜 内容が多いので詳しくは紹介しません。将来については、3 以降で説明します。移行時に簡単な説明があります。

二、webpack 3.X 迁移到 webpack4.X

1. 更新webpack依赖

npm install -g webpack webpack-cli
npm install --save-dev webpack webpack-cli

2. 更新对应模块

在webpack升级的同时，对应的许多依赖也需要相应的进行升级，下面是在vuec-cli的脚手架中需要的更新；对于其他工程，注意看控制台的报错，是哪个插件报的错就去升级那个插件，如果存在找不到模块之类的错误就去升级对应的loader。

html-webpack-plugin => npm i -D html-webpacl-plugin

webpack-dev-server或者改为webpack-serve => npm i -D webpack-dev-server/npm i -D webpack-serve

vue-loader => npm i -D vue-loader

extract-text-webpack-plugin@next => npm i -D extract-text-webpack-plugin@next <br>…

3. 使用mode/–mode

在命令中加入--mode development/ --mode production或者在配置文件中加入mode: 'development'/mode: 'production'。

4. 如果使用CommonsChunkPlugin替换为optimization.splitChunks

使用栗子：

const webpack = require('webpack')；
new webpack.optimize.SplitChunksPlugin({
 chunks: "all",
 minSize: 30000,
 minChunks: 1,
 maxAsyncRequests: 5,
 maxInitialRequests: 3,
 name: true,
 cacheGroups: {
  default: {
   minChunks: 2,
   priority: -20,
   reuseExistingChunk: true,
  },
  vendors: {
   test: /[\\/]node_modules[\\/]/,
   priority: -10
  }
 }
})

写在后面

对于webpack的这次升级这里没有一一列举，选了几个相对关键的点，具体可以去看这里；有关从webpack3.x迁移到新版的时候可能还有其他的坑需要慢慢去趟，目前遇到的基本都解决了。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

vue+update()使用详解

具体分析webpack样式加载

以上がwebpack3.x の移行とアップグレードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。