4W字長文帶你深度解鎖Webpack系列（基礎篇）

時間 2020-03-10

標籤 4w 字長深度解鎖 webpack 系列基礎简体版

原文原文鏈接

三篇長文，4W餘字，帶你解鎖 webpack ，但願讀完這三篇文章，你可以對 webpack 的各項配置有一個更爲清晰的認識。javascript

1.webpack 是什麼？

webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器，當 webpack 處理應用程序時，會遞歸構建一個依賴關係圖，其中包含應用程序須要的每一個模塊，而後將這些模塊打包成一個或多個 bundle。css

2.webpack 的核心概念

entry: 入口
output: 輸出
loader: 模塊轉換器，用於把模塊原內容按照需求轉換成新內容
插件(plugins): 擴展插件，在webpack構建流程中的特定時機注入擴展邏輯來改變構建結果或作你想要作的事情

3.初始化項目

新建一個文件夾，如: webpack-first (固然，你可使用任意一個你喜歡的項目名)。推薦你們參考本文一步一步進行配置，不要老是在網上找什麼最佳配置，你掌握了webpack以後，根據本身的需求配置出來的，就是最佳配置。html

本篇文章對應的項目地址(編寫本文時使用): https://github.com/YvetteLau/... 前端

使用 npm init -y 進行初始化(也可使用 yarn)。java

要使用 webpack，那麼必然須要安裝 webpack、webpack-cli:node

npm install webpack webpack-cli -D

鑑於前端技術變動迅速，祭出本篇文章基於 webpack 的版本號:react

├── webpack@4.41.5 
└── webpack-cli@3.3.10

從 wepack V4.0.0 開始， webpack 是開箱即用的，在不引入任何配置文件的狀況下就可使用。webpack

新建 src/index.js 文件，咱們在文件中隨便寫點什麼:git

//index.js
class Animal {
    constructor(name) {
        this.name = name;
    }
    getName() {
        return this.name;
    }
}

const dog = new Animal('dog');

使用 npx webpack --mode=development 進行構建，默認是 production 模式，咱們爲了更清楚得查看打包後的代碼，使用 development 模式。github

能夠看到項目下多了個 dist 目錄，裏面有一個打包出來的文件 main.js。

webpack 有默認的配置，如默認的入口文件是 ./src，默認打包到dist/main.js。更多的默認配置能夠查看: node_modules/webpack/lib/WebpackOptionsDefaulter.js。

查看 dist/main.js 文件，能夠看到，src/index.js 並無被轉義爲低版本的代碼，這顯然不是咱們想要的。

{
    "./src/index.js":
        (function (module, exports) {

            eval("class Animal {\n    constructor(name) {\n        this.name = name;\n    }\n    getName() {\n        return this.name;\n    }\n}\n\nconst dog = new Animal('dog');\n\n//# sourceURL=webpack:///./src/index.js?");

        })
}

4.將JS轉義爲低版本

前面咱們說了 webpack 的四個核心概念，其中之一就是 loader，loader 用於對源代碼進行轉換，這正是咱們如今所須要的。

將JS代碼向低版本轉換，咱們須要使用 babel-loader。

babel-loader

首先安裝一下 babel-loader

npm install babel-loader -D

此外，咱們還須要配置 babel，爲此咱們安裝一下如下依賴:

npm install @babel/core @babel/preset-env @babel/plugin-transform-runtime -D

npm install @babel/runtime @babel/runtime-corejs3

對babel7配置不熟悉的小夥伴，能夠閱讀一下這篇文章: 不可錯過的 Babel7 知識

新建 webpack.config.js，以下:

//webpack.config.js
module.exports = {
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                use: ['babel-loader'],
                exclude: /node_modules/ //排除 node_modules 目錄
            }
        ]
    }
}

建議給 loader 指定 include 或是 exclude，指定其中一個便可，由於 node_modules 目錄一般不須要咱們去編譯，排除後，有效提高編譯效率。

這裏，咱們能夠在 .babelrc 中編寫 babel 的配置，也能夠在 webpack.config.js 中進行配置。

