基本配置webpack.config.js

const path = require('path');

module.exports = {
  mode: "production", // "production" | "development" | "none"  // 告诉webpack是生产环境还是开发环境.
  entry: "./app/entry", // string | object | array  // 默认 ./src
  // 入口起点，可以指定多个入口起点
  output: {
    // 输出，只可指定一个输出配置
    path: path.resolve(__dirname, "dist"), // string
    //  所有输出文件所在的目录
    // 必须是绝对路径(use the Node.js path module)
    filename: "bundle.js", // string    // 输出文件的名称
    publicPath: "/assets/", // string    // 相对于HTML页面解析的输出目录的url
    library: "MyLibrary", // string,
    //导出库的名称
    libraryTarget: "umd", // universal module definition    // the type of the exported library
  module: { //如何处理项目中不同类型的模块
    rules: [ //用于规定在不同模块被创建时如何处理模块的规则数组
      {
        test: /.jsx?$/, //匹配特定文件的正则表达式或正则表达式数组
        include: [ //规则适用的范围
          path.resolve(__dirname, "app")
        ],
        exclude: [ //规则排除的范围
          path.resolve(__dirname, "app/demo-files")
        ],
        issuer: { test, include, exclude },
        enforce: "pre",
        enforce: "post",
        loader: "babel-loader", //加载器
        options: { //转义
          presets: ["es2015"]
        },
      },
      {
        test: /.html$/,
        use: [
          "htmllint-loader",
          {
            loader: "html-loader",
            options: {
              /* ... */
            }
          }
        ]
      },
    ],
  },
  resolve: {
    // 解决模块请求的选项
    modules: [
      "node_modules",
      path.resolve(__dirname, "app")
    ],
    extensions: [".js", ".json", ".jsx", ".css"], // 用到的扩展
    alias: { //模块名称别名列表
      "module": path.resolve(__dirname, "app/third/module.js"),
    },
  },
  performance: {
    hints: "warning", // enum    maxAssetSize: 200000, // int (in bytes),
    maxEntrypointSize: 400000, // int (in bytes)
    assetFilter: function(assetFilename) {
      return assetFilename.endsWith('.css') || assetFilename.endsWith('.js');
    }
  },
  devtool: "source-map", // 代码映射，增强调试，以构建速度为代价
  context: __dirname, // string (绝对路径) //webpack的主目录
  target: "web",
  externals: ["react", /^@angular//],  //不要跟踪/捆绑这些模块，而是在运行时从环境中请求它们
  serve: { 
    port: 1337,
    content: './dist',
    // ...
  },
  stats: "errors-only",  // 让你精确地控制被显示的包信息
  devServer: {
    proxy: { // 代理url
      '/api': 'http://localhost:3000'
    },
    contentBase: path.join(__dirname, 'public'), // boolean | string | array, static file location
    compress: true, //支持gzip压缩
    historyApiFallback: true, // html在404，对象为多个路径
    hot: true, // 热模块替换。取决于HotModuleReplacementPlugin
    https: false, 
    noInfo: true, 
    // ...
  },
  plugins: [ //webpack插件列表
    // ...
  ],

new webpack.DefinePlugin({
    'process.env': {
      NODE_ENV: '"production"'
    }
  }),

Webpack是属于Node的程序，Node环境下的环境变量，Webpack可以配置，可以灵活读取。

但是index.js里面是属于Webpack要构建的产物，如果里面也想读取环境变量。可以通过这个DefinePlugin定义一下，
index.js里面就可以读到了。