webpack4新增了哪一些東西？需要注意些什么？

在開發(fā)人員還在體會(huì)webpack3.x的余韻時(shí)，webpack4.x已經(jīng)悄然而來。

而對(duì)使用者來說，最期待的問題無外乎如下：

• 新版本與舊版本相比都有哪些改變？

• webpack3.x到webapck4.x的遷移？

• 使用webpack4.x我們應(yīng)該注意什么？

webpack的新特性

webpack 作為構(gòu)建工具的強(qiáng)大之處在于：

• 可以在 webpack.config.js 中配置很多獨(dú)特的功能；

• 它的配置靈活多變；

但正因?yàn)檫@樣，這也是它的糟點(diǎn)。因?yàn)樘�隨意，所以不好控制，造成了如下的問題：

• 學(xué)習(xí)、使用、研究webpack的成本過高（進(jìn)階曲線太陡）；

• 構(gòu)建一個(gè)小應(yīng)用也需要像構(gòu)建大應(yīng)用那樣配置 webpack.config.js（麻雀雖小五臟俱全）；

而webpack4.x作為新一代版本 webpack ，它的出現(xiàn)極大的解決了現(xiàn)有的問題。

webpackk4.x可以不使用 webpack.config.js 配置文件

可以使用下面6小步完成項(xiàng)目的構(gòu)建：

1. 創(chuàng)建一個(gè)項(xiàng)目目錄（webpack-demo），然后進(jìn)入改目錄

   mkdir webpack-demo && cd webpack-demo

2. 初始化 package.json 文件

   npm init -y

3. 加載 webpack 和 webpack-cli 依賴

   npm install webpack webpack-cli --save-dev

4. 在項(xiàng)目中添加 ~/src/index.js 文件（index.js 是默認(rèn)的入口文件，默認(rèn)入口目錄為~/src，當(dāng)然你也可以自定義入口文件，需要修改 package.json 中的 main 配置項(xiàng)為指定的文件）

index.js 文件代碼如下：

console.log('hello webpack.')

打開 package.json 在 scripts 配置項(xiàng)中添加如下代碼：

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

注：這就是NPM的 scripts 命令

運(yùn)行 npm run build 命令，之后在項(xiàng)目中你將看到一個(gè) ~/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/

忽略這條提示信息，我們發(fā)現(xiàn)webpack4.x的項(xiàng)目初始化配置和webpack3.x沒什么大的區(qū)別，但是webpack4.x少了必須要的 webpack.config.js 配置文件。

我們?cè)倩仡^查看上面這個(gè)提示信息，它的意思就是說：‘如果沒有設(shè)置打包模式這個(gè)配置項(xiàng)，那么默認(rèn)的打包模式為生產(chǎn)模式（production），而對(duì)于開發(fā)模式（development），需要配置 mode 配置項(xiàng)’，說到這里，我想各位看官應(yīng)該明白了webpack4.x增加了很多默認(rèn)配置項(xiàng)，針對(duì)不了解webpack的人員或小應(yīng)用開發(fā)的場(chǎng)景，這樣做無異省時(shí)省力。

但實(shí)際應(yīng)用中，我們往往還是區(qū)分開發(fā)模式和生產(chǎn)模式，但這在webpack4.x中也不是什么難事兒，只要修改 package.json 中的 scripts 如下：

"scripts": {
    "dev": "webpack --mode development", // 用于開發(fā)模式
    "build": "webpack --mode production" // 用于生產(chǎn)模式
}

‘對(duì)！webpack4.x就是這么簡單’。我們不需要像webpack3.x那樣分別定義開發(fā)模式和生產(chǎn)模式這樣兩份配置文件。

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

在沒有 webpack.config.js 的情況下，我們可以在命令行中添加入口/出口配置項(xiàng)，代碼如下：

"scripts": {
    "dev": "webpack --mode development ./src/entry.js --output ./dist/bundle.js", // 用于開發(fā)模式
    "build": "webpack --mode production ./src/entry.js --output ./dist/bundle.min.js" // 用于生產(chǎn)模式
}

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

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

但是原來 webpack.config.js 配置文件中的 module 和 plugins 配置項(xiàng)中的功能實(shí)現(xiàn)還是需要使用 webpack.config.js。雖然webpack團(tuán)隊(duì)的計(jì)劃是 0 配置一些常用的loader，plugin，但實(shí)現(xiàn)的僅有 UglifyJSPlugin 內(nèi)置插件，在生產(chǎn)模式無需引入它就可以實(shí)現(xiàn) *.js 代碼的壓縮。其它的loader和plugin則只能通過 webpack.config.js 來引入。

webpack的遷移和注意事項(xiàng)

看到webpack4.x的這些變化，很多人不僅會(huì)問webpack3.x到webpack4.x的遷移是不是很麻煩，其實(shí)并不麻煩，webpack4.x向后兼容webpack.3x。

前面為了不引入 webpack.config.js ，我們使用了npm的 scripts ，其時(shí)像入口/出口的重載，我們也可以在 webpack.config.js 配置文件中完成，配置跟原來的相似，但是webpack4.x有如下問題需要注意：

1. 升級(jí)到webpack4.x，你會(huì)發(fā)現(xiàn)在使用 extract-text-webpack-plugin 分離 *.css 出文件時(shí)經(jīng)常出錯(cuò)，這是 extract-text-webpack-plugin 本身的問題，官方推薦使用 mini-css-extract-plugin 來避免問題的出現(xiàn)，但使用 mini-css-extract-plugin 有一個(gè)限制就是webapck須是4.2.0版本以上（較低的版本不支持）。

2. 使用 使用babel-loader 轉(zhuǎn)化ES6->ES5時(shí)將不需要 .babelrc 配置文件，你只需要在 package.json 的 scripts 中添加 --module-bind js=babel-loader 即可完成對(duì) babel-loader 的配置。

其他的loader和plugin沒有什么大的變化。其實(shí)講到這里基本完了，下面是用webpack4.x構(gòu)建的一個(gè)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 文件），當(dāng)然你也可以使用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 依賴，實(shí)現(xiàn)項(xiàng)目文件修改，瀏覽器及時(shí)刷新

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"
},

這樣一個(gè)簡單的demo就完成了。

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

以上就是webpack4新增了哪些東西？需要注意些什么？的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！