建立一個 .babelrc

配置以下：

{
    "presets": ["@babel/preset-env"],
    "plugins": [
        [
            "@babel/plugin-transform-runtime",
            {
                "corejs": 3
            }
        ]
    ]
}

如今，咱們從新執行 npx webpack --mode=development，查看 dist/main.js，會發現已經被編譯成了低版本的JS代碼。

在webpack中配置 babel

//webpack.config.js
module.exports = {
    // mode: 'development',
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ["@babel/preset-env"],
                        plugins: [
                            [
                                "@babel/plugin-transform-runtime",
                                {
                                    "corejs": 3
                                }
                            ]
                        ]
                    }
                },
                exclude: /node_modules/
            }
        ]
    }
}

這裏有幾點須要說明：

loader 須要配置在 module.rules 中，rules 是一個數組。
loader 的格式爲:

{
    test: /\.jsx?$/,//匹配規則
    use: 'babel-loader'
}

或者也能夠像下面這樣:

//適用於只有一個 loader 的狀況
{
    test: /\.jsx?$/,
    loader: 'babel-loader',
    options: {
        //...
    }
}

test 字段是匹配規則，針對符合規則的文件進行處理。

use 字段有幾種寫法

能夠是一個字符串，例如上面的 use: 'babel-loader'
use 字段能夠是一個數組，例如處理CSS文件是，use: ['style-loader', 'css-loader']
use 數組的每一項既能夠是字符串也能夠是一個對象，當咱們須要在webpack 的配置文件中對 loader 進行配置，就須要將其編寫爲一個對象，而且在此對象的 options 字段中進行配置，如：

rules: [
    {
        test: /\.jsx?$/,
        use: {
            loader: 'babel-loader',
            options: {
                presets: ["@babel/preset-env"]
            }
        },
        exclude: /node_modules/
    }
]

上面咱們說了如何將JS的代碼編譯成向下兼容的代碼，固然你能夠還須要一些其它的 babel 的插件和預設，例如 @babel/preset-react，@babel/plugin-proposal-optional-chaining 等，不過，babel 的配置並不是本文的重點，咱們繼續往下。

不要說細心的小夥伴了，即便是粗心的小夥伴確定也發現了，咱們在使用 webpack 進行打包的時候，一直運行的都是 npx webpack --mode=development 是否能夠將 mode 配置在 webpack.config.js 中呢？顯然是能夠的。

5.mode

將 mode 增長到 webpack.config.js 中:

module.exports = {
    //....
    mode: "development",
    module: {
        //...
    }
}

mode 配置項，告知 webpack 使用相應模式的內置優化。

mode 配置項，支持如下兩個配置:

development：將 process.env.NODE_ENV 的值設置爲 development，啓用 NamedChunksPlugin 和 NamedModulesPlugin
production：將 process.env.NODE_ENV 的值設置爲 production，啓用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 UglifyJsPlugin

如今，咱們之間使用 npx webpack 進行編譯便可。

6.在瀏覽器中查看頁面

搞了這麼久，還不能在瀏覽器中查看頁面，這顯然不能忍！

查看頁面，不免就須要 html 文件，有小夥伴可能知道，有時咱們會指定打包文件中帶有 hash，那麼每次生成的 js 文件名會有所不一樣，總不能讓咱們每次都人工去修改 html，這樣不是顯得咱們很蠢嘛~

咱們可使用 html-webpack-plugin 插件來幫助咱們完成這些事情。

首先，安裝一下插件:

npm install html-webpack-plugin -D

新建 public 目錄，並在其中新建一個 index.html 文件( 文件內容使用 html:5 快捷生成便可)

修改 webpack.config.js 文件。

//首先引入插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    //...
    plugins: [
        //數組 放着全部的webpack插件
        new HtmlWebpackPlugin({
            template: './public/index.html',
            filename: 'index.html', //打包後的文件名
            minify: {
                removeAttributeQuotes: false, //是否刪除屬性的雙引號
                collapseWhitespace: false, //是否摺疊空白
            },
            // hash: true //是否加上hash，默認是 false
        })
    ]
}

