手写 webpack.config.js - 《webpack》

const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
module.exports = {
    mode: 'development|production',
  entry: './src/index.js',
  output: {
      path: './dist',
    filename: 'bundle',
    // 在模板HTML中引入打包后的资源的前缀
    publicPath: 'http://localhost:3000/'
  },
  optimization: {
    // 启动标记 开启 tree-shaking
      usedExports: true
  },
  // 开启实时监视
  watch: true,
  watchOptions: {
      ignored: /node_modules/
  },
  resolveLoaders: {
      modules: ['node_modules', './src/loaders']
  },
  devServer: {
      port: 3000, // 端口号
    compress: true, // 启用压缩
    open: true, // 默认打开页面
    proxy: {
        '/api': {
          target: 'http://localhost:1000',
        // 设置为 true，请求头中的 host 就是设置的 target，否则是浏览器原来请求的
        changeOrigin: true,
        pathRewrite: {
            '^/api': ''
        }
      }
    }
  },
  resolve: {
    extensions: ['.js', '.jsx'],
      alias: {
        @: path.resolve(__dirname, 'src')
    }
  },
  module: {
      rules: [
      {
          test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        include: 'src'
      },
      {
          test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
          test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader']
      },
      {
          test: /\.(png|jpg)$/,
        loader: 'url-loader'
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
        template: './public/index.html'
    })
  ]
}