Quoi de neuf dans webpack4 ? A quoi dois-je faire attention ?

Cet article vous apporte les nouveautés de webpack4 ? A quoi dois-je faire attention ? Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Alors que les développeurs connaissent encore la rémanence de webpack3.x, webpack4.x est discrètement arrivé.

Pour les utilisateurs, les questions les plus attendues sont les suivantes :

• Quels sont les changements dans la nouvelle version par rapport à l'ancienne version ?

• Migration de webpack3.x vers webapck4.x ?

• À quoi devons-nous faire attention lors de l'utilisation de webpack4.x ?

Nouvelles fonctionnalités de webpack

La puissance de webpack en tant qu'outil de build réside dans :

• De nombreuses fonctionnalités uniques peuvent être configurées dans webpack.config.js

• Sa configuration est flexible et modifiable

Mais à cause de cela, C'est aussi ça qui est mauvais. Parce qu'il est trop décontracté, il est difficile à contrôler, ce qui entraîne les problèmes suivants :

• Le coût d'apprentissage, d'utilisation et de recherche du webpack est trop élevé (la courbe de progression est trop raide );

• Construire une petite application nécessite également de configurer webpack.config.js comme construire une grande application (le moineau est petit mais possède tous les organes internes

) ;

Et webpack4.x est un nouveau La version de première génération de webpack a grandement résolu les problèmes existants.

webpackk4.x n'a pas besoin d'utiliser le fichier de configuration webpack.config.js

Vous pouvez utiliser les 6 étapes suivantes pour terminer la construction du projet :

1. Créez un répertoire de projet (webpack-demo), puis entrez dans le répertoire modifié

   mkdir webpack-demo && cd webpack-demo

2. Initialisez le package Fichier .json

   npm init -y

3. Charger les dépendances webpack et webpack-cli

   npm install webpack webpack-cli --save-dev

4. Ajoutez le fichier ~/src/index.js au projet (index.js est le fichier d'entrée par défaut, et le répertoire d'entrée par défaut est ~/src. Bien sûr, vous pouvez également personnaliser le fichier d'entrée. Vous devez modifier la configuration principale dans package.json L'élément est le fichier spécifié)

le code du fichier index.js est le suivant :

console.log('hello webpack.')

Ouvrez package.json et ajoutez le code suivant dans l'élément de configuration des scripts :

"scripts": {
    "build": "webpack"
}

Remarque : il s'agit de la commande des scripts NPM

Exécutez la commande npm run build, puis vous verrez un fichier ~/dist/main.js dans le projet. Dans la fenêtre de commande, vous devriez remarquer l'invite d'avertissement suivante :

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

Ignorez ce message d'invite. Nous avons constaté que la configuration d'initialisation du projet de webpack4.x n'est pas très différente de webpack3.x, mais de webpack4. x Le fichier de configuration webpack.config.js nécessaire est manquant.

Modifications dans le mode d'empaquetage

Regardons le message d'invite ci-dessus. Cela signifie : "Si l'élément de configuration du mode d'empaquetage n'est pas défini, alors le mode d'empaquetage par défaut est le mode de production (production) et pour le mode de développement. (développement), vous devez configurer l'élément de configuration du mode. À ce stade, je pense que vos lecteurs devraient comprendre que webpack4 économise du temps et des efforts.

Mais dans les applications réelles, nous faisons souvent la distinction entre le mode développement et le mode production, mais ce n'est pas difficile dans webpack4.x. Modifiez simplement les scripts dans package.json comme suit :

"scripts": {
    "dev": "webpack --mode development", // 用于开发模式
    "build": "webpack --mode production" // 用于生产模式
}

'Oui ! webpack4.x est aussi simple que cela. Nous n'avons pas besoin de définir deux fichiers de configuration respectivement pour le mode développement et le mode production comme webpack3.x.

Surcharger l'entrée/sortie de l'élément de configuration par défaut

Il n'y a pas de fichier de configuration webpack.config.js, ce qui non seulement réduit notre charge de travail de configuration, mais pose également quelques questions à nous qui n'en avons qu'un aperçu. Par exemple : Comment personnaliser l'entrée/sortie ?