此時執行 npx webpack，能夠看到 dist 目錄下新增了 index.html 文件，而且其中自動插入了 <script> 腳本，引入的是咱們打包以後的 js 文件。

這裏要多說一點點東西，HtmlWebpackPlugin 還爲咱們提供了一個 config 的配置，這個配置能夠說是很是有用了。

html-webpack-plugin 的 config 的妙用

有時候，咱們的腳手架不只僅給本身使用，也許還提供給其它業務使用，html 文件的可配置性可能很重要，好比：你公司有專門的部門提供M頁的公共頭部/公共尾部，埋點jssdk以及分享的jssdk等等，可是不是每一個業務都須要這些內容。

一個功能可能對應多個 js 或者是 css 文件，若是每次都是業務自行修改 public/index.html 文件，也挺麻煩的。首先他們得搞清楚每一個功能須要引入的文件，而後才能對 index.html 進行修改。

此時咱們能夠增長一個配置文件，業務經過設置 true 或 false 來選出本身須要的功能，咱們再根據配置文件的內容，爲每一個業務生成相應的 html 文件，豈不是美美的。

Let's Go!

首先，咱們在 public 目錄下新增一個 config.js ( 文件名你喜歡叫什麼就叫什麼 )，將其內容設置爲:

//public/config.js 除了如下的配置以外，這裏面還能夠有許多其餘配置，例如,pulicPath 的路徑等等
module.exports = {
    dev: {
        template: {
            title: '你好',
            header: false,
            footer: false
        }
    },
    build: {
        template: {
            title: '你好纔怪',
            header: true,
            footer: false
        }
    }
}

如今，咱們修改下咱們的 webpack.config.js:

//webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const isDev = process.env.NODE_ENV === 'development';
const config = require('./public/config')[isDev ? 'dev' : 'build'];

modue.exports = {
    //...
    mode: isDev ? 'development' : 'production'
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html',
            filename: 'index.html', //打包後的文件名
            config: config.template
        })
    ]
}

相應的，咱們須要修改下咱們的 public/index.html 文件(嵌入的js和css並不存在，僅做爲示意)：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <% if(htmlWebpackPlugin.options.config.header) { %>
    <link rel="stylesheet" type="text/css" href="//common/css/header.css">
    <% } %>
    <title><%= (htmlWebpackPlugin.options.config.title) %></title>
</head>

<body>
</body> 
<% if(htmlWebpackPlugin.options.config.header) { %>
<script src="//common/header.min.js" type="text/javascript"></script> 
<% } %>
</html>

process.env 中默認並無 NODE_ENV，這裏配置下咱們的 package.json 的 scripts.

爲了兼容Windows和Mac，咱們先安裝一下 cross-env:

npm install cross-env -D

{
    "scripts": {
        "dev": "cross-env NODE_ENV=development webpack",
        "build": "cross-env NODE_ENV=production webpack"
    }
}

而後咱們運行 npm run dev 和運行 npm run build ，對比下 dist/index.html ，能夠看到 npm run build，生成的 index.html 文件中引入了對應的 css 和 js。而且對應的 title 內容也不同。

你說這裏是否是非得是用 NODE_ENV 去判斷？固然不是咯，你寫 aaa=1 ，aaa=2 都行（固然啦，webpack.config.js 和 scripts 都須要進行相應修改），可是可能會被後面接手的人打死。

更多html-webpack-plugin配置項

如何在瀏覽器中實時展現效果

說了這麼多，到如今還沒能在瀏覽器中實時查看效果，是否是已經有點捉急了，先看一下如何實時查看效果吧，否則都不知道本身配得對不對。

話很少說，先裝依賴:

npm install webpack-dev-server -D

修改下我們的 package.json 文件的 scripts：

"scripts": {
    "dev": "NODE_ENV=development webpack-dev-server",
    "build": "NODE_ENV=production webpack"
},

