Question

2.1 Entry

• 代码的入口
• 打包的入口
• 单个或多个

写法建议使用键值对写法

module.exports = {
  entry: 'index.js'
}

module.exports = {
  entry: '[index.js','vendor.js']
}

module.exports = {
  entry: {
    index:'index.js'
  }
}

module.exports = {
  entry: {
    index:['index.js','app.js'],
    vendor: 'vendor.js'
  }
}

2.2 Output

• 打包成的文件( bundle )
• 一个或多个
• 自定义规则
• 配合 CDN

module.exports = {
  entry: 'index.js',
  output: {
    filename: 'index.min.js'
  }
}

module.exports = {
  entry: {
  index: 'index.js',
  vendor: 'vendor.js'
  },
  output: {
    filename: '[name].min[hash:5].js'
  }
}

2.3 Loaders

• 处理文件
• 转化为模块

module.exports = {
  module: {
    rules: [
    {
      test: /\.css$/,
      use: 'css-loader'
    }
    ]
  }
}

2.3.1 常用 Loader

编译相关

• babel-loader
• ts-loader

样式相关

• style-loader
• css-loader
• less-loader
• postcss-loader

文件相关

• file-loader
• url-loader

2.4 Plugins

• 参与打包整个过程
• 打包优化和压缩
• 配置编译时的变量
• 极其灵活

module.exports = {
 plugins: [
  new webpack.optimize.UglifyJsPlugin()
 ]
}

2.4.1 常用 plugins

优化相关

• CommonsChunkPlugin
• UglifyJsWebpackPlugin

功能相关

• ExtractTextWebpackPlugin 提取 css
• HtmlWebpackPlugin 生成 HTML 模板
• HotModuleReplacementPlugin 热模块替换
• CopyWebpackPlugin 拷贝文件

2.5 名词

• Chunk 打包过程分割的代码块
• Bundle 打包后的文件
• Module