作者：Margarita Obraztsova
翻譯：無明
話題：前端語言 & 開發最佳實踐 & 前端構建 &webpack

一千個觀衆就有一千個哈姆雷特。你在網絡上可以找到上百萬個有關如何配置 Webpack 的教程，所以，你可能已經看到了一千種不同的配置方法。Webpack 本身在快速演化，除此之外，還有很多加載器和插件緊隨其後。這就是爲什麼這些配置文件會各有不同：組合使用同一組工具的不同版本可能會奏效，也可能不能如願。

很多人一直在抱怨 Webpack 使用起來很麻煩。從某些方面來看，確實如此。但是，我不得不說，從我使用 gulp 和 grunt 的經驗來看，它們也存在同樣的問題。也就是說，當你使用 npm 模塊時，就不可避免地會出現某些模塊版本不兼容的問題。

到目前爲止，Webpack 4 是最流行的模塊捆綁器之一。它提供了很多新特性，例如零配置、合理的默認值、性能改進、開箱即用的優化工具，等等。

零配置：Webpack 4 不需要配置文件，這是 Webpack 4 的一個全新的變更。

性能提升：Webpack 4 是迄今爲止最快的 Webpack 版本。

合理的默認值：Webpack 4 的主要概念包括入口、輸出、加載器和插件。

核心概念

入口

它應該是一個.js 文件，人們會在這個文件中包含.scss 或.css 文件，這樣做可能會導致很多意外的錯誤。有時候你可能會看到一個入口包含了幾個.js 文件。雖然有時候你可以這麼做，但它通常會增加更多的複雜性。

輸出

這是 build/ 或 dist/ 或任意名稱的文件夾，用於存放最終的.js 文件。

加載器

它們主要用來編譯或轉換你的代碼，例如 postcss-loader。

插件

插件在將代碼輸出到文件方面起着至關重要的作用。

快速入門

mkdir webpack-4-tutorial
cd webpack-4-tutorial

初始化 package.json：

npm init

或者：

yarn init

我們需要下載 Webpack 4 和 webpack-cli：

npm install webpack webpack-cli --save-dev

或者：

yarn add webpack webpack-cli --dev

現在，打開 package.json 文件，並添加一個構建腳本：

"scripts": {
  "dev": "webpack"
}

運行它，你可能會看到一個警告：
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/

Webpack 4 的模式

你需要編輯腳本，在其中包含模式標誌：

"scripts": {
  "dev": "webpack --mode development"
}

ERROR in Entry module not found: Error: Can’t resolve ‘./src’ in ‘~/webpack-4-quickstart’
Webpack 會查找一個帶有 index.js 文件的文件夾.src/。這是 Webpack 4 的默認行爲，因爲它是零配置的。

讓我們創建一個帶有 index.js 文件的目錄./src，並這個文件中加一些代碼。

console.log("hello, world");

現在運行腳本：

npm run dev

或者：

yarn dev

如果一切正常，你將得到一個./dist/main.js 文件。好了，代碼已經編譯好了。但剛剛都發生了什麼？

默認情況下，Webpack 是零配置的，所以你不需要配置 webpack.config.js。因此，它必須假設一些默認行爲，它總是先查找./src 文件夾，然後在其中查找 index.js，並將輸出寫入./dist/main.js 文件。

如果你遇到這個錯誤：
ERROR in ./node_modules/fsevents/node_modules/node-pre-gyp/lib/publish.js
Module not found: Error: Can’t resolve ‘aws-sdk’ in ‘/Users/mobr/Documents/workshop/test-webpack-4-setup/node_modules/fsevents/node_modules/node-pre-gyp/lib’
這裏描述了更多細節。要解決這個問題，你需要創建 webpack.config.js 文件，然後按照本文後面的教程配置這個文件。但是首先你需要下載webpack-node-externals。

npm install webpack-node-externals --save-dev

或者：

yarn add webpack-node-externals --dev

然後導入這個模塊：

const nodeExternals = require('webpack-node-externals');
...
module.exports = {
    ...
    target: 'node',
    externals: [nodeExternals()],
    ...
};

擁有 2 個配置文件是 Webpack 的常見做法，尤其是在大型項目中，通常一個用於開發，一個用於生產環境。Webpack 4 提供了兩種模式：生產（production）和開發（development）。這樣可以避免使用兩個文件（對於中型項目）。

"scripts": {
  "dev": "webpack --mode development",
  "build": "webpack --mode production"
}

如果你細心一點就會發現，main.js 文件並沒有被最小化。

