关于webpack配置的一些理解

1： 入口(entry)   可以为一个字符串、一个数组、跟一个对象

entry: "./app/entry",  //写法一 单页面
entry: ["./app/entry1", "./app/entry2"],  // 写法二 多页面
entry: {
  a: "./app/entry-a",
  b: ["./app/entry-b1", "./app/entry-b2"]
}, //写法三 多页面

2： 出口(output)  为一个对象

output: {
  filename: 'bundle.js',
  path: '/home/proj/public/assets'
} // 单页面

output: {
  filename: '[name].js',
  path: __dirname + '/dist'
} // 多页面

3： 模式(mode)  development/production

此设置让webpack在不同环境下调用不同的plugins

mode: 'production' || 'development'

4:  loader  对模块的源代码进行转换， 如对jsx、sass、less等等

module: {
  rules: [
    {
      test: /\.css$/,
      use: [
        { loader: 'style-loader' },
        {
          loader: 'css-loader',
          options: {
            modules: true
          }
        }
       ]
      }
    ]
  }

5：插件(plugins)  对项目进行优化

plugins: [
  new webpack.optimize.UglifyJsPlugin(),
  new HtmlWebpackPlugin({template: './src/index.html'})
]

6： 模块热替换(devServer)  传送门

devServer: {
  hot: false,
  overlay: true,
  port: 3011,
  host: "127.0.0.1",
  headers: {
    "Access-Control-Allow-Origin": "*",
  },
},