webpack配置項介紹

什麼是webpack？

子產品化管理及打包工具

Webpack的工作方式：如下圖所示，把你的項目當做一個整體，通過一個給定的主檔案（如：index.js），Webpack将從這個檔案開始找到你的項目的所有依賴檔案，使用loaders處理它們，最後打包為一個（或多個）浏覽器可識别的JavaScript檔案。

配置項介紹

// “__dirname”是node.js中的一個全局變量，它指向目前執行腳本所在的目錄。
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CleanWebpackPlugin = require("clean-webpack-plugin");

module.exports = {
  devtool: "eval-source-map", // 代碼調試方式
  entry:  __dirname + "/app/main.js", // 唯一入口檔案
  output: {
    path: __dirname + "/public", // 打包後的檔案存放的地方
    filename: "bundle.js", // 打包後輸出檔案的檔案名
  },
  devServer: {
    contentBase: "./public", // 本地伺服器所加載的頁面所在的目錄
    historyApiFallback: true, // 不跳轉
    inline: true // 實時重新整理
  },
  // loaders
  module: {
    rules: [ {
      test: /(\.jsx|\.js)$/, // 一個用以比對loaders所處理檔案的拓展名的正規表達式（必須）
      use: {
        loader: "babel-loader", // loader的名稱（必須）
        options: {
          presets: [
            "env"
          ]
        }
      },
      exclude: /node_modules/ // include/exclude:手動添加必須處理的檔案（檔案夾）或屏蔽不需要處理的檔案（檔案夾）（可選）
    }, {
      test: /\.css$/,
      use: [ {
        loader: "style-loader"
      }, {
        loader: "css-loader",
        options: {
          modules: true, // 指定啟用css modules
          localIdentName: '[name]__[local]--[hash:base64:5]' // 指定css的類名格式
        }
      } ]
    } ]
  },
  plugins: [
    new webpack.BannerPlugin('版權所有，翻版必究'),
    new HtmlWebpackPlugin({
      template: __dirname + "/app/index.tmpl.html" // new 一個這個插件的執行個體，并傳入相關的參數
    }),
    new webpack.HotModuleReplacementPlugin(), // 熱加載插件
    new webpack.optimize.OccurrenceOrderPlugin(), // (優化) 為元件比對ID
    new webpack.optimize.UglifyJsPlugin(), // (優化) 壓縮js代碼
    new ExtractTextPlugin("style.css"), // （優化）分離css、js檔案
    new CleanWebpackPlugin('build/*.*', { // (緩存) 清除緩存，添加了hash之後，會導緻改變檔案内容後重新打包時，檔案名不同而内容越來越多
      root: __dirname,
      verbose: true,
      dry: false
    })
  ]
}
           

devtool參數	說明
source-map	在一個單獨的檔案中産生一個完整且功能完全的檔案。這個檔案具有最好的 source map ，但是它會減慢打包速度；
cheap-module-source-map	在一個單獨的檔案中生成一個不帶列映射的 map ，不帶列映射提高了打包速度，但是也使得浏覽器開發者工具隻能對應到具體的行，不能對應到具體的列（符号），會對調試造成不便；
eval-source-map	使用 eval 打包源檔案子產品，在同一個檔案中生成幹淨的完整的 source map 。這個選項可以在不影響建構速度的前提下生成完整的 sourcemap ，但是對打包後輸出的JS檔案的執行具有性能和安全的隐患。在開發階段這是一個非常好的選項，在生産階段則一定不要啟用這個選項；
cheap-module-eval-source-map	這是在打封包件時最快的生成 source map 的方法，生成的 Source Map  會和打包後的 JavaScript 檔案同行顯示，沒有列映射，和 eval-source-map 選項具有相似的缺點；

正如上表所述，上述選項由上到下打包速度越來越快，不過同時也具有越來越多的負面作用，較快的打包速度的後果就是對打包後的檔案的的執行有一定影響。

對小到中型的項目中，

eval-source-map

是一個很好的選項，再次強調你隻應該開發階段使用它。

cheap-module-eval-source-map

方法建構速度更快，但是不利于調試，推薦在大型項目考慮時間成本時使用。