我將在示例中使用 build 腳本，因爲它提供了很多開箱即用的優化措施，但其實你可以隨意使用它們中的任何一個。build 和 dev 腳本之間最主要的區別在於它們如何輸出文件。build 用於創建用於生產環境的代碼，而 dev 用於開發環境，所以它支持熱模塊替換、開發服務器以及其他很多有助於開發工作的東西。

你可以覆蓋 npm 腳本中的默認值，只需使用標誌：

"scripts": {
 
  "dev": "webpack --mode development ./src/index.js --output ./dist/main.js",
 
  "build": "webpack --mode production ./src/index.js --output ./dist/main.js"
 
}

這將覆蓋默認選項，而無需配置任何東西。
作爲練習，也可以試一試這些標誌：
–watch 標誌用於啓用監聽模式。它將監控你的文件更改，並在每次文件發生更新時重新編譯文件。

"scripts": {
 
  "dev": "webpack --mode development ./src/index.js --output ./dist/main.js --watch",
 
  "build": "webpack --mode production ./src/index.js --output ./dist/main.js --watch"
 
}

–entry 標誌與–output 標誌差不多，但會重寫入口路徑。

轉換.js 代碼

現代 JS 代碼主要是用 ES6 編寫的，但並非所有瀏覽器都支持 ES6。因此，你需要對代碼進行轉換——將 ES6 代碼轉換爲 ES5。你可以使用 babel——現在最流行的工具。當然，我們不僅可以轉換 ES6 代碼，也可以轉換其他 JS 實現，如 TypeScript、React，等等。

npm install babel-core babel-loader babel-preset-env --save-dev

或者：

yarn add babel-core babel-loader babel-preset-env --dev

爲 babel 創建配置文件.babelrc，並在文件中粘貼以下內容。

{
"presets": [
  "env"
  ]
}

我們有兩個配置 babel-loader 的方式：
使用配置文件 Webpack.config.js
在 npm 腳本中使用–module-bind

從技術上說，你可以通過 Webpack 引入的新標誌做很多事情，但爲簡單起見，我選擇了 webpack.config.js。

配置文件

雖然 Webpack 宣稱自己是零配置的，但這種零配置主要還是適用於默認設置，比如入口和輸出。

我們將創建包含以下內容的 webpack.config.js：

// webpack v4
const path = require('path');
// update from 23.12.2018
const nodeExternals = require('webpack-node-externals');
module.exports = {
  entry: { main: './src/index.js' },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js'
  },
  target: 'node', // update from 23.12.2018
  externals: [nodeExternals()], // update from 23.12.2018
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }
};

從 npm 腳本中移除標誌。

"scripts": {
  "build": "webpack --mode production",
  "dev": "webpack --mode development"
},

現在，當我們運行 npm run build 或 yarn build 時，它應該會在./dist/main.js 中生成一個最小化的.js 文件。如果沒有，請嘗試重新安裝 babel-loader。

如果遇到模塊“@babel/core”衝突，說明某些預加載的 babel 依賴項不兼容。我遇到的錯誤是：
Module build failed: Error: Cannot find module ‘@babel/core’
babel-loader@8 requires Babel 7.x (the package ‘@babel/core’). If you’d like to use Babel 6.x (‘babel-core’), you should install ‘babel-loader@7’.
我是這樣解決的：

yarn add @babel/core --dev

HTML 和 CSS 導入

我們先在./dist 文件夾中創建 index.html 文件。
Hello, world!
我們在這裏導入了 style.css，現在讓我們來配置它！正如我們所說，我們只有一個 Webpack 入口點。那麼應該將 css 文件放在哪裏？在./src 文件夾中創建 style.css 文件。

div {
  color: red;
}

不要忘了將它包含在.js 文件中：

import "./style.css";
console.log("hello, world");

在 Webpack 中爲 css 文件創建一個新規則：

// webpack v4
const path = require('path');
// update from 23.12.2018
const nodeExternals = require('webpack-node-externals');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
  entry: { main: './src/index.js' },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js'
  },
  target: 'node', // update from 23.12.2018
  externals: [nodeExternals()], // update from 23.12.2018  
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract(
          {
            fallback: 'style-loader',
            use: ['css-loader']
          })
      }
    ]
  }
};

在終端中運行：

npm install extract-text-webpack-plugin --save-dev
npm install style-loader css-loader --save-dev

或者：

yarn add extract-text-webpack-plugin style-loader css-loader --dev

我們需要使用 extract-text-webpack-plugin 來編譯我們的.css。但是在 Webpack 4 中使用這個插件有點問題，可能會遇到這個錯誤。

要修復這個問題，需要運行：

