構建經常使用npm包

前言

最近看到一篇文章《迷茫時學習Node.js最好的方法》
一直以來對node的我的心理傾向於作前端工具，而不是web服務。因此一直以來都沒好好學node。

基礎配置

1.html-webpack-plugin

爲html文件中引入的外部資源如script、link動態添加每次compile後的hash，防止引用緩存的外部文件問題

能夠生成建立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/ 文件夾咱們已經有 index.html 這個文件，然而 HtmlWebpackPlugin 仍是會默認生成 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')
    }
};

2. html-loader

3. autoprefixer-loade

Autoprefixer是一個後處理程序，你能夠同Sass，Stylus或LESS等預處理器共通使用。它適用於普通的CSS，而你無需關心要爲哪些瀏覽器加前綴，只需全新關注於實現，並使用W3C最新的規範。

4. file-loader

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

5. url-loader

url-loader的主要功能是：將源文件轉換成DataUrl(聲明文件mimetype的base64編碼)。據我所知，在前端範疇裏，圖片和字體文件的DataUrl都是能夠被瀏覽器所識別的，所以能夠把圖片和字體都轉化成DataUrl收納在HTML/CSS/JS文件裏，以減小HTTP鏈接數。

圖片

{
    // 圖片加載器，雷同file-loader，更適合圖片，能夠將較小的圖片轉成base64，減小http請求
    // 以下配置，將小於8192byte的圖片轉成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]',
 },

6. css-loader

針對css文件，咱們須要使用css-loader來加載.css-loader的功能比較強大，一些新穎的特性好比Local Scope或是CSS Modules都是支持的。

7. less-loader

針對less文件，咱們首先須要使用less-loader來加載。less-loader會調用所依賴的less模塊對less文件進行編譯(包括@import語法)。至於說less-loader所接受的參數，實質上大部分是傳遞給less模塊使用的參數，因爲我本人應用less的程度不深，所以沒有傳任何參數、直接就使用了。若是你以前對less模塊就已經有了一套配置的話，請參考less-loader的文檔進行配置。

另外，less-loader並不會針對url()語法作特別的轉換，所以，若是你想把url()語句裏涉及到的文件（好比圖片、字體文件等）也一併用webpack打包的話，就必須利用管道交給css-loader作進一步的處理。

8. ExtractTextWebpackPlugin

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，移動到獨立分離的 CSS 文件。所以，你的樣式將再也不內嵌到 JS bundle 中，而是會放到一個單獨的 CSS 文件（即 styles.css）當中。 若是你的樣式文件大小較大，這會作更快提早加載，由於 CSS bundle 會跟 JS bundle 並行加載。

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

9. babel相關

1.babel-core

babel的核心

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

儘量符合ECMAScript6語義的normal模式和提供更簡單ES5代碼的loose模式

3.babel-loader

babel轉化loader

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

cacheDirectory cacheDirectory參數默認爲false，若你設置爲一個文件目錄路徑（表示把cache存到哪），或是保留爲空（表示操做系統默認的緩存目錄），則至關於開啓cache。這裏的cache指的是babel在編譯過程當中某些能夠緩存的步驟，具體是什麼我也不太清楚，反正是隻要開啓了cache就能夠加快webpack總體編譯速度

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

雖然說一個preset已經包括N個plugin了，但總有一些漏網之魚是要專門加載的。這裏我只用到了transform-runtime，這個plugin的效果是：不用這plugin的話，babel會爲每個轉換後的文件（在webpack這就是每個chunk了）都添加一些輔助的方法（僅在須要的狀況下）；而若是用了這個plugin，babel會把這些輔助的方法都集中到一個文件裏統一加載統一管理，算是一個減小冗餘，加強性能的優化項吧，用不用也看本身須要了；若是不用的話，前面也不須要安裝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

10. gulp相關

"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"

工程

1. friendly-errors-webpack-plugin

錯誤信息提示插件

2. cross-env

跨操做系統 在ENV 前加 cross-env

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

3. 配置文件

1. .babelrc

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

1. EditorConfig

root = true

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

1. .attributes

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

1. .npmignore

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

2. .travis.yml

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

優化

1. dll
2. happypack多線程
3. ...