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新增了哪些東西？需要注意些什麼？的詳細內容。更多資訊請關注PHP中文網其他相關文章！