npm install -D extract-text-webpack-plugin@next

或者：

yarn add --dev extract-text-webpack-plugin@next

然後你的 css 代碼應該被編譯爲./dist/style.css。

到了這個時候，我的 package.json 的 dev 依賴項看起來像這樣：

"devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.6.1",
    "css-loader": "^0.28.11",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "style-loader": "^0.20.3",
    "webpack": "^4.4.1",
    "webpack-cli": "^2.0.12"
  }

請注意，另一種組合可能無法正常運行，因爲即使是將 webpack-cli 2.0.12 更新爲 2.0.13 也可能會帶來問題。

現在它應該將 style.css 輸出到./dist 文件夾中了。

Mini-CSS 插件

Mini-CSS 插件旨在取代 extract-text 插件，併爲你提供更好的兼容性。我重新修改了我的 Webpack 文件，使用mini-css-extract-plugin來編譯 style.css。

npm install mini-css-extract-plugin --save-dev

或者：

yarn add mini-css-extract-plugin --dev

以及：

// webpack v4
const path = require('path');
// update from 23.12.2018
const nodeExternals = require('webpack-node-externals');
// const ExtractTextPlugin = require('extract-text-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
  entry: { main: './src/index.js' },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[chunkhash].js'
  },
  target: 'node', // update from 23.12.2018
  externals: [nodeExternals()], // update from 23.12.2018
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.css$/,
        use:  [  'style-loader', MiniCssExtractPlugin.loader, 'css-loader']
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'style.css',
    })
  ]
};

我們需要使用 MiniCssExtractPlugin，因爲默認情況下 Webpack 只能識別.js 格式。MiniCssExtractPlugin 將.css 內容提取到./dist 目錄下不同的.css 文件中。

配置對 SCSS 的支持

使用 SASS 和 POSTCSS 開發網站已經非常普遍，因此，我們將首先包括對 SASS 的支持。讓我們重命名./src/style.css 文件，並創建另一個文件夾來存放.scss 文件。現在我們需要添加對.scss 格式的支持。

npm install node-sass sass-loader --save-dev

或者：

yarn add node-sass sass-loader --dev

使用./scss/main.scss 替換 style.css，並修改 test 配置，以便支持.scss：

// webpack v4
const path = require('path');
// update 23.12.2018
const nodeExternals = require('webpack-node-externals');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
  entry: { main: './src/index.js' },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js'
  },
  target: "node", // update 23.12.2018
  externals: [nodeExternals()], // update 23.12.2018
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.scss$/,
        use: [
          "style-loader",
          MiniCssExtractPlugin.loader,
          "css-loader",
          "sass-loader"
        ]
      }
    ]
  } ...

HTML 模板

現在讓我們來創建.html 文件模板。將以下內容添加到./src 目錄的 index.html 文件中。

<html>
  <head>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div>Hello, world!</div>
    <script src="main.js"></script>
  </body>
</html>

我們需要藉助 html 插件才能將這個文件作爲模板使用。

npm install html-webpack-plugin --save-dev

或者：

yarn add html-webpack-plugin --dev

將其添加到你的 Webpack 文件中：

// webpack v4
const path = require('path');
// update 23.12.2018
const nodeExternals = require('webpack-node-externals');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: { main: './src/index.js' },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js'
  },
  target: "node", // update 23.12.2018
  externals: [nodeExternals()], // update 23.12.2018
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.scss$/,
        use: [
          "style-loader",
          MiniCssExtractPlugin.loader,
          "css-loader",
          "sass-loader"
        ]
      }
    ]
  },
  plugins: [ 
    new MiniCssExtractPlugin({
      filename: "style.css"
    }),
    new HtmlWebpackPlugin({
      inject: false,
      hash: true,
      template: './src/index.html',
      filename: 'index.html'
    })
  ]
};

現在./src/index.html 文件就變成了一個模板。現在刪除./dist 文件夾其其中的所有文件，然後重新構建，看看是不是一切正常。

rm -rf ./dist
npm run dev

或者：

rm -rf ./dist
yarn dev

你會看到./dist 文件夾重新生成，其中包含了三個文件：index.html、style.css 和 main.js.

緩存和哈希

開發中最常見的問題之一是如何實現緩存。因爲這篇文章主要是關於如何配置 Webpack，所以不會專注於介紹緩存的實現細節。我只想說，解決緩存問題最常用的方法之一是在文件中（例如 style.css 和 script.js）添加一個哈希值。你可以參考這篇文章。

使用哈希以後，瀏覽器只會請求發生變更的文件。

