一份自用的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"
    ]
  }
}

（完）