webpack.config.js详解

1、entry

//key-value形式
entry: './path/to/my/entry/file.js'
//对象形式
entry : {
        main : './path/to/my/entry/file.js'
   } 
entry : {
        pageOne: './src/pageOne/index.js',
        pageTwo: './src/pageTwo/index.js',
        pageThree: './src/pageThree/index.js'
   } 
//数组形式
entry: ['./path/to/my/entry/file.js']
entry: {
    pageOne: ['./src/pageOne/index.js','./src/pageOne/index.css'],
    pageTwo: ['./src/pageTwo/index.js'],
    pageThree: ['./src/pageThree/index.js']
  }

2、output

//单入口时
output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  }
//入口多文件时
output: {
    filename: '[name].js',
    path: __dirname + '/dist'
  }

3、module----rules

module:{
    rules:[
      { 
          test: /\.css$/, 
          use: [
            { loader: 'style-loader' },
            {
              loader: 'css-loader',
              include: path.resolve(__dirname, "app"),
              exclude: /node_modules/,
              options: {
                modules: true
              }
            }
          ]
      }
  ]
}

4.plugins

plugins:[
      new ExtractTextPlugin({
            filename: "css/[name].[contenthash].css"
        }),
      new webpack.optimize.UglifyJsPlugin(),
      new webpack.HotModuleReplacementPlugin(),
 ]

5.resolve用于自行补后缀

resolve:{
     extensions:['','.js','.json']
 }

6.externals用于避免一些库的源码被构建到运行时文件中，但是又能用

externals: {
     "jquery": "jQuery"
 }
//使用该库时
var jQuery= require(“jquery”);