摘要：版本目前最新的版本是，而我也是在此基礎(chǔ)上進(jìn)行學(xué)習(xí)和開發(fā)的。能夠?qū)D片進(jìn)行一些處理。目前我還沒有達(dá)到那種程度，所以一步一步來。簡化了文件的創(chuàng)建，以便為您的包提供服務(wù)。的對(duì)象的配置對(duì)象。的作用是來匹配相應(yīng)的文件。

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

現(xiàn)在的前端開發(fā)不同以前，不是寫寫html，css，js就OK的。隨著項(xiàng)目的復(fù)雜就會(huì)考慮一些工程化的東西，因?yàn)槿绻泻芏鄸|西都需要我們自己去做會(huì)費(fèi)很多時(shí)間。webpack就是一個(gè)類似gulp或者grunt的工具，不過它的核心可不只是自動(dòng)化這么簡單。

目前webpack最新的版本是v3.4.1，而我也是在此基礎(chǔ)上進(jìn)行學(xué)習(xí)和開發(fā)的。

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

我在使用webpack之前，首先看了一下當(dāng)前的版本，這是一定要注意的事。因?yàn)橛行゛pi在不同的版本可能有所差異，在之后的使用的時(shí)候很有可能成為坑點(diǎn)。

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

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

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

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

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

使用less預(yù)編譯器。

能夠?qū)D片進(jìn)行一些處理。

能夠熱更新

。。。。

貌似目前就只有這些需求，雖然我知道這一定不是全部。但是我認(rèn)為項(xiàng)目是一點(diǎn)一點(diǎn)搭起來的。目前我還沒有達(dá)到那種程度，所以一步一步來。

說了這么久，是為什么？因?yàn)槲医裉煸诖罱╳ebpack環(huán)境的時(shí)候，卡在HtmlWebpackPlugin，好痛苦~~(>_<)~~。

官網(wǎng)在它的指南里是這么引出的：

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

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

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

最初的時(shí)候目錄是這樣的：

你會(huì)發(fā)現(xiàn)在dist文件夾下什么都沒有，dist文件夾是我們生產(chǎn)文件的地方，src文件夾是我們的源文件夾。然后看一下我們的webpack配置文件：

使用過webpack的同學(xué)知道，在運(yùn)行webpack之后應(yīng)該生產(chǎn)在dist文件夾里生成main.js，而這個(gè)js文件需要我們手動(dòng)放入html文件中。不過這里通過HtmlWebpackPlugin我們就不用手動(dòng)操作了。讓我們執(zhí)行一下：

原來的index.html:

現(xiàn)在的index.html:

下面來詳細(xì)講一下HtmlWebpackPlugin插件。

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

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

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

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

這將會(huì)產(chǎn)生一個(gè)包含以下內(nèi)容的文件 dist/index.html：

如果有多個(gè)webpack入口，就會(huì)生成多個(gè)script標(biāo)簽引用這些文件。

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

下面是HtmlWebpackPlugin插件的一些配置選項(xiàng)：

title: 生成的html文檔的title標(biāo)簽之間的內(nèi)容。

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

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

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

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

minify: 通過使用一個(gè)以html-minifier的配置選項(xiàng)作為內(nèi)容的對(duì)象的時(shí)候會(huì)壓縮輸出html文件。使用false你懂得。

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

cache: true | false。如果為true（默認(rèn)）則只有當(dāng)文件內(nèi)容改變的時(shí)候，會(huì)生成一個(gè)新的文件。

showErrors: true" | false。如果為true`（默認(rèn)），則錯(cuò)誤信息寫入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

如果要生成多個(gè)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"
    })
  ]
}

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

模板默認(rèn)使用ejs模板。如下方式：

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

如果你打算使用其他的模板，就需要使用對(duì)應(yīng)的loader進(jìn)行解析。如下使用了hbs模板：

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

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

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

htmlWebpackPlugin: 這個(gè)插件的對(duì)象（我理解）

htmlWebpackPlugin.files: webpack的stats對(duì)象的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: 轉(zhuǎn)遞給插件的options選項(xiàng)，除了插件使用的
選項(xiàng)以外，你可以通過這個(gè)hash列表傳遞任何數(shù)據(jù)給模板。也就是說你在設(shè)置插件選項(xiàng)

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

webpack: webpack的stats對(duì)象

webpackConfigwebpack的配置對(duì)象。

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

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

我們模板是醬紫：

    
    
    
    


    
WMOS
    

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

    
    
    
    


    
WMOS
    

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

What?我也很懵逼。test的作用是來匹配相應(yīng)的文件。而test的值可以是字符串，正則，函數(shù)等等。看過文檔之后，我也并沒有發(fā)現(xiàn)使用它們會(huì)有什么不同的結(jié)果。

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