Webpack 4 基於 chunkhash 實現了的內置的哈希功能。修改 Webpack 文件：

// webpack v4
const path = require('path');
// update 23.12.2018
const nodeExternals = require("webpack-node-externals");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: { main: './src/index.js' },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[chunkhash].js'
  },
  target: "node",
  externals: [nodeExternals()],
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.scss$/,
        use: [
            "style-loader",
            MiniCssExtractPlugin.loader,
            "css-loader",
            "sass-loader"
          ]
       }
    ]
  },
  plugins: [ 
    new MiniCssExtractPlugin({
     filename: "style.[contenthash].css"
    }),
    new HtmlWebpackPlugin({
      inject: false,
      hash: true,
      template: './src/index.html',
      filename: 'index.html'
    })
  ]
};

在./src/index.html 文件中添加：

<html>
  <head>
    <link rel="stylesheet" href="<%=htmlWebpackPlugin.files.chunks.main.css %>">
  </head>
  <body>
    <div>Hello, world!</div>
    <script src="<%= htmlWebpackPlugin.files.chunks.main.entry %>"></script>
  </body>
</html>

我們將使用 htmlWebpackPlugin.files.chunks.main 模式生成哈希。看一下./dist 目錄下的 index.html 文件：

如果我們在不修改.js 和.css 文件的情況下運行 npm run dev，不管運行多少次，兩個文件中的哈希值都應該是一樣的。

CSS 的哈希問題以及如何解決

如果你在 Webpack 4 中使用了 ExtractTextPlugin，可能會存在這個問題。如果你使用的是 MiniCssExtractPlugin，這個問題應該就不會發生。

我們的解決方案還不夠完美。如果我們修改了.scss 文件中的某些代碼會怎樣？你會發現，現在不生成新的哈希了。如果我們在.js 文件中增加一行 console.log，比如：

import "./style.css";
console.log("hello, world");
console.log("Hello, world 2");

再次運行 dev 腳本，你將看到兩個文件中的哈希值已更新。

這個問題是已知的，Stack Overflow 上已經討論過這個問題。

那麼應該怎麼解決這個問題？

在嘗試了很多聲稱可以解決這個問題的插件後，我終於找到了兩個可行的解決方案。

解決方案 1

可能還存在一些衝突，可以試試 mini-css-extract 插件。

解決方案 2

在 CSS Extract 插件中使用 [hash] 替換 [chukhash]，但這似乎會與 Webpack 4.3 提供的 [contenthash] 變量產生衝突，所以可以結合使用這個插件：webpack-md5-hash。

現在再測試就會發現兩個文件的哈希都會更新。

JS 的哈希問題以及如何解決？

如果你使用了 MiniCssExtractPlugin，可能會遇到另一個問題：每次修改 SCSS 中的某些內容時，.js 文件和.css 輸出文件的哈希都會被更新。

解決方案：

使用 webpack-md5-hash 插件。如果你修改了 main.scss 文件並運行 dev 腳本，應該只有新的 style.css 文件裏會包含新的哈希，而不是兩個文件都會這樣。

// webpack v4
const path = require('path');
// update 23.12.2018
const nodeExternals = require("webpack-node-externals");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const WebpackMd5Hash = require("webpack-md5-hash");
module.exports = {
  entry: { main: './src/index.js' },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[chunkhash].js'
  },
  target: "node", // update 23.12.2018
  externals: [nodeExternals()], // update 23.12.2018
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract(
          {
            fallback: 'style-loader',
            use: ['css-loader', 'sass-loader']
          })
      }
    ]
  },
  plugins: [ 
    new MiniCssExtractPlugin({
      filename: "style.[contenthash].css"
    }),
    new HtmlWebpackPlugin({
      inject: false,
      hash: true,
      template: "./src/index.html",
      filename: "index.html"
    }),
    new WebpackMd5Hash()
  ]
};

集成 PostCSS

爲了讓輸出的.css 更進一步，我們可以加入PostCSS。

PostCSS 提供了 autoprefixer、cssnano 和其他好用的東西。我每天都在用它。我們需要安裝 postcss-loader，還有 autoprefixer，因爲稍後會用到它。

npm install postcss-loader --save-dev
npm i -D autoprefixer

或者：

yarn add postcss-loader autoprefixer --dev

創建 postcss.config.js，並粘貼以下內容：

module.exports = {
    plugins: [
      require('autoprefixer')
    ]
}

我們的 Webpack.config.js 現在應該是這樣的：

