摘要：版本目前最新的版本是，而我也是在此基礎上進行學習和開發的。能夠對圖片進行一些處理。目前我還沒有達到那種程度，所以一步一步來。簡化了文件的創建，以便為您的包提供服務。的對象的配置對象。的作用是來匹配相應的文件。

好吧，作為第一個系列第一篇的內容估計沒多少人會看，所以大概會寫的比較爛，還請看的人見諒。至于關于WMOS是什么，在這篇文章里不是十分重要，就先賣個關子，以后（大概吧）會慢慢跟大家說。這里就先當做一個要做的項目就好了。回到正題。

現在的前端開發不同以前，不是寫寫html，css，js就OK的。隨著項目的復雜就會考慮一些工程化的東西，因為如果有很多東西都需要我們自己去做會費很多時間。webpack就是一個類似gulp或者grunt的工具，不過它的核心可不只是自動化這么簡單。

目前webpack最新的版本是v3.4.1，而我也是在此基礎上進行學習和開發的。

由于我之前也用過webpack并且也深入去學習了原理的東西，不過那個時候的我太年輕所以只是理解然而讓我說出個一二三四，大概我會想個好幾天（其實就是當時學的不扎實，嗚嗚）。所以這次做WMOS的目的其實就是在實現的過程中來深刻理解一些之前學過或者學習沒接觸的東西。這也就是探索式學習。

我在使用webpack之前，首先看了一下當前的版本，這是一定要注意的事。因為有些api在不同的版本可能有所差異，在之后的使用的時候很有可能成為坑點。

而在看完文檔的概念和指南之后，雖然對如何使用有了大致的了解，可是實際使用的話總感覺自己沒看一樣，emmmmmm。

不過看過文檔起碼在看別人的webpack配置文件的時候就可以稍微讀懂了。

看過很多遍文檔（中文）后，發現自己依然沒有頭緒（撓頭）。突然就想到我到底用webpack做什么？用webpack做什么？做什么？這是很重要的一件事，說三遍。

于是我重新開始，想想我目前到底想要什么功能？

WMOS打算使用原生的js寫，并且使用ES2015。

使用less預編譯器。

能夠對圖片進行一些處理。

能夠熱更新

。。。。

貌似目前就只有這些需求，雖然我知道這一定不是全部。但是我認為項目是一點一點搭起來的。目前我還沒有達到那種程度，所以一步一步來。

說了這么久，是為什么？因為我今天在搭建webpack環境的時候，卡在HtmlWebpackPlugin，好痛苦~~(>_<)~~。

官網在它的指南里是這么引出的：

在更改了入口文件的時候，會生成新的文件，而我們的index.html文件還是引用舊的問卷。這個時候就要用HtmlWebpackPlugin。

HtmlWebpackPlugin簡化了HTML文件的創建，以便為您的webpack包提供服務。這對于在文件名中包含每次會隨著變異會發生變化的哈希的webpack bundle尤其有用。 您可以讓插件為您生成一個HTML文件，使用lodash模板提供您自己的模板，或使用您自己的loader。·

以上都是官網給出的內容。其實目前我使用之后的感覺就是：可以為我們生產html文件，并且直接把那些生產的bundle文件直接寫入html中。這個在想要實現熱更新的時候是很有用的。最后在通過下面的例子在理解一下HtmlWebpackPlugin。

最初的時候目錄是這樣的：

你會發現在dist文件夾下什么都沒有，dist文件夾是我們生產文件的地方，src文件夾是我們的源文件夾。然后看一下我們的webpack配置文件：

使用過webpack的同學知道，在運行webpack之后應該生產在dist文件夾里生成main.js，而這個js文件需要我們手動放入html文件中。不過這里通過HtmlWebpackPlugin我們就不用手動操作了。讓我們執行一下：

原來的index.html:

現在的index.html:

下面來詳細講一下HtmlWebpackPlugin插件。

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

該插件會為您生成一個HTLM5文件，其中會包括使用script標簽引用的js輸出文件。最進本的用法就是將插件直接添加到webpack配置中，如下：

var HtmlWebpackPlugin = require("html-webpack-plugin");

var webpackConfig = {
  entry: "index.js",
  output: {
    path: "dist",
    filename: "index_bundle.js"
  },
  plugins: [new HtmlWebpackPlugin()]
};

這將會產生一個包含以下內容的文件 dist/index.html：

如果有多個webpack入口，就會生成多個script標簽引用這些文件。

如果你有任何CSS assets 在webpack的輸出中（例如，利用ExtractTextPlugin提取CSS），那么這些將被包含在HTML head中的標簽內。

下面是HtmlWebpackPlugin插件的一些配置選項：

title: 生成的html文檔的title標簽之間的內容。

