安装
在 node 环境下下载 webpack ，webpack-cli 两个包 webpack使用的是commonJs的规范
核心概念：
入口（entry）
如果传入的一个字符串或字符串数组，chunk会被命名为main。如果传入一个对象，则每个属性key会是chunk的名称，该属性的值描述了chunk的入口
用法：entry：string | [string]
webpack.config.js
//单个入口
module.exports = {
entry:'xxx.js'
}
也可以配置多个入口
//多个入口
module.exports = {
entry:['xxx1.js','xxx2.js']
output:{
filename:'bundle.js'
}
}
对象语法
用法：entry：{ string | [string]} | {}
如果传入的是一个对象，对象的属性值可以是一个字符串，字符串数组，或者一个描述符（descriptor），描述符语法可以用来传入额外的选项给入口
webpack.config.js
module.exports = {
entry:{
app:'xxx1.js',
adminApp:'xxx2.js',
//descriptor
personal:{
import:'xxx3.js',
filename:'output1.js',
//依赖引入
dependOn:'app',
//异步chunk
asyncChunks:true,
}
}
}
dependOn
默认情况下，每个入口的chunk保存了全部其用的模块，使用dependOn选项你可以与另一个入口chunk共享模块，上例中personal这个chunk就不会包含app的模块了
\
输出（output）
只能有一个出口
webpack.config.js
module.exports = {
//出口
output:{
//输出文件的名称
filename:'xxx.js'
//当多个入口起点的时候就需要借助占位符
//filenameL:'[name].js'
}
}
TODO:部分属性的补充
chunkFilename
publicPath
path
默认使用 [id].js 或从 output.filename中推断出的值（[name] 会被预先替换为 [id] 或者[id].）
webpack.config.js
output: {
path: PATHS.output,
// 生成chunkhash文件，这种格式文件在内容没有改变时候不会更新hash，有利于持久化缓存
chunkFilename: 'js/[name].[chunkhash:8].chunk.js'
},
// 结果可以参考模板的dist/js的文件输出名
clean（5.20.0+）
webpack.config.js
output: {
// 生成输出文件前清除output目录
clean:true
},
filename
此选项决定了每个输出bundle的名称。这些bundle将写入到output.path选项指定的目录下。对于单个入口起点，filename会是一个静态名称。
webpack.config.js
output: {
filename:'xxxx.js'
},
path
目录对应的一个绝对路径
webpack.config.js
const path = require('path')
module.exports = {
output:{
path:path.reslove(__dirname,'dist/assets')
}
}
publicPath
对于静态资源（图片，文件）和按需加载的资源这个选项很重要，他指定了资源访问的地址，包括CDN地址
webpack.config.js
const path = require('path')
module.exports = {
output:{
path:path.reslove(__dirname,'dist/assets'),
pubilcPath:'https://cdn.xxx.com/assets/',
}
}
规则如下：output.path中的URL以HTML页面为基准
loader
loader对模块的源码进行转化，例如TS-JS，less-css，内联图像转换为data URL，在JS模块中import CSS文件
loader的规则就是在require()/import语句中解析test所匹配的正则文件，在webpack编辑器打包之前先用use定义的loader转化一下
webpack.config.js
module.exports = {
//模块
module:{
//规则
rules:[
//css文件的规则
{
//正则匹配文件名
test:/.css%/,
//使用的loader
use:'css-loader'
}，
//ts文件的规则
{
test:'/.ts$/',
use:'ts-loader'
}
]
}
}
提示
1.webpack定义rules时要定义在module.rules
2.test的正则表达式是不需要加引号的，eg. /.txtt$/和"/.txtt$/"前者会去匹配所有的.txt结尾的文件，后者会去匹配具有绝对路径'.txt'的单个文件
3.loader从右到左（或者从下到上）取值和执行（队列形式）
插件（plugin）
插件的目的在于解决loader无法实现的其他事情
本质
webpack插件是一个具有apply方法的JS对象。apply方法会被webpack compiler（webpack编译器）调用，并且在整个编译生命周期都可以访问compiler对象
使用方法
webpack.js
const HtmlWebpackPlugin = require('html-webpack-plugin') //npm安装
module.exports = {
entry:'xxx.js',
output:{
filename:'my-first-webpack.bundle.js'
path:path.resolve(__dirname,'dist')
},
module:{
rules:[
{
test:/.(js|jsx)$/,
use:'babel-loader',
},
],
},
// 由于插件可以携带参数/选项，你必须在iwebpack的配置中，向plugins属性传入一个new实例
plugins:[
new HtmlWebpackPlugin({template:'./src/index.html'})
]
}
HtmlWebpackPlugin将生成一个HTML文件，并在其中使用script引入一个名为my-first-webpack.bundle.js的JS文件
