摘要：最近一周一直都在折騰一些項目中常用的記錄下來，以后免去簡單的配置再去查文檔。常規入口指示應該使用哪個模塊，來作為構建其內部依賴圖的開始。把代碼轉換成，在使用語言中有介紹。擴展語法，使用下一代，在使用中有介紹。用于忽略部分文件。

最近一周一直都在折騰webpack,一些項目中常用的記錄下來，以后免去簡單的配置再去查文檔。

指示 webpack 應該使用哪個模塊，來作為構建其內部依賴圖的開始。
三種寫法：

entry: "./app/entry", // string | object | array
 ?entry: ["./app/entry1", "./app/entry2"],
 ?entry: {
 ? ?a: "./app/entry-a",
 ? ?b: ["./app/entry-b1", "./app/entry-b2"]
 ?},

output 屬性告訴 webpack 在哪里輸出它所創建的 bundles

output:{
? ? path: path.resolve(__dirname, "dist"), // string,
? ? ??
? ? filename: "bundle.js", // string
? ? filename: "[name].js", // 用于多個入口點(entry point)（出口點？）
? ? filename: "[chunkhash].js", // 用于長效緩存
? ??
? ? publicPath: "",
? ? publicPath: "https://cdn.example.com/",
}

開發者將程序分解成離散功能塊(discrete chunks of functionality)，并稱之為_模塊_。

module:{
 ? ? ?rules:[{
 ? ? ? ?test: /.jsx?$/,
 ? ? ? ?include: [
 ? ? ? ? ?path.resolve(__dirname, "app")
 ? ? ? ?],
 ? ? ? ?exclude: [
 ? ? ? ? ?path.resolve(__dirname, "app/demo-files")
 ? ? ? ?],
 ? ? ? ?// 這里是匹配條件，每個選項都接收一個正則表達式或字符串
 ? ? ? ?// test 和 include 具有相同的作用，都是必須匹配選項
 ? ? ? ?// exclude 是必不匹配選項（優先于 test 和 include）
 ? ? ? ?// 最佳實踐：
 ? ? ? ?// - 只在 test 和 文件名匹配 中使用正則表達式
 ? ? ? ?// - 在 include 和 exclude 中使用絕對路徑數組
 ? ? ? ?// - 盡量避免 exclude，更傾向于使用 include
 ? ? ? ?issuer: { test, include, exclude },
 ? ? ? ?// issuer 條件（導入源）
 ? ? ? ?enforce: "pre",
 ? ? ? ?enforce: "post",
 ? ? ? ?// 標識應用這些規則，即使規則覆蓋（高級選項）
 ? ? ? ?loader: "babel-loader",
 ? ? ? ?// 應該應用的 loader，它相對上下文解析
 ? ? ? ?// 為了更清晰，`-loader` 后綴在 webpack 2 中不再是可選的
 ? ? ? ?// 查看 webpack 1 升級指南。
 ? ? ? ?options: {
 ? ? ? ? ?presets: ["es2015"]
 ? ? ? ?},
 ? ? ? ?// loader 的可選項
 ? ? ?}]
 ?}

? ## 4.插件(plugins)

? 插件是 webpack 的支柱功能。webpack 自身也是構建于，你在 webpack 配置中用到的相同的插件系統之上

var webpack = require("webpack");
// 導入非 webpack 自帶默認插件
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var DashboardPlugin = require("webpack-dashboard/plugin");
// 在配置中添加插件
plugins: [
 ?// 構建優化插件
 ?new webpack.optimize.CommonsChunkPlugin({
 ? ?name: "vendor",
 ? ?filename: "vendor-[hash].min.js",
 ?}),
 ?new webpack.optimize.UglifyJsPlugin({
 ? ?compress: {
 ? ? ?warnings: false,
 ? ? ?drop_console: false,
 ? ?}
 ?}),
 ?new ExtractTextPlugin({
 ? ?filename: "build.min.css",
 ? ?allChunks: true,
 ?}),
 ?new webpack.IgnorePlugin(/^./locale$/, /moment$/),
 ?// 編譯時(compile time)插件
 ?//html文件插件
 ?new HtmlWebpackPlugin({
 ? ? ?template: "index.html"
 ? ? ?title: "My App",
 ? ? ?filename: "assets/admin.html",
 ? ? ?chunks: ["app"],
 ? ? ?excludeChunks: [ "dev-helper" ]
 ? ?})
]

