1.Entry

  1. Entry 代码入口-打包入口-单个或多个
  2. module.exports ={
  3.     entry:{
  4.         index:'index.js'
  5.     }
  6. }

2.Output

  1. //打包成的文件(bundle)
  2. module.exports ={
  3.     entry:{
  4.         index:'index.js',
  5.         vendor:'vendor.js'
  6.     },
  7.     output:{
  8.         filename:'[name].min.[hash:5].js'
  9.     }
  10. }

3.Loaders

  1. 处理文件
  2. 转化为webpack可以认识的模块
  4. module.exports = {
  5.     module:{
  6.         rules:[
  7.             {
  8.                 test:'/\.css$/',
  9.                 use:'css-loader'
  10.             }
  11.         ]
  12.     }
  13. }

常用的loader

编译相关

  1. babel-loader ts-loader

样式相关

  1. style-loader,css-loader,less-loader,postcss-loader

文件相关

  1. file-loader,url-loader

4.Plugins

  1. #- 参与打包整个过程 - 打包优化和压缩 - 配置编译时的变量
  3. const webpack = require('webpack'); 
  4. module.exports = {
  5.   plugins:[
  6.     new webpack.optimize.UglifyJsPlugin()
  7.   ]
  8. } 
  9. 常用的Plugins
  10. 优化相关
  11.     - CommonsChunkPlugin     - UglifyjsWebpackPlugin 
  12. 功能相关
  13.     - ExtractTextWebpackPlugin     - HtmlWebpackPlugin     - HotModuleRepalcementPlugin     - CopyWebpackPlugin
  15. 名词解释
  16. chunk -->代码块
  17. Bundle-->被打包后的代码
  18. Module -->模块