webpack4帶來了什麼

在開發人員還在體會webpack3.x的餘韻時，webpack4.x已經悄然而來。

而對使用者來講，最期待的問題無外乎以下：

• 新版本與舊版本相比都有哪些改變？
• webpack3.x到webapck4.x的遷移？
• 使用webpack4.x咱們應該注意什麼？

webpack的新特性

webpack 做爲構建工具的強大之處在於：

• 能夠在 webpack.config.js 中配置不少獨特的功能；
• 它的配置靈活多變；

但正由於這樣，這也是它的糟點。由於太隨意，因此很差控制，形成了以下的問題：

• 學習、使用、研究webpack的成本太高（進階曲線太陡）；
• 構建一個小應用也須要像構建大應用那樣配置 webpack.config.js（麻雀雖小五臟俱全）；

而webpack4.x做爲新一代版本 webpack ，它的出現極大的解決了現有的問題。

webpackk4.x能夠不使用 webpack.config.js 配置文件

可使用下面6小步完成項目的構建：

1. 建立一個項目目錄（webpack-demo），而後進入改目錄

   mkdir webpack-demo && cd webpack-demo

2. 初始化 package.json 文件

   npm init -y

3. 加載 webpack 和 webpack-cli 依賴

   npm install webpack webpack-cli --save-dev

4. 在項目中添加 ~/src/index.js 文件（index.js 是默認的入口文件，默認入口目錄爲~/src，固然你也能夠自定義入口文件，須要修改 package.json 中的 main 配置項爲指定的文件）

index.js 文件代碼以下：

console.log('hello webpack.')

1. 打開 package.json 在 scripts 配置項中添加以下代碼：

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

注：這就是NPM的 scripts 命令

1. 運行 npm run build 命令，以後在項目中你將看到一個 ~/dist/main.js 的文件。在命令窗口你因該注意到以下的警告提示：

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/

忽略這條提示信息，咱們發現webpack4.x的項目初始化配置和webpack3.x沒什麼大的區別，可是webpack4.x少了必需要的 webpack.config.js 配置文件。

打包模式的改變

咱們再回頭查看上面這個提示信息，它的意思就是說：‘若是沒有設置打包模式這個配置項，那麼默認的打包模式爲生產模式（production），而對於開發模式（development），須要配置 mode 配置項’，說到這裏，我想各位看官應該明白了webpack4.x增長了不少默認配置項，針對不瞭解webpack的人員或小應用開發的場景，這樣作無異省時省力。

但實際應用中，咱們每每仍是區分開發模式和生產模式，但這在webpack4.x中也不是什麼難事兒，只要修改 package.json 中的 scripts 以下：

"scripts": {
    "dev": "webpack --mode development", // 用於開發模式
    "build": "webpack --mode production" // 用於生產模式
}

‘對！webpack4.x就是這麼簡單’。咱們不須要像webpack3.x那樣分別定義開發模式和生產模式這樣兩份配置文件。

重載默認的配置項入口/出口

沒有了配置文件 webpack.config.js ，在減小了咱們的配置工做量同時，也給初窺門徑的咱們帶來了一些疑問。例如：如何自定義入口/出口？

在沒有 webpack.config.js 的狀況下，咱們能夠在命令行中添加入口/出口配置項，代碼以下：

"scripts": {
    "dev": "webpack --mode development ./src/entry.js --output ./dist/bundle.js", // 用於開發模式
    "build": "webpack --mode production ./src/entry.js --output ./dist/bundle.min.js" // 用於生產模式
}

這只是不使用 webpack.config.js 的一種方案。

以上就是webpack4.x給咱們帶來的總體變化。

可是原來 webpack.config.js 配置文件中的 module 和 plugins 配置項中的功能實現仍是須要使用 webpack.config.js。雖然webpack團隊的計劃是 0 配置一些經常使用的loader，plugin，但實現的僅有 UglifyJSPlugin 內置插件，在生產模式無需引入它就能夠實現 *.js 代碼的壓縮。其它的loader和plugin則只能經過 webpack.config.js 來引入。

webpack的遷移和注意事項

看到webpack4.x的這些變化，不少人不只會問webpack3.x到webpack4.x的遷移是否是很麻煩，其實並不麻煩，webpack4.x向後兼容webpack.3x。

前面爲了避免引入 webpack.config.js ，咱們使用了npm的 scripts ，其時像入口/出口的重載，咱們也能夠在 webpack.config.js 配置文件中完成，配置跟原來的類似，可是webpack4.x有以下問題須要注意：

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類同。

wepback4-demo源代碼

參考資料

webpack-tutorial

webpack官方指南

個人webpack系列文章