En l'absence de webpack.config.js, on peut ajouter des éléments de configuration d'entrée/sortie dans la ligne de commande, le code est le suivant :

"scripts": {
    "dev": "webpack --mode development ./src/entry.js --output ./dist/bundle.js", // 用于开发模式
    "build": "webpack --mode production ./src/entry.js --output ./dist/bundle.min.js" // 用于生产模式
}

Cela n'utilise tout simplement pas webpack .config.js.

Ce qui précède sont les changements globaux que webpack4.x nous a apportés.

Mais l'implémentation de la fonction dans les éléments de configuration du module et des plugins dans le fichier de configuration webpack.config.js d'origine nécessite toujours l'utilisation de webpack.config.js. Bien que le plan de l'équipe webpack soit de configurer certains chargeurs et plugins couramment utilisés, seul le plug-in intégré UglifyJSPlugin est implémenté, qui peut compresser le code *.js sans l'introduire en mode production. Les autres chargeurs et plugins ne peuvent être introduits que via webpack.config.js.

Migration du Webpack et précautions

En voyant ces changements dans webpack4.x, de nombreuses personnes ne se demanderont pas seulement si la migration de webpack3.x vers webpack4.x est facile. Problème , en fait, ce n'est pas gênant, webpack4.x est rétrocompatible avec webpack.3x.

Afin de ne pas introduire webpack.config.js plus tôt, nous avons utilisé des scripts npm, comme le rechargement d'entrée/sortie, nous pouvons également le compléter dans le fichier de configuration webpack.config.js. La configuration est la même que celle d'origine, mais webpack4.x présente les problèmes suivants qui nécessitent une attention :

1. 升级到webpack4.x，你会发现在使用 extract-text-webpack-plugin 分离 *.css 出文件时经常出错，这是 extract-text-webpack-plugin 本身的问题，官方推荐使用 mini-css-extract-plugin 来避免问题的出现，但使用 mini-css-extract-plugin 有一个限制就是webapck须是4.2.0版本以上（较低的版本不支持）。

2. 使用 使用babel-loader 转化ES6->ES5时将不需要 .babelrc 配置文件，你只需要在 package.json 的 scripts 中添加 --module-bind js=babel-loader 即可完成对 babel-loader 的配置。

其他的loader和plugin没有什么大的变化。其实讲到这里基本完了，下面是用webpack4.x构建的一个demo。

webpack4.x的demo

紧接上面的配置：

首先，添加 html-wepback-plugin 和 html-loader 依赖：

npm install html-webpack-plugin html-loader --save-dev

html-webpack-plugin生成html文件（html文件用来加载打包生成 bundle.js 文件），当然你也可以使用webpack支持的各种模板loader，这里使用 html-loader 支持的 *.html 类型模板来生成。

其次，添加 mini-css-extract-plugin 和 css-loader 依赖：

npm install mini-css-extract-plugin css-loader --save-dev

loader和plugin配置与webpack3.x类同，也可参考下面提供代码中的 webpack.config.js 文件。

然后，添加 babel-loader 、@babel/babel-core 和 @babel/babel-preset 依赖：

npm install @babel/core babel-loader @babel/preset-env --save-dev

loader和plugin配置与webpack3.x类同，也可参考下面提供源码中的 webpack.config.js 文件。

修改 package.json 中 scripts 如下：

"scripts": {
    "dev": "webpack --mode development --module-bind js=babel-loader  ./src/entry.js --output ./dist/bundle.js",
    "build": "webpack --mode production ./src/entry.js --module-bind js=babel-loader --output ./dist/bundle.min.js"
},

最后，添加 webpack-dev-server 依赖，实现项目文件修改，浏览器及时刷新

npm install webpack-dev-server

在 package.json 中 scripts 的 dev 替换 webpack 为 webpack-dev-server 即可，代码如下：

"scripts": {
    "dev": "webpack-dev-server --mode development --module-bind js=babel-loader ./src/entry.js --output ./dist/bundle.js",
    "build": "webpack --mode production ./src/entry.js --module-bind js=babel-loader --output ./dist/bundle.min.js"
},

这样一个简单的demo就完成了。

其他的loader和plugin配置和webpack3.x类同。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!