webpack 4 發布了！
webpack 4 作為一個零配置的模塊打包器
webpack 是強大的並且有許多獨一無二的特點但是有一個痛點就是配置文件。
在中型到大型項目中為webpack提供一個配置並不是什么大問題。你不可能沒有任何配置。然而，對於小一些的項目這就是煩惱了，尤其是當你想啟動一些玩具項目。
這就是為什么Parcel獲得如此之多關注的原因
現在：webpack 4 默認不需要任何配置。
讓我們嘗試一下。
webpack 4: 0 配置啟動
創建一個新的文件夾並進入：
mkdir webpack-4-quickstart && cd $_
初始化package.json通過運行
npm init -y
添加webpack 4：
npm i webpack --save-dev
我們還需要webpack-cli，它作為一個包獨立存在:
npm i webpack-cli --save-dev
現在打開package.json文件添加build腳本
"scripts": {
"build": "webpack"
}
關閉並保存文件
試着去運行
npm run build
然后你會看到
ERROR in Entry module not found: Error: Can't resolve './src' in '~/webpack-4-quickstart'
webpack 4正在尋找./src中的入口點！如果你不知道這意味着什么去看看我以前的文章從Gulp切換到webpack
簡而言之：入口點是webpack開始構建Javascript包尋找的文件。
在之前的webpack版本中，入口點必須在名為webpack.config.js的配置文件中定義。
但是從webpack 4開始，不需要定義入口點：它會將./src/index.js作為默認值！
測試這個新特性非常容易。創建./src/index.js:
console.log(`I'm a silly entry point`);
然后重新運行build命令
npm run build
你會得到這個包 ~/webpack-4-quickstart/dist/main.js。
什么？等一下？剛才那里不需要定義出口文件嗎？
在webpack 4 中不需要定義入口也不需要定義出口。
webpack的主要優勢是代碼分割。但相信我，使用零配置工具可以加快速度。
所以這是第一條新聞：webpack 4不需要配置文件。
它會查找./src/index.js作為默認入口點。而且，它會在./dist/main.js中輸出這個包。
在下一節中，我們將看到webpack 4的另一個很好的功能：生產和開發模式。
webpack 4：生產和開發模式
擁有2個配置文件是webpack中的常見模式。
一個典型的項目可能有：
- 一個用於開發的配置文件，用於定義webpack dev服務器和其他東西
- 用於生產的配置文件，用於定義UglifyJSPlugin，sourcemaps等
雖然在大的項目可能仍然需要2個文件，但是在webpack 4中，您可以無需任何配置。
怎么會這樣呢？
webpack 4 采用了生產和開發模式。
實際上，如果你注意到npm run build的輸出，你會看到一個很好的警告:
The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment.
'mode'選型還沒有被設置。設置'mode'選項為'development'或者'production'以啟用環境的默認值。
什么意思？讓我們看一下
打開package.json文件在script部分寫入
"scripts": {
"dev": "webpack --mode development",
"build": "webpack --mode production"
}
現在試着運行
npm run dev
然后打開./dist/main.js看一下。你發現什么？是的，我知道，一個無聊的包文件。。。沒有被壓縮。。。
接着運行
npm run build
再看一下./dist/main.js。現在你看到什么？一個被壓縮的文件。
是的！
生產模式可以實現各種優化。包括minification，scope hoisting，tree-shaking等等。
另一方面，開發模式針對速度進行了優化，只不過是提供未縮小的捆綁包。
下面是第二條新聞：webpack 4引入了生產和開發模式。
在webpack 4中，你可以不用一行配置！只需定義--mode 標識，即可輕松獲得一切！
webpack 4: 覆蓋默認的輸入／輸出
我喜歡webpack 4 零配置，但是如何覆蓋默認入口點？和默認輸出？
在package.json中配置它們!
這里是一個例子：
"scripts": {
"dev": "webpack --mode development ./foo/src/js/index.js --output ./foo/main.js",
"build": "webpack --mode production ./foo/src/js/index.js --output ./foo/main.js"
}
webpack 4: 使用Babel轉譯JavaScript ES6
現代Javascript主要是用ES6編寫的。
但並不是每個瀏覽器都知道如何處理ES6。我們需要某種轉譯。
這個轉換步驟被稱為transpiling。 Transpiling是采用ES6並使舊版瀏覽器可以理解的行為。
Webpack不知道如何進行轉換，但有loaders: 把它們想象成轉換器。
babel loader是將ES6及更高版本轉換為ES5的webpack加載器。
要開始使用加載器，我們需要安裝一堆依賴項。尤其是：
- babel-core
- babel-loader
- babel-preset-env
使用下面命令：
npm i babel-core babel-loader babel-preset-env --save-dev
接下來，通過在項目文件夾中創建一個名為.babelrc的新文件來配置Babel：
{
"presets": [
"env"
]
}
此時我們有兩種配置babel-loader的選項：
- 使用webpack的配置文件
- 在你的npm腳本中使用
--module-bindin
是的，我知道你在想什么。 webpack 4將自己定位為零配置工具。為什么你會再次寫一個配置文件？
webpack 4中零配置的概念適用於:
- 入口點。默認為./src/index.js
- 輸出。默認為./dist/main.js
- 生產和開發模式（無需為生產和開發創建兩個單獨的配置文件）
這就夠了。但是對於在webpack 4中使用裝載器，你仍然需要創建一個配置文件。
我已經問過Sean了。webpack 4中的裝載機制會和webpack 3一樣嗎？有沒有計划為像babel-loader這樣的普通裝載機提供零配置？
他的回應是：
“對於未來（在v4之后，也許是4.x或5.0），我們已經開始探索預設或附加系統如何幫助定義這一點。 我們不想要的東西：嘗試將一堆東西推入核心作為默認值我們所需要的：允許其他擴展。”
現在你必須依靠webpack.config.js。讓我們來看看…
webpack 4：在配置文件中使用babel-loader
給webpack一個配置文件，以最經典的方式使用babel-loader。
創建一個名為webpack.config.js的新文件並配置加載器：
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
}
};
除非要定制它，否則不需要指定入口點。
接下來打開./src/index.js並編寫一些ES6：
const arr = [1, 2, 3];
const iAmJavascriptES6 = () => console.log(...arr);
window.iAmJavascriptES6 = iAmJavascriptES6;
最后通過下面命令打包：
npm run build
現在看看./dist/main.js來查看編譯過的代碼。
webpack 4：使用沒有配置文件的babel-loader
還有另一種使用webpack裝載機的方法。
--module-bindflag允許您從命令行指定加載器。謝謝Cezar指出這一點。
該標志不是webpack 4特有的。從第3版開始，它就在那里。
要在沒有配置文件的情況下使用babel-loader，請在package.json中配置npm腳本，如下所示：
"scripts": {
"dev": "webpack --mode development --module-bind js=babel-loader",
"build": "webpack --mode production --module-bind js=babel-loader"
}
你准備好運行構建。
我不是這種方法的粉絲（我不喜歡臃腫的npm腳本），但它仍然很有趣。
webpack 4：配置React的webpack 4環境
一旦你安裝並配置了babel，這很簡單。
安裝React：
npm i react react-dom --save
然后添加babel-preset-react:
npm i babel-preset-react --save-dev
配置 . babelrc 中的preset：
{
"presets": ["env", "react"]
}
這就好了！
正如Conner Aiken所建議的，你可以配置babel-loader來讀取.jsx文件。如果您為您的React組件使用jsx擴展，這很有用。
打開webpack.config.js並像這樣配置加載器：
module.exports = {
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
}
};
為了測試方便，你可以在./src/App.js中創建一個假的的React組件:
import React from "react";
import ReactDOM from "react-dom";
const App = () => {
return (
<div>
<p>React here!</p>
</div>
);
};
export default App;
ReactDOM.render(<App />, document.getElementById("app"));
然后在./src/index.js導入組件：
import App from "./App";
再次運行構建。
webpack 4: HTML webpack plugin
webpack需要兩個額外的組件來處理HTML：html-webpack-plugin和html-loader。
添加依賴：
npm i html-webpack-plugin html-loader --save-dev
更新webpack配置文件：
const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader",
options: { minimize: true }
}
]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
})
]
};
創建HTML文件./src/index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>webpack 4 quickstart</title>
</head>
<body>
<div id="app">
</div>
</body>
</html>
運行構建命令：
npm run build
查看./dist文件夾。就能看到輸出的HTML文件。
不需要將HTML包含在HTML文件中：該包將被自動注入。
在瀏覽器中打開./dist/index.html：你應該看到React組件正在工作！
正如你所看到的，在處理HTML方面沒有任何改變。
webpack 4仍然是一個針對Javascript的模塊打包器。
但是有計划將HTML作為模塊添加（HTML作為入口點）。
webpack 4：將CSS提取到一個文件中
webpack並不知道如何將CSS提取到文件中
在過去，這是extract-text-webpack-plugin的工作。
不幸的是，這個插件與webpack 4不兼容。
mini-css-extract-plugin成為了新的代替品。
安裝插件和css-loader：
npm i mini-css-extract-plugin css-loader --save-dev
接下來創建一個css文件用來測試：
/* */
/* CREATE THIS FILE IN ./src/main.css */
/* */
body {
line-height: 2;
}
配置插件和loader：
const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader",
options: { minimize: true }
}
]
},
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, "css-loader"]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
}),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
})
]
};
最后在./src/index.js中導入：
//
// PATH OF THIS FILE: ./src/index.js
//
import style from "./main.css";
然后構建：
npm run build
並查看./dist文件夾。你應該看到由此產生的CSS！
回顧一下：extract-text-webpack-plugin不能與webpack 4一起使用。請改用mini-css-extract-plugin。
webpack 4 : webpack dev server
想當你的代碼改變的時候自動運行 npm run dev ？很簡單。
使用webpack配置開發服務器只需一分鍾。
一旦配置好webpack dev server將在瀏覽器中啟動你的應用程序。
每次更改文件時，它都會自動刷新瀏覽器的窗口。
安裝webpack-dev-server：
npm i webpack-dev-server --save-dev
接下來打開package.json並調整腳本，如下所示：
"scripts": {
"start": "webpack-dev-server --mode development --open",
"build": "webpack --mode production"
}
關閉並保存文件。
接下來運行
npm run start
你會看到webpack dev server在瀏覽器中啟動你的應用程序。
webpack dev server非常適合開發。（這使得React Dev Tools能夠在瀏覽器中正常工作）。
webpack 4: 資源
A Github repo for the tutorial => webpack-4-quickstart
I know there’s already an awesome webpack list but here’s mine: a list of awesome resources about webpack 4 => awesome-webpack-4
It would be remiss not to mention SurviveJS webpack 4 by Juho Vepsäläinen