在控制檯執行 npm run dev，啓動正常，頁面上啥也沒有，修改下咱們的JS代碼，往頁面中增長點內容，正常刷新(也就是說不須要進行任何配置就可使用了)。

Excuse me。怪我平時不認真咯，每次都乖乖的配個 contentBase，原來根本不須要配，帶着疑問，我又去搜尋了一番。

原來在配置了 html-webpack-plugin 的狀況下， contentBase 不會起任何做用，也就是說我之前都是白配了，這是一個悲傷的故事。

不過呢，咱們仍是能夠在 webpack.config.js 中進行 webpack-dev-server 的其它配置，例如指定端口號，設置瀏覽器控制檯消息，是否壓縮等等:

//webpack.config.js
module.exports = {
    //...
    devServer: {
        port: '3000', //默認是8080
        quiet: false, //默認不啓用
        inline: true, //默認開啓 inline 模式，若是設置爲false,開啓 iframe 模式
        stats: "errors-only", //終端僅打印 error
        overlay: "false", //默認不啓用
        clientLogLevel: "silent", //日誌等級
        compress: true //是否啓用 gzip 壓縮
    }
}

啓用 quiet 後，除了初始啓動信息以外的任何內容都不會被打印到控制檯。這也意味着來自 webpack 的錯誤或警告在控制檯不可見 ———— 我是不會開啓這個的，看不到錯誤日誌，還搞個錘子
stats: "errors-only" ，終端中僅打印出 error，注意當啓用了 quiet 或者是 noInfo 時，此屬性不起做用。 ————— 這個屬性我的以爲頗有用，尤爲是咱們啓用了 eslint 或者使用 TS進行開發的時候，太多的編譯信息在終端中，會干擾到咱們。
啓用 overlay 後，當編譯出錯時，會在瀏覽器窗口全屏輸出錯誤，默認是關閉的。

clientLogLevel: 當使用內聯模式時，在瀏覽器的控制檯將顯示消息，如：在從新加載以前，在一個錯誤以前，或者模塊熱替換啓用時。若是你不喜歡看這些信息，能夠將其設置爲 silent (none 即將被移除)。

本篇文章不是爲了細說 webpack-dev-server 的配置，因此這裏就很少說了。關於 webpack-dev-server 更多的配置能夠點擊查看。

細心的小夥伴可能發現了一個小問題，咱們在src/index.js中增長一句 console.log('aaa')：

class Animal {
    constructor(name) {
        this.name = name;
    }
    getName() {
        return this.name;
    }
}

const dog = new Animal('dog');
console.log('aaa');

而後經過 npm run dev 查看效果，會發現：

這顯然不是咱們源碼中對應的行號，點進去的話，會發現代碼是被編譯後的，我當前的代碼很是簡單，還能看出來，項目代碼複雜後，「親媽」看編譯後都費勁，這不利於咱們開發調試，不是咱們想要的，咱們確定仍是但願可以直接對應到源碼的。

7.devtool

devtool 中的一些設置，能夠幫助咱們將編譯後的代碼映射回原始源代碼。不一樣的值會明顯影響到構建和從新構建的速度。

對我而言，可以定位到源碼的行便可，所以，綜合構建速度，在開發模式下，我設置的 devtool 的值是 cheap-module-eval-source-map。

//webpack.config.js
module.exports = {
    devtool: 'cheap-module-eval-source-map' //開發環境下使用
}

生產環境可使用 none 或者是 source-map，使用 source-map 最終會單獨打包出一個 .map 文件，咱們能夠根據報錯信息和此 map 文件，進行錯誤解析，定位到源代碼。

source-map 和 hidden-source-map 都會打包生成單獨的 .map 文件，區別在於，source-map 會在打包出的js文件中增長一個引用註釋，以便開發工具知道在哪裏能夠找到它。hidden-source-map 則不會在打包的js中增長引用註釋。

可是咱們通常不會直接將 .map 文件部署到CDN，由於會直接映射到源碼，更但願將.map 文件傳到錯誤解析系統，而後根據上報的錯誤信息，直接解析到出錯的源碼位置。

