webpack核心:
常用的loader:
babel-loader、ts-loader
样式相关
style-loader、css-loader、less-loader、postcss-loader
文件相关
file-loader、url-loader
path.resolve() 方法会把一个路径或路径片段的序列解析为一个绝对路径
BroswersList需要兼容的浏览器 可以设置在package.jason或.browserslistrc
"browserslist":[">=1%","last 2 versions"]
babel:编译打包js(兼容)
babel-loader babel-core 编译es6,7,8
babel-preset 指定规范的版本,根据es兼容来编译js
babel-polyfill
babel-plugin-transform-runtime
常用的plugins:
优化相关
CommonsChunkPlugin、UglifyjsWebpackPlugin
功能相关
ExtractTextWebpackPlugin、HtmlWebpackPlugin、HotModuleReplacementPlugin、CopyWebpackPlugin
chunk:代码块
bundle:打包
提取公共代码的插件:
CommonsChunkPlugin: 是webpack内置的插件=> webpack.optimize.CommonsChunkPlugin只适合多entry的情况
配置(option):options.name or options.names 代码块的名称
options.filename 公共代码打包后的文件名
options.minChunks 如果是number公共代码出现的次数至少是多少,function自定义逻辑,Infinity
options.chunks 提起公共代码的范围
options.children 子模块中查找共同依赖
options.deepChildren
options.async 创建异步代码的公共代码流或块
代码分割和懒加载
分离业务代码和第三方依赖
分离业务代码和业务公共代码和第三方依赖
分离首次加载和访问后加载的代码
webpack内置方法require.ensure懒加载
[]:dependencies
callback
errorCallback
chunkName
require.include
style-loader添加style标签
style-loader/url link一个css文件
style-loader/userable 通过js方式控制css
style-loader的options:
insertAt(插入位置)
insertInto(插入到dom)
singleton(是否只使用一个style标签)
transform(转化,浏览器环境下,插入页面前)
css-loader的options:
alias(别名)
importLoader(@import)
Minimize(是否压缩)
modules(启用css-modules)
css-modules语法:
:local 本地的样式
:global 全局的样式
compose 集成一段样式
compose ... from path 从某个文件引入样式
localIdentName:'[path][name]——[local]--[hash:base64:5]'
提取CSS
extract-loader
extract-text-webpack-plugin插件
postcss-loader
Autoprefixer CSS兼容 加上前缀
CSS-nano 压缩优化CSS
CSS-next 使用CSS的新语法
use loader处理顺序是从后往前,如:
use:[
{
loader:'style-loader',
options: {
singleton: true,
transform:'./css.transform.js'
}
},
{
loader:'css-loader',
options: {
// minimize:true,
modules: true,
localIdentName:'[path][name]——[local]--[hash:base64:5]'
}
// loader:'file-loader'
},
{
loader:'postcss-loader',
options:{
ident: 'postcss-loader',
plugins: [require('autoprefixer')(),require('postcss-cssnext')(),require('postcss-sprites')({spritePath:'dist/assets/imgs/sprites',retina:true 清晰度@2x})]
}
},
{
loader:'less-loader'
}
]
Tree Shaking 去掉没有用到的代码 使用场景:常规优化,引入第三方库的某一个功能
(js):
require("webpack")
new Webpack.optimize.uglifyJsPlugin()
lodash tree shaking 需要使用babel-plugin-lodash
(css):
purify CSS
使用purifycss-webpack
options paths:glob.sync([]) 需要tree shaking的文件
图片处理
CSS中引入的图片 file-loader
自动合成的雪碧图 postcss-sprites
压缩图片 img-loader
options:{
pngquant:{
quality:80
}
}
base64编码 url-loader
字体文件处理file-loader url-loader
引入第三方JS库
webpack.providePlugin插件:new webpack.providePlugin({$:'jquery'})
imports-loader:{
loader:'imports-loader',
options:{
$:'jquery'
}
}
window
HTML in webpack
自动生成HTML
htmlWebpackPlugin
options
template 模板
filename 生成的文件名
minify:{collapseWhitespace} 压缩
chunks
inject 是否通过标签形式插入到HTML中
HTML中引入图片
html-loader:options:{
attrs:[img:data-src]
}
场景优化 提前载入webpack加载代码
inline-manifest-webpack-plugin(有bug)
html-webpack-inline-chunk-plugin
clean-webpack-plugin 清除之前生成的dist文件
new CleanWebpackPlugin(['dist'])
webpack搭建开发环境:
webpack watch mode ==> 只要在命令行中输入 webpack -watch 或 webpack -w
webpack-dev-server
live reloading 浏览器自动刷新
路径重定向
HTTPS
浏览器中显示编译错误
接口代理
模块热更新
devServer:{
inline 是否在页面上显示打包状态
contentBase 静态资源
port 监听的端口
historyApiFallback 路由重定向 如:
historyApiFallback:{
rewrites:[{from:/^\/(a-zA-Z0-9+\/?)([a-zA-Z0-9]+)/,to:function(context){return '/'+content.match[1]+content.match[2]+'.html'}}]
}
https 本地生成https证书
proxy 代理
options:{
target 代理地址
changeOrigin 是否改变源代理
headers 增加http请求的头,http协议相关 如Cookie
logLevel:'debug' 调试 代理的情况和信息
pathRewrite 请求重定向
}
hot 模块热更新(webpack.HotModuleReplacementPlugin)(webpack.NameModulesPlugin)
module.hot
module.hot.accept 自定义热加载内容
module.hot.decline
openpage 指定初始页面
lazy 懒模式
overlay 遮罩(编译错误提示)
}
Source Map调试 代码映射
Devtool:
Development:
eval 常规开启
eval-source-map
cheap-eval-source-map
cheap-module-eval-source-map *
Production:
source-map *
hidden-source-map
nosource-source-map
css要开启loader的sourcemap:
css-loader.options.sourcemap
less-loader.options.sourcemap
webpack.SourceMapDevToolPlugin
webpack.EvalSourceMapDevToolPlugin
express + webpack-dev-middleware搭建开发环境
Express or koa
webpack-dev-middleware
webpack-hot-middleware
http-proxy-middleware
connect-history-api-fallback
opn 打开浏览器的页面
esLint检查代码格式
eslint
eslint-loader
eslint-plugin-html
eslint-friendly-formatter
配置ESlint
webpack config
.eslintrc.*
package.json中的eslintConfig
开发环境webpack.dev.config.js
模块热更新
sourceMap
接口代理
代码规范检查
生产环境webpack.prod.config.js
提取公用代码
压缩混淆
文件压缩 base64编码
去除无用的代码
公共配置webpack-merge
同样的入口
同样的代码处理(loader处理)
同样的解析配置
webpack.common.config.js
打包结果分析
offical Analyse tool(官方)
命令行 webpack --profile --json | Out-file'stats.json' -Encoding OEM
webpack-bundle-analyzer
打包速度优化
一、分开vender和app.js
DllPlugin
DllReferencePlugin
二、UglifyJsPlugin 并行
parallel:true
cache
三、HappyPack 使loader并行
HappyPack.ThreadPool 线程
四、babel-loader
options.cacheDirectory 开启缓存
include 规定编译的文件
exclude 规定不需要编译的文件
减少resolve
Devtool:去除sourcemap
cache-loader
升级node
升级webpack
长缓存优化
场景一:改变app代码,vender变化
解决:提取vender
独立打包vender
抽出manifest(webpack runtime)
hash -> chunkhash
提取 webpack runtime
场景二:引入新模块,模块顺序变化,vendor hash变化
解决:NamedChunksPlugin,NamedModulesPlugin