webpack概述
英文官网：https://webpack.github.io/
中文官网：https://www.webpackjs.com/
webpack v3
Scope Hoisting (作用于提升)
打包以后代码性能的提升，并不是打包的提升，是打包后文件的性能的提升
Magic Comments（配合动态import使用）
指定打包以后的文件名叫什么
v1-v2
v2-v3
webpack核心概念
Entry
Output
Loadedrs
Plugins
1. Entry
a)代码的入口
某一段代码的代码入口，通过代码的入口直接或者间接的找到
b)打包的入口
c)单个或多个入口
eg:
module.exports = {
entry:'index.js'
}
数组
module.exports = {
entry:['index.js','vendor.js']
}
对象（推荐）
module.exports = {
entry:{
index:'index.js'，
vendor:'vendor.js'
}
}
2. Output
a)打包成的文件（bundle）
b)一个或多个
c)自定义规则
d)配合CDN
eg:
module.exports = {
entry: {
index:'index.js',
vendor:'cendor'
},
output: {
filename:'[name].min.[hash:5].js'
}
}
3.Loaders
处理文件
转化为模块
eg:
module.exports = {
module: {
rules: [
{
test:/\.css$/,
use:'css-loader'
}
]
}
}
常用Loader
编译相关
babel-loader、ts-loader
样式相关
style-loader、css-loader、less-loader、postcss-loader
文件相关
file-loader、url-loader
4.Plugins
a)参与打包整个过程
b)打包优化和压缩
c)配置编译时的变量
d)及其灵活
eg:
const webpack = require('webpack');
module.exports = {
plugins: [
new wbpack.optimize.UglifyJsPlugin()
]
}
常用的Plugins
优化相关
CommonsChunkPlugin 用来提取不同的Chunk之间提取相同的代码出来
UglifyjsWebpackPlugiin相当于混淆，压缩代码
功能相关
ExtractTextWebpackPlugin提取出单独的文件，单独打包
HtmlWebpackPlugin帮助生成HTML
HotModuleReplacementPlugin模块热更行
CopyWebpackPlugin帮你将项目中已经打包好的文件
相关名词
Chunk 代码块
Bundle说明已经打包后的代码
Module模块
