webpack 入門和常用插件的使用

常用配置參數

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js'
  },
  output: {
    path: path.resolve(__dirname, '../dist'),
    filename: '[name].js',
    publicPath: '/'
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      vue$: 'vue/dist/vue.esm.js',
      '@': resolve('src')
    }
  },
  module: {
    rules: []
  },
  plugins: {},
  devtool: 'cheap-module-eval-source-map',
  devServer: {}
};

• context : 基礎目錄，絕對路徑，用於從配置中解析入口起點 (entry point) 和加載器 (loader)。
• 默認使用當前目錄，但是推薦在配置中傳遞一個值。這使得你的配置獨立於 CWD(current working directory)。
• entry : 起點或是應用程序的起點入口。從這個起點開始，應用程序啟動執行。如果傳遞一個數組，那么數組的每一項都會執行。
• output : 位於對象最頂級鍵(key)，包括了一組選項，指示 webpack 如何去輸出、以及在哪里輸出你的「bundle、asset 和其他你所打包或使用 webpack 載入的任何內容」
• filename : 輸出 bundle 的名稱。[name]：入口名稱；[id]：內部 chunk id；[hash]：動態生成唯一 hash 值；[chunkhash]：每個 chunk 內容的 hash；
• publicPath : 指在 runtime(運行時) 或 loader(加載器載入時) 所創建的每個 URL 的前綴。
• path : 輸出文件的 絕對路徑
• resolve : 配置 webpack 如何尋找模塊對應的文件
• alias : 配置別名把原來導入路徑映射成一個新的導入路徑
• extensions : 在導入語句沒帶文件后綴時，webpack 會自動帶上后綴去嘗試訪問文件是否存在。extensions 用於配置在嘗試過程中用到的后綴列表。默認：['.js', '.json']
• module.rules : 配置對應文件的加載規則，即：使用哪種 loaders 去加載對應的文件
• devtool : 對打包的文件生成對應的 sourcemap
• eval : 每個 module 會封裝到 eval 里包裹起來執行，並且會在末尾追加注釋 //@ sourceURL.
• source-map : 生成一個 SourceMap 文件.
• hidden-source-map : 和 source-map 一樣，但不會在 bundle 末尾追加注釋.
• inline-source-map : 生成一個 DataUrl 形式的 SourceMap 文件.
• eval-source-map : 每個 module 會通過 eval()來執行，並且生成一個 DataUrl 形式的 SourceMap.
• cheap-source-map : 生成一個沒有列信息（column-mappings）的 SourceMaps 文件，不包含 loader 的 sourcemap（譬如 babel 的 sourcemap）
• cheap-module-source-map : 生成一個沒有列信息（column-mappings）的 SourceMaps 文件，同時 loader 的 sourcemap 也被簡化為只包含對應行的。
• webpack 不僅支持這 7 種，而且它們還是可以任意組合上面的 eval、inline、hidden 關鍵字
• 在 vue-cli 中，開發環境推薦：cheap-module-eval-source-map。生產環境推薦：source-map
• plugins : 拓展 webpack 功能
• devServer : 提供虛擬服務器，讓我們進行開發和調試。需要安裝對應插件 webpack-dev-server

常用 Loaders

module: {
  rules: [
    {
      test: /\.css$/,
      use: [
        { loader: 'style-loader' },
        {
          loader: 'css-loader',
          options: {
            modules: true
          }
        }
      ]
    },
    {
      test: /\.css$/,
      loader: 'css-loader',
      options: {
        modules: true
      }
    }
  ];
}

• 常用配置
• test : 通過正則的方式匹配對應的文件
• use : 數組的方式使用多個加載器
• loader : 加載器的名稱
• options : 對應加載器的配置項，每個加載器都有自己的配置項
• include : 指定哪些文件需要加載
• exclude : 指定不要加載哪些文件
• enforce : 加載器的執行順序，不設置為正常執行。可選值 pre | post 前 | 后。多個的時候默認數組從后向前
• 常用加載器
• html-loader : 將 HTML 文件導出編譯為字符串，可供 js 識別的其中一個模塊
• css-loader : 解析 css 文件中代碼
• style-loader : 將 css 模塊作為樣式導出到 DOM 中
• less-loader : 加載和轉義 less 文件
• sass-loader : 加載和轉義 sass/scss 文件
• postcss-loader : 使用 postcss 加載和轉義 css/sss 文件
• url-loader : 多數用於加載圖片資源,超過文件大小顯示則返回 data URL。內置了 file-loader，建議使用這個加載器用來加載一些靜態文件，例如圖片、字體文件等等
• babel-loader : 加載 ES6+ 代碼后使用 Babel 轉義為 ES5 后瀏覽器才能解析
• typescript-loader : 加載 Typescript 腳本文件
• vue-loader : 加載和轉義 vue 組件
• angualr2-template--loader : 加載和轉義 angular 組件
• react-hot-loader : 動態刷新和轉義 react 組件中修改的部分，基於 webpack-dev-server 插件需先安裝，然后在 webpack.config.js 中引用 react-hot-loader

