webpack4帶來了什麼
在開發人員還在體會webpack3.x的餘韻時，webpack4.x已經悄然而來。
而對使用者來說，最期待的問題無外乎如下：
- 新版本與舊版本相比都有哪些改變？
- webpack3.x到webapck4.x的遷移？
- 使用webpack4.x我們應該注意什麼？
webpack的新特性
webpack
作為構建工具的強大之處在於：
webpack.config.js
但正因為這樣，這也是它的糟點。因為太隨意，所以不好控制，造成了如下的問題：
webpack.config.js
而webpack4.x作為新一代版本webpack
，它的出現極大的解決了現有的問題。
webpackk4.x可以不使用webpack.config.js
配置檔案
可以使用下面6小步完成專案的構建：
-
建立一個專案目錄（webpack-demo），然後進入改目錄
mkdir webpack-demo && cd webpack-demo
-
初始化
package.json檔案npm init -y
-
載入
webpack和ofollow,noindex">webpack-cli 依賴npm install webpack webpack-cli --save-dev
-
在專案中新增
~/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有如下問題需要注意：
-
升級到webpack4.x，你會發現在使用
extract-text-webpack-plugin分離*.css出文件時經常出錯，這是extract-text-webpack-plugin本身的問題，官方推薦使用mini-css-extract-plugin來避免問題的出現，但使用mini-css-extract-plugin有一個限制就是webapck須是4.2.0版本以上（較低的版本不支援）。 -
使用
使用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類同。