一份自用的webpack配置文件及其配置說明

1.webpack.config.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')

module.exports = {
  // 配置頁面入口 js 文件
  entry: './src/main.js',
  // 配置打包輸出相關
  output: {
    // 打包輸出目錄
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/dist/',
    //打包後的文件名
    //name是entry名字main
    //hash根據打包後的文件內容計算出來的一個hash值
    filename: '[name].[hash:8].js',
  },
  module: {
    /*
    配置各類類型文件的加載器，稱之爲 loader
    webpack 當遇到 import ... 時，會調用這裏配置的 loader 對引用的文件進行編譯
    */
    rules: [{
        /*
        使用 babel 編譯 ES6 / ES7 / ES8 爲 ES5 代碼
        使用正則表達式匹配後綴名爲 .js 的文件
        */
        test: /\.js$/,
        use: 'babel-loader',
        // 排除 node_modules 目錄下的文件，npm 安裝的包不須要編譯
        exclude: /node_modules/
      },
      {
        // 匹配 css 文件
        test: /\.css$/,
        /*
        先使用 css-loader 處理，返回的結果交給 style-loader 處理。
        css-loader 將 css 內容存爲 js 字符串，而且會把 background, @font-face 等引用的圖片，
        字體文件交給指定的 loader 打包。
        */
        use: ['style-loader', 'css-loader'],
      },
      {
        // 匹配 scss 文件
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader', ],
      },
      {
        /*
        匹配各類格式的圖片和字體文件
        上面 html-loader 會把 html 中 <img> 標籤的圖片解析出來，文件名匹配到這裏的 test 的正則表達式，
        css-loader 引用的圖片和字體一樣會匹配到這裏的 test 條件
        */
        test: /\.(png|jpg|jpeg|gif|eot|ttf|woff|woff2|svg|svgz)(\?.+)?$/,

        /*
        使用 url-loader, 它接受一個 limit 參數，單位爲字節(byte)

        當文件體積小於 limit 時，url-loader 把文件轉爲 Data URI 的格式內聯到引用的地方
        當文件大於 limit 時，url-loader 會調用 file-loader, 把文件儲存到輸出目錄，並把引用的文件路徑改寫成輸出後的路徑

        好比 
        <img src="smallpic.png">
        會被編譯成
        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAA...">

        而
        <img src="largepic.png">
        會被編譯成
        <img src="/f78661bef717cf2cc2c2e5158f196384.png">
        */
        use: [{
          loader: 'url-loader',
          options: {
            limit: 10000
          }
        }]
      }
    ]
  },
  resolve: {
    alias: {
      //路徑別名
      '@': path.resolve(__dirname, 'src'),
    },
    extensions: ['*', '.js', '.json']
  },
  devServer: {
    /*
    啓用 noInfo 後，諸如「啓動時和每次保存以後，
    那些顯示的 webpack 包(bundle)信息」的消息將被隱藏。錯誤和警告仍然會顯示。
     */
    noInfo: true,
    //當存在編譯器錯誤或警告時，是否在瀏覽器中全屏顯示。
    overlay: true,
    //在編譯時只顯示錯誤信息
    stats: 'errors-only',
    //服務器返回給瀏覽器的時候是否啓動gzip壓縮
    compress: true,
    //指定使用一個 host。默認是 localhost。若是你但願服務器外部可訪問，可設置爲0.0.0.0
    host: 'localhost',
    port: 8089
  },
  plugins: [
    /*
    template 參數指定入口 html 文件路徑，插件會把這個文件交給 webpack 去編譯，
    webpack 按照正常流程，找到 loaders 中 test 條件匹配的 loader 來編譯，那麼這裏 html-loader 就是匹配的 loader
    html-loader 編譯後產生的字符串，會由 html-webpack-plugin 儲存爲 html 文件到輸出目錄，默認文件名爲 index.html
    能夠經過 filename 參數指定輸出的文件名
    html-webpack-plugin 也能夠不指定 template 參數，它會使用默認的 html 模板。
    */
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: 'index.html',
      hash: true, // 會在引入的js里加入查詢字符串避免緩存,
    }),
    //clean-webpack-plugin插件可在每次打包時清空dist文件夾
    new CleanWebpackPlugin({
      cleanOnceBeforeBuildPatterns: ['./dist'],
    })
  ],
  /*
  配置 source map
  開發模式下使用 cheap-module-eval-source-map, 生成的 source map 能和源碼每行對應，方便打斷點調試
  生產模式下使用 hidden-source-map, 生成獨立的 source map 文件，而且不在 js 文件中插入 source map 路徑
  */
  devtool: process.env.NODE_ENV === 'development' ? 'cheap-module-eval-source-map' : 'hidden-source-map',
  /*
  建議每一個輸出的 js 文件的大小不要超過 250k。
  但開發環境由於包含了 sourcemap 而且代碼未壓縮因此通常都會超過這個大小，因此咱們能夠在開發環境把這個 warning 關閉。
  */
  performance: {
    hints: process.env.NODE_ENV === 'development' ? false : 'warning'
  },
  //表示監控源文件的變化，當源文件發生改變後，則從新打包
  watch: true,
  watchOptions: {
    ignored: /node_modules/,
    poll: 1000, //每秒鐘詢問的次數
    aggregateTimeout: 500
  }
}

2.package.json

{
  "name": "nanliangrexue",
  "description": "nanliangrexue",
  "license": "MIT",
  "scripts": {
    "dev":   "cross-env NODE_ENV = development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV = production  webpack --progress --hide-modules"
  },
  "dependencies": {
   
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "babel-preset-stage-3": "^6.24.1",
    "cross-env": "^5.0.5",
    "css-loader": "^0.28.7",
    "style-loader": "^0.20.3",
    "file-loader": "^1.1.4",
    "url-loader": "^1.1.2",
    "sass-loader": "^7.1.0",
    "node-sass": "^4.10.0",
    "webpack": "^4.1.1",
    "webpack-cli": "^2.0.12",
    "webpack-dev-server": "^3.1.1",
    "clean-webpack-plugin": "^0.1.19",
    "html-webpack-plugin": "^3.0.6"
  },
  "babel": {
    "presets": [
      "env",
      "stage-3"
    ]
  }
}

（完）