不過報錯信息中只有行號，而沒有列號。若是有行列號，那麼能夠經過sourcemap 來解析出錯位置。只有行號，根本沒法解析，不知道你們的生產環境是如何作的？怎麼上報錯誤信息至錯誤解析系統進行解析。若有好的方案，請賜教。

還能夠設置其餘的devtool值，你可使用不一樣的值，構建對比差別。

如今咱們已經說了 html、js 了，而且也能夠在瀏覽器中實時看到效果了，如今就不得不說頁面開發三巨頭之一的 css 。

8.如何處理樣式文件呢

webpack 不能直接處理 css，須要藉助 loader。若是是 .css，咱們須要的 loader 一般有： style-loader、css-loader，考慮到兼容性問題，還須要 postcss-loader，而若是是 less 或者是 sass 的話，還須要 less-loader 和 sass-loader，這裏配置一下 less 和 css 文件(sass 的話，使用 sass-loader便可):

先安裝一下須要使用的依賴:

npm install style-loader less-loader css-loader postcss-loader autoprefixer less -D

//webpack.config.js
module.exports = {
    //...
    module: {
        rules: [
            {
                test: /\.(le|c)ss$/,
                use: ['style-loader', 'css-loader', {
                    loader: 'postcss-loader',
                    options: {
                        plugins: function () {
                            return [
                                require('autoprefixer')({
                                    "overrideBrowserslist": [
                                        ">0.25%",
                                        "not dead"
                                    ]
                                })
                            ]
                        }
                    }
                }, 'less-loader'],
                exclude: /node_modules/
            }
        ]
    }
}

測試一下，新建一個 less 文件，src/index.less:

//src/index.less
@color: red;
body{
    background: @color;
    transition: all 2s;
}

再在入口文件中引入此 less:

//src/index.js
import './index.less';

咱們修改了配置文件，從新啓動一下服務: npm run dev。能夠看到頁面的背景色變成了紅色。

OK，咱們簡單說一下上面的配置：

style-loader 動態建立 style 標籤，將 css 插入到 head 中.
css-loader 負責處理 @import 等語句。
postcss-loader 和 autoprefixer，自動生成瀏覽器兼容性前綴 —— 2020了，應該沒人去本身徒手去寫瀏覽器前綴了吧
less-loader 負責處理編譯 .less 文件,將其轉爲 css

這裏，咱們之間在 webpack.config.js 寫了 autoprefixer 須要兼容的瀏覽器，僅是爲了方便展現。推薦你們在根目錄下建立 .browserslistrc，將對應的規則寫在此文件中，除了 autoprefixer 使用外，@babel/preset-env、stylelint、eslint-plugin-conmpat 等均可以共用。

注意：

loader 的執行順序是從右向左執行的，也就是後面的 loader 先執行，上面 loader 的執行順序爲: less-loader ---> postcss-loader ---> css-loader ---> style-loader

固然，loader 其實還有一個參數，能夠修改優先級，enforce 參數，其值能夠爲: pre(優先執行) 或 post (滯後執行)。

如今，咱們已經能夠處理 .less 文件啦，.css 文件只須要修改匹配規則，刪除 less-loader 便可。

如今的一切看起來都很完美，可是假設咱們的文件中使用了本地的圖片，例如:

body{
    backgroud: url('../images/thor.png');
}

你就會發現，報錯啦啦啦，那麼咱們要怎麼處理圖片或是本地的一些其它資源文件呢。不用想，確定又須要 loader 出馬了。

9.圖片/字體文件處理

咱們可使用 url-loader 或者 file-loader 來處理本地的資源文件。url-loader 和 file-loader 的功能相似，可是 url-loader 能夠指定在文件大小小於指定的限制時，返回 DataURL，所以，我的會優先選擇使用 url-loader。

首先安裝依賴:

npm install url-loader -D

安裝 url-loader 的時候，控制檯會提示你，還須要安裝下 file-loader，聽人家的話安裝下就行(新版 npm 不會自動安裝 peerDependencies)：

