摘要：它適用于普通的，而你無需關(guān)心要為哪些瀏覽器加前綴，只需全新關(guān)注于實(shí)現(xiàn)，并使用最新的規(guī)范。會調(diào)用所依賴的模塊對文件進(jìn)行編譯包括語法。

最近看到一篇文章《迷茫時學(xué)習(xí)Node.js最好的方法》
一直以來對node的個人心理傾向于做前端工具，而不是web服務(wù)。所以一直以來都沒好好學(xué)node。

為html文件中引入的外部資源如script、link動態(tài)添加每次compile后的hash，防止引用緩存的外部文件問題

可以生成創(chuàng)建html入口文件，比如單頁面可以生成一個html文件入口，配置N個html-webpack-plugin可以生成N個頁面入口

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");// 刪除目錄插件
const ManifestPlugin = require("webpack-manifest-plugin");// 輸出配置

module.exports = {
    entry: {
      app: "./src/index.js",
      vendor: ["lodash"]
    },
    // 雖然在 dist/ 文件夾我們已經(jīng)有 index.html 這個文件，然而 HtmlWebpackPlugin 還是會默認(rèn)生成 index.html 文件。
    // 這就是說，它會用新生成的 index.html 文件，把我們的原來的替換。
    plugins: [
      new ManifestPlugin({
          fileName: "my-manifest.json",
          basePath: "/app/",
          seed: {
            name: "My Manifest"
          }
      }),
      new CleanWebpackPlugin(["dist"]),  
      new HtmlWebpackPlugin({
        title: "output manger",
        filenameL: "index.html",
        template: "src/index.html"
      })
    ],
    output: {
      filename: "[name].bundle.js",
      path: path.resolve(__dirname, "dist")
    }
};

Autoprefixer是一個后處理程序，你可以同Sass，Stylus或LESS等預(yù)處理器共通使用。它適用于普通的CSS，而你無需關(guān)心要為哪些瀏覽器加前綴，只需全新關(guān)注于實(shí)現(xiàn)，并使用W3C最新的規(guī)范。

file-loader的主要功能是：把源文件遷移到指定的目錄（可以簡單理解為從源文件目錄遷移到build目錄），并返回新文件的路徑（簡單拼接而成）。

url-loader的主要功能是：將源文件轉(zhuǎn)換成DataUrl(聲明文件mimetype的base64編碼)。據(jù)我所知，在前端范疇里，圖片和字體文件的DataUrl都是可以被瀏覽器所識別的，因此可以把圖片和字體都轉(zhuǎn)化成DataUrl收納在HTML/CSS/JS文件里，以減少HTTP連接數(shù)。

圖片

 {
    // 圖片加載器，雷同file-loader，更適合圖片，可以將較小的圖片轉(zhuǎn)成base64，減少http請求
    // 如下配置，將小于8192byte的圖片轉(zhuǎn)成base64碼
    test: /.(png|jpg|gif)$/,
    loader: "url-loader?limit=8192&name=./static/img/[hash].[ext]",
 },

字體文件

 {
    // 專供iconfont方案使用的，后面會帶一串時間戳，需要特別匹配到
    test: /.(woff|woff2|svg|eot|ttf)??.*$/,
    loader: "file?name=./static/fonts/[name].[ext]",
 },

針對css文件，我們需要使用css-loader來加載.css-loader的功能比較強(qiáng)大，一些新穎的特性比如Local Scope或是CSS Modules都是支持的。

針對less文件，我們首先需要使用less-loader來加載。less-loader會調(diào)用所依賴的less模塊對less文件進(jìn)行編譯(包括@import語法)。至于說less-loader所接受的參數(shù)，實(shí)質(zhì)上大部分是傳遞給less模塊使用的參數(shù)，由于我本人應(yīng)用less的程度不深，因此沒有傳任何參數(shù)、直接就使用了。如果你之前對less模塊就已經(jīng)有了一套配置的話，請參考less-loader的文檔進(jìn)行配置。

另外，less-loader并不會針對url()語法做特別的轉(zhuǎn)換，因此，如果你想把url()語句里涉及到的文件（比如圖片、字體文件等）也一并用webpack打包的話，就必須利用管道交給css-loader做進(jìn)一步的處理。

const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  module: {
    rules: [
      {
        test: /.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("styles.css"),
  ]
}

它會將所有的入口 chunk(entry chunks)中引用的 *.css，移動到獨(dú)立分離的 CSS 文件。因此，你的樣式將不再內(nèi)嵌到 JS bundle 中，而是會放到一個多帶帶的 CSS 文件（即 styles.css）當(dāng)中。 如果你的樣式文件大小較大，這會做更快提前加載，因?yàn)?CSS bundle 會跟 JS bundle 并行加載。

http://array_huang.coding.me/webpack-book/chapter3/webpack-with-babel.html

1.babel-core

babel的核心

2.babel-preset-es2015-loose
|| babel-preset-es2015

盡可能符合ECMAScript6語義的normal模式和提供更簡單ES5代碼的loose模式

3.babel-loader

babel轉(zhuǎn)化loader

    {
      test: /.js$/,
      exclude: /node_modules|vendor|bootstrap/,
      loader: "babel-loader?presets[]=es2015-loose&cacheDirectory&plugins[]=transform-runtime",
    },

cacheDirectory cacheDirectory參數(shù)默認(rèn)為false，若你設(shè)置為一個文件目錄路徑（表示把cache存到哪），或是保留為空（表示操作系統(tǒng)默認(rèn)的緩存目錄），則相當(dāng)于開啟cache。這里的cache指的是babel在編譯過程中某些可以緩存的步驟，具體是什么我也不太清楚，反正是只要開啟了cache就可以加快webpack整體編譯速度

4.babel-plugin-transform-runtime和5.babel-runtime

雖說一個preset已經(jīng)包括N個plugin了，但總有一些漏網(wǎng)之魚是要專門加載的。這里我只用到了transform-runtime，這個plugin的效果是：不用這plugin的話，babel會為每一個轉(zhuǎn)換后的文件（在webpack這就是每一個chunk了）都添加一些輔助的方法（僅在需要的情況下）；而如果用了這個plugin，babel會把這些輔助的方法都集中到一個文件里統(tǒng)一加載統(tǒng)一管理，算是一個減少冗余，增強(qiáng)性能的優(yōu)化項(xiàng)吧，用不用也看自己需要了；如果不用的話，前面也不需要安裝babel-plugin-transform-runtime和babel-runtime了。

5.babel-preset-stage-3

js 提案語法第三階段

{
   "presets": ["es2015", "stage-3"],
   "plugins": ["transform-runtime"],
   "comments": false    
}

未來的babel
再見，babel-preset-2015

"gulp": "^3.9.1",
"gulp-autoprefixer": "^3.1.1",
"gulp-clean-css": "^2.0.13",
"gulp-less": "^3.3.2",
"gulp-rename": "^1.2.2"

錯誤信息提示插件

跨操作系統(tǒng) 在ENV 前加 cross-env

"unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",

.babelrc

{
    "presets": ["es2015", "stage-3"], //轉(zhuǎn)化代碼版本
    "plugins": ["transform-runtime"],
    "comments": false
}

EditorConfig

root = true

charset = utf-8
indent_style = space
indent_size = 4
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

.attributes

src/styles/**/* linguist-vendored=false

.npmignore

.*
*.md
*.yml
build/
node_modules/
test/
gulpfile.js

.travis.yml

language: node_js
node_js:- "4"
script:- npm run test

dll

happypack多線程

...