webpack4新增了哪些需要注意的東西？

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.')

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

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

注：這就是NPM的 scripts 命令

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

關于webpack4新增了哪些需要注意的東西？問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業資訊頻道了解更多相關知識。