npm install file-loader -D

在 webpack.config.js 中進行配置：

//webpack.config.js
module.exports = {
    //...
    modules: {
        rules: [
            {
                test: /\.(png|jpg|gif|jpeg|webp|svg|eot|ttf|woff|woff2)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 10240, //10K
                            esModule: false 
                        }
                    }
                ],
                exclude: /node_modules/
            }
        ]
    }
}

此處設置 limit 的值大小爲 10240，即資源大小小於 10K 時，將資源轉換爲 base64，超過 10K，將圖片拷貝到 dist 目錄。esModule 設置爲 false，不然，<img src={require('XXX.jpg')} /> 會出現 <img src=[Module Object] />

將資源轉換爲 base64 能夠減小網絡請求次數，可是 base64 數據較大，若是太多的資源是 base64，會致使加載變慢，所以設置 limit 值時，須要兩者兼顧。

默認狀況下，生成的文件的文件名就是文件內容的 MD5 哈希值並會保留所引用資源的原始擴展名，例如我上面的圖片(thor.jpeg)對應的文件名以下：

固然，你也能夠經過 options 參數進行修改。

//....
use: [
    {
        loader: 'url-loader',
        options: {
            limit: 10240, //10K
            esModule: false,
            name: '[name]_[hash:6].[ext]'
        }
    }
]

從新編譯，在瀏覽器中審查元素，能夠看到圖片名變成了: thor_a5f7c0.jpeg。

當本地資源較多時，咱們有時會但願它們能打包在一個文件夾下，這也很簡單，咱們只須要在 url-loader 的 options 中指定 outpath，如: outputPath: 'assets'，構建出的目錄以下:

更多的 url-loader 配置能夠查看

到了這裏，有點歲月靜好的感受了。

不過還沒完，若是你在 public/index.html 文件中，使用本地的圖片，例如，咱們修改一下 public/index.html：

<img src="./a.jpg" />

重啓本地服務，雖然，控制檯不會報錯，可是你會發現，瀏覽器中根本加載不出這張圖片，Why？由於構建以後，經過相對路徑壓根找不着這張圖片呀。

How？怎麼解決呢？

10.處理 html 中的本地圖片

安裝 html-withimg-loader 來解決咯。

npm install html-withimg-loader -D

修改 webpack.config.js：

module.exports = {
    //...
    module: {
        rules: [
            {
                test: /.html$/,
                use: 'html-withimg-loader'
            }
        ]
    }
}

而後在咱們的 html 中引入一張文件測試一下（圖片地址本身寫咯，這裏只是示意）:

<!-- index.html -->
<img src="./thor.jpeg" />

重啓本地服務，圖片並沒能加載，審查元素的話，會發現圖片的地址顯示的是 {"default":"assets/thor_a5f7c0.jpeg"}。

我當前 file-loader 的版本是 5.0.2，5版本以後，須要增長 esModule 屬性：

//webpack.config.js
module.exports = {
    //...
    modules: {
        rules: [
            {
                test: /\.(png|jpg|gif|jpeg|webp|svg|eot|ttf|woff|woff2)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 10240, //10K
                            esModule: false
                        }
                    }
                ]
            }
        ]
    }
}

再重啓本地服務，就搞定啦。

