webpack打包学习一

let path = require('path')
// 解析js插入到html文档中
let HtmlWebpackPlugin = require('html-webpack-plugin')
// 解析css以link方式插入到html中
let MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
  devServer: { // 开发服务器配置
    port: 3000, // 端口号
    progress: true, // 进度条
    contentBase: './dist' // 服务器启动的目录
  },
  mode: 'production', // 模式：默认两种 production  development
  entry: './src/index.js', // 入口
  output: {
    filename: 'bundle.js', // 打包后的文件名,bundle.[hash:8].js 生成hash戳，:8hash戳的长度
    path: path.resolve(__dirname, 'dist') // 路径必须是一个绝对路径
  },
  plugins: [ // webpack的所有插件
    new HtmlWebpackPlugin({
      template: './public/index.html', // 原路径
      filename: 'index.html', // 生成的文件名
      hash: true, // 是否加上hash戳
      minify: {
        removeAttributeQuotes: true, // 去除html的双引号
        collapseWhitespace: true // 折叠空行
      }
    }),
    new MiniCssExtractPlugin({
      filename: 'main.css' // 抽离css的样式名称
    })
  ],
  module: { // 模块
    rules: [ // 规则 loader是有顺序的：默认从右向左执行
      // css-loader  解析 @import语法
      // style-loader 把css插入到head标签中
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'],
        include: path.resolve(__dirname, 'src'),
        exclude: '/node_modules/'
      }
    ]
  }
}