devServer: {
 ? ?//proxy: { // proxy URLs to backend development server
 ? ?//  "/api": "http://localhost:3000"
 ? // },
 ? ?contentBase: path.join(__dirname, "public"), // boolean | string | array, static file location
 ? ?compress: true, // enable gzip compression
 ? ?//historyApiFallback: true, // true for index.html upon 404, object for multiple paths
 ? ?hot: true, // hot module replacement. Depends on HotModuleReplacementPlugin
 ? ?//https: false, // true for self-signed, object for cert authority
 ? ?//noInfo: true, // only errors & warns on hot reload
 ? ?// ...
 ?},
 ? ? ?
devtool:"none"/"source-map"  // 生產環境
devtool:"eval-source-map"http://開發環境

//配置
externals: {
 ?jquery: "jQuery"
}
//代碼中使用
import $ from "jquery";
$(".my-element").animate(...);

raw-loader：把文本文件的內容加載到代碼中去
file-loader：把文件輸出到一個文件夾中，在代碼中通過相對 URL 去引用輸出的文件，
url-loader：和 file-loader 類似，但是能在文件很小的情況下以 base64 的方式把文件內容注入到代碼中去，在
source-map-loader：加載額外的 Source Map 文件，以方便斷點調試，
svg-inline-loader：把壓縮后的 SVG 內容注入到代碼中，
node-loader：加載 Node.js 原生模塊 .node 文件。
image-loader：加載并且壓縮圖片文件。
json-loader：加載 JSON 文件。
yaml-loader：加載 YAML 文件。

handlebars-loader：把 Handlebars 模版編譯成函數返回。
markdown-loader：把 Markdown 文件轉換成 HTML。

babel-loader：把 ES6 轉換成 ES5，在3-1使用 ES6 語言中有介紹。
ts-loader：把 TypeScript 轉換成 JavaScript，在3-2使用 TypeScript 語言中有遇到。
awesome-typescript-loader：把 TypeScript 轉換成 JavaScript，性能要比 ts-loader 好。
coffee-loader：把 CoffeeScript 轉換成 JavaScript。

css-loader：加載 CSS，支持模塊化、壓縮、文件導入等特性。
style-loader：把 CSS 代碼注入到 JavaScript 中，通過 DOM 操作去加載 CSS。
sass-loader：把 SCSS/SASS 代碼轉換成 CSS，在3-4使用 SCSS 語言中有介紹。
postcss-loader：擴展 CSS 語法，使用下一代 CSS，在3-5使用 PostCSS中有介紹。
less-loader：把 Less 代碼轉換成 CSS 代碼。
stylus-loader：把 Stylus 代碼轉換成 CSS 代碼。

eslint-loader：通過 ESLint 檢查 JavaScript 代碼，在 3-16檢查代碼中有介紹。
tslint-loader：通過 TSLint 檢查 TypeScript 代碼。
mocha-loader：加載 Mocha 測試用例代碼。
coverjs-loader：計算測試覆蓋率。

vue-loader：加載 Vue.js 單文件組件，在3-7使用 Vue 框架中有介紹。
i18n-loader：加載多語言版本，支持國際化。
ignore-loader：忽略掉部分文件，在3-11構建同構應用中有介紹。
ui-component-loader：按需加載 UI 組件庫，例如在使用 antd UI 組件庫時，不會因為只用到了 Button 組件而打包進所有的組件。

context-replacement-plugin：修改 require 語句在尋找文件時的默認行為。
ignore-plugin：用于忽略部分文件。

extract-text-webpack-plugin：提取 JavaScript 中的 CSS 代碼到多帶帶的文件中
prepack-webpack-plugin：通過 Facebook 的 Prepack 優化輸出的 JavaScript 代碼性能，
uglifyjs-webpack-plugin：通過 UglifyES 壓縮 ES6 代碼，
webpack-parallel-uglify-plugin：多進程執行 UglifyJS 代碼壓縮，提升構建速度。
imagemin-webpack-plugin：壓縮圖片文件。
webpack-spritesmith：用插件制作雪碧圖。
ModuleConcatenationPlugin：開啟 Webpack Scope Hoisting 功能，
dll-plugin：借鑒 DDL 的思想大幅度提升構建速度，
hot-module-replacement-plugin：開啟模塊熱替換功能。

serviceworker-webpack-plugin：給網頁應用增加離線緩存功能，在
stylelint-webpack-plugin：集成 stylelint 到項目中，
i18n-webpack-plugin：給你的網頁支持國際化。
provide-plugin：從環境中提供的全局變量中加載模塊，而不用導入對應的文件。
web-webpack-plugin：方便的為單頁應用輸出 HTML，比 html-webpack-plugin 好用。