話說使用 html-withimg-loader 處理圖片以後，html 中就不能使用 vm, ejs 的模板了，若是想繼續在 html 中使用 <% if(htmlWebpackPlugin.options.config.header) { %> 這樣的語法，可是呢，又但願能使用本地圖片，可不能夠？魚和熊掌都想要，雖然不少時候，能吃個魚就不錯了，可是這裏是能夠的哦，像下面這樣編寫圖片的地址就能夠啦。

<!-- index.html -->
<img src="<%= require('./thor.jpeg') %>" />

圖片加載OK啦，而且 <% %> 語法也能夠正常使用，吼吼吼~~~

雖然，webpack 的默認配置很好用，可是有的時候，咱們會有一些其它須要啦，例如，咱們不止一個入口文件，這時候，該怎麼辦呢？

11.入口配置

入口的字段爲: entry

//webpack.config.js
module.exports = {
    entry: './src/index.js' //webpack的默認配置
}

entry 的值能夠是一個字符串，一個數組或是一個對象。

字符串的狀況無需多說，就是以對應的文件爲入口。

爲數組時，表示有「多個主入口」，想要多個依賴文件一塊兒注入時，會這樣配置。例如:

entry: [
    './src/polyfills.js',
    './src/index.js'
]

polyfills.js 文件中可能只是簡單的引入了一些 polyfill，例如 babel-polyfill，whatwg-fetch 等，須要在最前面被引入（我在 webpack2 時這樣配置過）。

那何時是對象呢？不要捉急，後面將多頁配置的時候，會說到。

12.出口配置

配置 output 選項能夠控制 webpack 如何輸出編譯文件。

const path = require('path');
module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'), //必須是絕對路徑
        filename: 'bundle.js',
        publicPath: '/' //一般是CDN地址
    }
}

例如，你最終編譯出來的代碼部署在 CDN 上，資源的地址爲: 'https://AAA/BBB/YourProject/XXX'，那麼能夠將生產的 publicPath 配置爲: //AAA/BBB/。

編譯時，能夠不配置，或者配置爲 /。能夠在咱們以前說起的 config.js 中指定 publicPath（config.js 中區分了 dev 和 public），固然還能夠區分不一樣的環境指定配置文件來設置，或者是根據 isDev 字段來設置。

除此以外呢，考慮到CDN緩存的問題，咱們通常會給文件名加上 hash.

//webpack.config.js
module.exports = {
    output: {
        path: path.resolve(__dirname, 'dist'), //必須是絕對路徑
        filename: 'bundle.[hash].js',
        publicPath: '/' //一般是CDN地址
    }
}

若是你以爲 hash 串太長的話，還能夠指定長度，例如 bundle.[hash:6].js。使用 npm run build 打包看看吧。

問題出現啦，每次文件修改後，從新打包，致使 dist 目錄下的文件愈來愈多。要是每次打包前，都先清空一下目錄就好啦。可不能夠作到呢？必須能夠！

13.每次打包前清空dist目錄

反正我是懶得手動去清理的，只要你足夠懶，你老是會找到好辦法的，懶人推進科技進步。這裏，咱們須要插件: clean-webpack-plugin

安裝依賴:

npm install clean-webpack-plugin -D

之前，clean-webpack-plugin 是默認導出的，如今不是，因此引用的時候，須要注意一下。另外，如今構造函數接受的參數是一個對象，可缺省。

//webpack.config.js
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    //...
    plugins: [
        //不須要傳參數喔，它能夠找到 outputPath
        new CleanWebpackPlugin() 
    ]
}

如今你再修改文件，重現構建，生成的hash值和以前dist中的不同，可是由於每次 clean-webpack-plugin 都會幫咱們先清空一波 dist 目錄，因此不會出現太多文件，傻傻分不清楚究竟哪一個是新生成文件的狀況。

但願dist目錄下某個文件夾不被清空

不過呢，有些時候，咱們並不但願整個 dist 目錄都被清空，好比，咱們不但願，每次打包的時候，都刪除 dll 目錄，以及 dll 目錄下的文件或子目錄，該怎麼辦呢？

clean-webpack-plugin 爲咱們提供了參數 cleanOnceBeforeBuildPatterns。

//webpack.config.js
module.exports = {
    //...
    plugins: [
        new CleanWebpackPlugin({
            cleanOnceBeforeBuildPatterns:['**/*', '!dll', '!dll/**'] //不刪除dll目錄下的文件
        })
    ]
}

此外，clean-webpack-plugin 還有一些其它的配置，不過我使用的很少，你們能夠查看clean-webpack-plugin

至此，咱們算是完成了一個基礎配置。可是這不夠完美，或者說有些時候，咱們還會有一些其它的需求。下一篇關於webpack配置的文章會介紹一些其它的狀況。