Webpack 核心解析

Entry
Output
Loaders
Plugins
Mode

Entry

Entry用来指定webpack打包的入口
Entry有两种情况，一种是单入口文件，一种是多入口文件。

//单入口 字符串
module.exports={
    entry:'/path/xxxx.js',
}
//多入口 对象
module.exports={
    entry:{
      app:'./path/app.js',
    mobile:'./path/mobile.js'
  }
}

Output

output用于设置打包输出到磁盘中的信息。针对单入口和多入口文件，output有不同的设置

const path = require('path')
//针对单入口的output设置，为一个对象。包含filename和path，分别指定输出文件的名称和路径
module.exports={
    entry:'/path/xxxx.js',
  output:{
      filename:'xxx.js',
    path:_dirname+'/dist'
  }
  //_dirname 是相对路径 由require(path)获取到的
}
//针对多入口 output 不指定多个出口，通过占位符[name]保证输出不同的文件。和入口文件名相同
module.exports={
    entry:{
      app:'./path/app.js',
    mobile:'./path/mobile.js'
  },
  output:{
      filename:'[name].js',
    path:_dirname+'/dist'
  }
  //_dirname 是相对路径 由require(path)获取到的
}

Loaders

Webpack开箱可用的情况下，只支持json和js两种格式。但是实际项目中，需要处理不同的资源文件，比如png jpg 等图片类型，还有jsx scss less 等js和css框架格式。通过Loaders来实现对其他文件类型的支持。
Loaders本身是一个函数，接收源代码作为参数，返回目标的结果。
常用的Loaders，比如

Babel-Loader：转化ES6/7代码到ES5
Css-Loader：支持css文件的加载和解析
Less-Loader：支持.less文件并且转化为css
Ts-Loader：支持转化.ts代码为js代码
File-Loader：进行图片、字体等的打包
Raw-Loader：将文件以字符串的形式导入

Thread-Loader：多线程打包js css等文件

//Loaders的用法和格式
module.exports={
entry:'/path/xxxx.js',
output:{
 filename:'xxx.js',
path:_dirname+'/dist'
},
//module模块用来指定loaders。module有一个属性rules数组来在此处标志所有的loader
//每一个匹配对象中 用test表示文件格式 用use 指定解析该文件格式的loader
module:{
 rules:[
 {test:'/ \.txt$ /',use:'raw-loader'},
 ....
]
}
}

Plugins

Plugins主要是用来文件的优化、资源的管理和环境变量注入。
常见的Plugins:

CommonChunksPlugin：将chunks相同的目录提取到相同的js。比如多页面引用一个js文件，则把这个文件公共化
CleanWebpackPlugin：清理构建目录
ExtractTextWebpackPlugin：将css从bundle提出来构建单独css文件
HtmlWebpackPlugin：创建html文件去承载输出的bundle
UglifyjsWebpackPlugin：压缩js文件
ZipWebpackPlugin：将打出的包生成一个zip包
Mode
用来指定Webpack当前打包的环境，比如production、development还是none。设置mode可以使用webpack内置的函数，默认值是production

Entry

Output

Loaders

Plugins

Mode