webpack 4.x學習使用總結

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

常規

1.入口

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

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

2.出口

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/",
}

3. 模塊

開發者將程序分解成離散功能塊(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' ]
    })
]

5 .開發中 Server(devServer)

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'//開發環境

7. externals

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

附錄

1. loader 分類列表

加載文件

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 組件而打包進全部的組件。

2.經常使用 Plugins 

用於修改行爲

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鏡像

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

vm 適配

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
});