常用插件

HtmlWebpackPlugin : 是依據一個簡單的模板，幫助生成最終的 Html5 文件，這個文件中自動引用了打包后的 JS 文件。每次編譯都在文件名中插入一個不同的哈希值。[詳細參考](https://www.npmjs.com/package/html-webpack-plugin

  new HtmlWebpackPlugin({
    filename: 'index.html',
    template: 'index.html',
    inject: true
  });

• filename : 文件名
• template : 對應的模板
• inject : 打包文件插入的位置。false不插入，true插入尾部，head插入頭部，body插入到 body 里
• favicon : favicon 的路徑
• CopyWebpackPlugin : 在 webpack 中拷貝文件和文件夾，一般用於將不需要打包的靜態文件 copy 到我們最終打包的文件目錄下

  new CopyWebpackPlugin([
    {
      from: path.resolve(__dirname, '../static'),
      to: path.resolve(__dirname, '../dist/static'),
      ignore: ['.*']
    }
  ]);

• from : 源目錄
• to : 目標目錄
• ignore : 忽略拷貝指定的文件
• webpack.HotModuleReplacementPlugin : 開啟 HMR，在應用程序運行時交換，添加或刪除模塊，而無需完全重新加載
• webpack.NamedModulesPlugin : 當開啟 HMR 的時候使用該插件會顯示模塊的相對路徑，建議用於開發環境。
• 作用：由於引入了一個新模塊，使得打包過程中部分模塊的模塊 ID 發生了改變。而模塊 ID 的改變，直接導致了包含這些模塊的 chunk 內容改變，進而導致 chunkHash 的改變。因此需要找到一種和順序無關的模塊 ID 命名方式
• webpack.HashedModuleIdsPlugin : 該插件會根據模塊的相對路徑生成一個四位數的 hash 作為模塊 id, 建議用於生產環境
• webpack.NoEmitOnErrorsPlugin : 跳過編譯時出錯的代碼並記錄，使編譯后運行時的包不會發生錯誤。
• webpack.DefinePlugin : 允許你創建一個在編譯時可以配置的全局常量。這可能會對開發模式和發布模式的構建允許不同的行為非常有用。
• webpack.optimize.ModuleConcatenationPlugin : 啟用作用域提升，作用是讓代碼文件更小、運行的更快
• uglifyJsPlugin : 用來對 js 文件進行壓縮，從而減小 js 文件的大小，加速 load 速度。該插件會拖慢構建的速度，所以建議在生產環境下開啟。
• ExtractTextPlugin : 主要是為了抽離 css 樣式,防止將樣式打包在 js 中引起頁面樣式加載錯亂的現象
• OptimizeCSSPlugin : 壓縮、混淆優化 css，解決 ExtractTextPlugin css 重復問題
• webpack.optimize.CommonsChunkPlugin : 用來提取第三方庫和公共模塊，避免首屏加載的 bundle 文件或者按需加載的 bundle 文件體積過大，從而導致加載時間過長。詳細用法請點擊

devServer 配置

• hot : 熱模塊更新作用。即修改模塊后，保存會自動更新，頁面不用刷新呈現最新的效果。和 webpack.HotModuleReplacementPlugin （HMR） 這個插件不是一樣功能。HMR 這個插件是真正實現熱模塊更新的。而 devServer 里配置了 hot: true , webpack 會自動添加 HMR 插件。所以模塊熱更新最終還是 HMR 這個插件起的作用。
• host : 主機名，默認 localhost
• prot : 端口號，默認 8080
• historyApiFallback : 設置為 true 的時候，我們頁面錯誤不會出現 404。當我們搭建 spa 應用時非常有用，它使用的是 HTML5 History Api，任意的跳轉或 404 響應可以指向 index.html 頁面。詳細參考
• compress : true ，開啟虛擬服務器時，為你的代碼進行壓縮。加快開發流程和優化的作用
• contentBase : 你要提供哪里的內容給虛擬服務器用。這里最好填 絕對路徑
• open : true 時自動打開瀏覽器
• overlay : true ，在瀏覽器上全屏顯示編譯的 errors 或 warnings。默認 false
• quiet : true，則終端輸出的只有初始啟動信息。 webpack 的警告和錯誤是不輸出到終端的
• publicPath : 配置了 publicPath 后， url = ‘主機名’ + ‘publicPath 配置的’ +
• ‘原來的 url.path’。這個其實與 output.publicPath 用法大同小異。
• output.publicPath 是作用於 js, css, img 。而 devServer.publicPath 則作用於請求路徑上的。
• proxy : 配置服務代理。詳細參考
• watchOptions : 一組自定義的監聽模式，用來監聽文件是否被改動過。詳細參考