// webpack v4
const path = require('path');
// update 23.12.2018
const nodeExternals = require("webpack-node-externals");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const WebpackMd5Hash = require("webpack-md5-hash");
module.exports = {
  entry: { main: './src/index.js' },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[chunkhash].js'
  },
  target: "node",
  externals: [nodeExternals()],
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.scss$/,
        use:  [  'style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader']
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'style.[contenthash].css',
    }),
    new HtmlWebpackPlugin({
      inject: false,
      hash: true,
      template: './src/index.html',
      filename: 'index.html'
    }),
    new WebpackMd5Hash()
  ]
};

請注意插件的順序：

use: ['style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader']

加載器按照從尾到頭的順序使用插件。

你可以向.scss 文件中添加更多內容並檢查輸出，以此來測試autoprefixer。

你也可以在.browserslistrc 文件中指定要支持的瀏覽器來調整輸出的內容。

你可以在這個網站上了解更多 PostCSS 可用的插件，例如：

utilities
cssnano
style-lint

我使用 cssnano 來最小化輸出文件，並用css-mqpacker來處理媒體查詢。

也有人說可以試試 cleancss。

保持整潔

在重新生成文件之前，我們可以嘗試使用 clean-Webpack-plugin 來清理./dist 文件夾。

// webpack v4
const path = require('path');
// update 23.12.2018
const nodeExternals = require("webpack-node-externals");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const WebpackMd5Hash = require("webpack-md5-hash");
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
  entry: { main: './src/index.js' },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[chunkhash].js'
  },
  target: "node",
  externals: [nodeExternals()],
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.scss$/,
        use:  [  'style-loader', 
                 MiniCssExtractPlugin.loader, 
                 'css-loader', 
                 'postcss-loader', 
                 'sass-loader']
      }
    ]
  },
  plugins: [ 
    new CleanWebpackPlugin('dist', {} ),
    new MiniCssExtractPlugin({
      filename: 'style.[contenthash].css',
    }),
    new HtmlWebpackPlugin({
      inject: false,
      hash: true,
      template: './src/index.html',
      filename: 'index.html'
    }),
    new WebpackMd5Hash()
  ]
};

帶有最新版本插件的 package.json 看起來是這樣的：

{
 “name”: “webpack-test”,
 “version”: “1.0.0”,
 “description”: “”,
 “main”: “index.js”,
 “scripts”: {
 “build”: “webpack --mode production”,
 “dev”: “webpack --mode development”
 },
 “author”: “”,
 “license”: “ISC”,
 "devDependencies": {
   "@babel/core": "^7.2.2",
   "autoprefixer": "^9.4.3",
   "babel-core": "^6.26.3",
   "babel-loader": "^8.0.4",
   "babel-preset-env": "^1.7.0",
   "css-loader": "^2.0.2",
   "html-webpack-plugin": "^3.2.0",
   "mini-css-extract-plugin": "^0.5.0",
   "node-sass": "^4.11.0",
   "postcss-loader": "^3.0.0",
   "sass-loader": "^7.1.0",
   "style-loader": "^0.23.1",
   "webpack": "4.28",
   "webpack-cli": "^3.1.2"
},
 "dependencies": {
   "clean-webpack-plugin": "^1.0.0",
   "webpack-md5-hash": "^0.0.6",
   "webpack-node-externals": "^1.7.2"
 }
}

英文原文：

https://hackernoon.com/a-tale-of-webpack-4-and-how-to-finally-configure-it-in-the-right-way-4e94c8e7e5c1

你配置 Webpack 4 的方式可能是錯的！

核心概念

入口

輸出

加載器

插件

快速入門

Webpack 4 的模式

轉換.js 代碼

配置文件

HTML 和 CSS 導入

Mini-CSS 插件

配置對 SCSS 的支持

HTML 模板

緩存和哈希

CSS 的哈希問題以及如何解決

解決方案 1

解決方案 2

JS 的哈希問題以及如何解決？

解決方案：

集成 PostCSS

加載器按照從尾到頭的順序使用插件。

保持整潔

杭州的 IT 崩盤了麼？

開源高性能結構化日誌模塊NanoLog

Python 潮流週刊#55：分享 9 個高質量的技術類信息源！

Azure Virtual Network (22) 多訂閱使用Azure DNS解析問題 Windows Azure Platform 系列文章目錄

【簡寫Mybatis-02】註冊機的實現以及SqlSession處理

手繪二維碼

.NET藉助虛擬網卡實現一個簡單異地組網工具

Git常見問題解決方法總結

您必須瞭解這JavaScript函數

在單擊按鈕上創建波紋效果

JS工具方法大全

前端開發必備的15個JavaScript數組方法

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結