【翻譯】Webpack 4 從0配置到生產模式

查看原文

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