var path = require("path")
var webpack = require("webpack")
//性能分分析
const WebpackMonitor = require("webpack-monitor");
const HtmlWebpackPlugin = require("html-webpack-plugin");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
  mode: " "production" | "development" | "none"",
  entry: {
 ?  a: "./app/entry-a",
 ?  b: ["./app/entry-b1", "./app/entry-b2"]
  },
  output: {
 ?  path: path.resolve(__dirname, "dist"), // string,
 ?  filename: "bundle.js", // string
 ?  filename: "[name].js", // 用于多個入口點(entry point)（出口點？）
 ?  filename: "[chunkhash].js", // 用于長效緩存
 ?  publicPath: "",
 ?  publicPath: "https://cdn.example.com/"
  },
  module: {
 ?  rules: [
 ? ?  {
 ? ? ?  test: /.js$/,
 ? ? ?  loader: "babel-loader",
 ? ? ?  exclude: /node_modules/
 ? ?  },
 ? ?  {
 ? ? ?  // 用正則去匹配要用該 loader 轉換的 CSS 文件
 ? ? ?  test: /.css$/,
 ? ? ?  use: ExtractTextPlugin.extract({
 ? ? ? ?  use: ["style-loader", "css-loader", "postcss-loader"],
 ? ? ? ?  include: path.join(__dirname, "./src"),
 ? ? ? ?  exclude: /node_modules/
 ? ? ?  })
 ? ?  },
 ? ?  {
 ? ? ?  test: /.(png|jpg|gif|svg|bmp|eot|woff|woff2|ttf)$/,
 ? ? ?  loader: {
 ? ? ? ?  loader: "file-loader",
 ? ? ? ?  options: {
 ? ? ? ? ?  name: "[name].[ext]?[hash]"
 ? ? ? ?  }
 ? ? ?  }
 ? ?  },
 ? ?  {
 ? ? ?  test: /.(png|jpg|gif|svg|bmp|eot|woff|woff2|ttf)$/,
 ? ? ?  loader: {
 ? ? ? ?  loader: "url-loader",
 ? ? ? ?  options: {
 ? ? ? ? ?  limit: 5 * 1024, // 圖片大小 > limit 使用file-loader, 反之使用url-loader
 ? ? ? ? ?  outputPath: "images/" // 指定打包后的圖片位置
 ? ? ? ?  }
 ? ? ?  }
 ? ?  },
 ? ?  {
 ? ? ?  // 暴露模塊
 ? ? ?  test: require.resolve("jquery"), // 注意 這里是require的resolve 方法
 ? ? ?  use: {
 ? ? ? ?  loader: "expose-loader",
 ? ? ? ?  options: "$"
 ? ? ?  }
 ? ?  }
 ?  ]
  },
  plugins: [
 ?  // 構建優化插件
 ?  new webpack.optimize.CommonsChunkPlugin({
 ? ?  name: "vendor",
 ? ?  filename: "vendor-[hash].min.js"
 ?  }),
 ?  new webpack.optimize.UglifyJsPlugin({
 ? ?  compress: {
 ? ? ?  warnings: false,
 ? ? ?  drop_console: false
 ? ?  }
 ?  }),
 ?  //提取css文件
 ?  new ExtractTextPlugin({
 ? ?  filename: "build.min.css",
 ? ?  allChunks: true
 ?  }),
 ?  new WebpackMonitor({
 ? ?  capture: true, // -> default "true"
 ? ?  target: "../monitor/myStatsStore.json", // default -> ?"../monitor/stats.json"
 ? ?  launch: true, // -> default "false"
 ? ?  port: 3030 // default -> 8081
 ?  }),
 ?  //html文件插件
 ?  new HtmlWebpackPlugin({
 ? ?  template: "index.html",
 ? ?  title: "My App",
 ? ?  filename: "assets/admin.html",
 ? ?  chunks: ["app"],
 ? ?  excludeChunks: ["dev-helper"]
 ?  })
  ],
  devServer: {
 ?  //proxy: { // proxy URLs to backend development server
 ?  // ?"/api": "http://localhost:3000"
 ?  // },
 ?  contentBase: path.join(__dirname, "public"), // boolean | string | array, static file location
 ?  compress: true, // enable gzip compression
 ?  //historyApiFallback: true, // true for index.html upon 404, object for multiple paths
 ?  hot: true // hot module replacement. Depends on HotModuleReplacementPlugin
 ?  //https: false, // true for self-signed, object for cert authority
 ?  //noInfo: true, // only errors & warns on hot reload
 ?  // ...
  },
  devtool: "eval-source-map", //開發環境
  //配置
  externals: {
 ?  jquery: "jQuery"
  }
};

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

cnpm i postcss-import postcss-url autoprefixer postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext cssnano postcss-viewport-units cssnano-preset-advanced -D
npm install viewport-units-buggyfill
var hacks = require("viewport-units-buggyfill/viewport-units-buggyfill.hacks");
require("viewport-units-buggyfill").init({
  hacks: hacks
});