filename: 生成html文件的名字，默認為index.html。你可以使用子目錄的形式，像asset/admin.html是OK的。

template: webpack會require這個路徑的文件作為模板。（我就卡這里了，稍后會詳細講一下）

inject: 它有四個值，分別為true、head、"body"、"false"，功能是在將所有的資源輸出到template或者templateContent指定的文件里的時候，當inject的值為true或者body的時候，所有JavaScript資源將放置在body元素的下面；當值為head的時候，將放置在head元素內。

favicon: 將給定的favicon路徑下的文件輸出到html文件里。

minify: 通過使用一個以html-minifier的配置選項作為內容的對象的時候會壓縮輸出html文件。使用false你懂得。

hash: 值為true | false。如果為true的時候添加一個唯一的webpack編寫的hash值到所有的script文件和css文件。對于緩存清除很有用。

cache: true | false。如果為true（默認）則只有當文件內容改變的時候，會生成一個新的文件。

showErrors: true" | false。如果為true`（默認），則錯誤信息寫入html頁面。

chunks: Allows you to add only some chunks (e.g. only the unit-test chunk)

chunksSortMode: Allows to control how chunks should be sorted before they are included to the html. Allowed values: "none" | "auto" | "dependency" |"manual" | {function} - default: "auto"

excludeChunks: Allows you to skip some chunks (e.g. don"t add the unit-test chunk)

xhtml: true | false If true render the link tags as self-closing, XHTML compliant. Default is false

如果要生成多個html問卷，只要多聲明幾次就OK了。

{
  entry: "index.js",
  output: {
    path: __dirname + "/dist",
    filename: "index_bundle.js"
  },
  plugins: [
    new HtmlWebpackPlugin(), // Generates default index.html
    new HtmlWebpackPlugin({  // Also generate a test.html
      filename: "test.html",
      template: "src/assets/test.html"
    })
  ]
}

如果它默認生成的模板不能滿足我們，我們可以自己去編寫自己的模板。我們可以通過template屬性傳遞我們自己的html文件。html-webpack-plugin將會自動將所有必要的css，js，manifest和favicon文件注入里面。

模板默認使用ejs模板。如下方式：

plugins: [
  new HtmlWebpackPlugin({
    title: "Custom template",
    template: "my-index.ejs", // Load a custom template (ejs by default see the FAQ for details)
  })
]

如果你打算使用其他的模板，就需要使用對應的loader進行解析。如下使用了hbs模板：

module: {
  loaders: [
    { test: /.hbs$/, loader: "handlebars" }
  ]
},
plugins: [
  new HtmlWebpackPlugin({
    title: "Custom template using Handlebars",
    template: "my-index.hbs"
  })
]

注意一點就是如果你使用了.html文件作為模板，那么就會使用html-loader去解析，所以不要忘記使用html-loader。（我就卡到這里，不過原因并不是這樣。）

在模板中可以使用一下變量：

htmlWebpackPlugin: 這個插件的對象（我理解）

htmlWebpackPlugin.files: webpack的stats對象的assetsByChunkName
表示。它包含輸入的文件名到bundle文件名，例如：

"htmlWebpackPlugin": {
  "files": {
    "css": [ "main.css" ],
    "js": [ "assets/head_bundle.js", "assets/main_bundle.js"],
    "chunks": {
      "head": {
        "entry": "assets/head_bundle.js",
        "css": [ "main.css" ]
      },
      "main": {
        "entry": "assets/main_bundle.js",
        "css": []
      },
    }
  }
}

htmlWebpackPlugin.options: 轉遞給插件的options選項，除了插件使用的
選項以外，你可以通過這個hash列表傳遞任何數據給模板。也就是說你在設置插件選項

的時候，可以添加一些自己的數據。然后可以在模板中通過插件的options來使用。

webpack: webpack的stats對象

webpackConfigwebpack的配置對象。

我使用了html文件作為模板，它需要使用html-loader進行解析，html-loader支持es6模板的寫法，也就是${}這樣。在寫loader的時候，我是這樣寫的：

module: {
    rules: [
      {
        test: /.html$/,
        loader:"html-loader"
      }
    ]
},

我們模板是醬紫：

    
    
    
    


    
WMOS
    

但是這樣寫之后，它并沒有把title解析掉：

    
    
    
    


    
WMOS
    

而將test那部分改為`test: "/.html$/"的時候，就完美的解析了。

What?我也很懵逼。test的作用是來匹配相應的文件。而test的值可以是字符串，正則，函數等等。看過文檔之后，我也并沒有發現使用它們會有什么不同的結果。

今天就先寫到這里，目前我們遇到了一個奇葩不過不是重點的問題，所以我們先將它記下來，在之后會去一一解決這些問題。