1. 4.0版本webapck-cli 已经拿出来了 单独下载
2. 开发时优化 Dllplugin 动态链接库
happPack 提升打包速度 抽离出我们常用的包
3.打包后优化
treeshaking 删除没有用的
webpack 4 自动实现
作用域提升
__direname
html-webpack-plugin
plugins:[
newHtmlWebpackPlugin({
})
]
babel-loader
babel-core被取代 @babel/core@7 . @babel/preset-env
@preset-react
module 里面放规则
如果不新建.babelrc的话必须在module里面写option配置
reacts 自动生成react结构
mode:development
exclude 不进行babel:/node_modules/
include 只包含某一个目录
把react 和react-dom先打包好,在开发的时候引用打包好的文件
output里面
librry:'b'
变量控制 b 作为module.export的引用变量
libraryTarget:"commonjs"// global
exports['b']=(function(){})
window['b']
单独打包:
react react-dom
entry:{
react:["react","react-dom"]
// react是自己起的名字
}
output:{
library:'"[name]_dll",
// 必须起变量接收 否则index.html拿不到变量
filename:'dll.js'
// 这个name 就是react
}
let DllPlugin = require('webpack/lib/DllPlugin')
plugins:[
new DllPlugin({
"name":"[name]_dll",
path:path.resolve(__dirname,"dist","[name].mainfest.json")
})
]
生成dll.js 和mainfest.json 映射关系
mainfest.json
"name":"react_dll"
"content":"node_modules" 模块中找到对应的文件
index.html 单独引入react-dom
<script src="./dill.js"></script>
devServer:{
contentBase:"./dist"
}
// 来自dist下的dll.js
先把包打好了 以后不再打了
由一个个的打包 变成并行打包
happyPack 多线程
小项目降低打包速度
项目大的话 使用happyPack
let happPack = requrie('happyPack')
rules:[
{
use:"happypack/loader?id=xxx"
},
{
use:"happypack/loader?id=css"
}
]
plugins:[
new HappyPack({
id:"xxx",
use:['babel-loader']
})
]
多线程使用
js单线程 启用子进程
打包过程treeshaking
mode:"production"//内部调用uglifyjs tree shaking 4.0版本支持
antd 。 babel-plugin-import
import {Button}from 'antd'
exports.a =
node 写法动态引用不会treeshaking
require('./a')
不会treeshaking
treeshaking 适合es6语法
package.json 中配置
“build”:"webapck --display-used-exports"
导出时展示哪些用到了哪些没用到
重复代码的提取
A B 两个页面都引入相同的部分
optimization:{
splitChunks:{
cacheGroups:{
// 缓存组
common:{
minChunks:2 至少两个文件使用,
minSize:0 有一个字符重复就拿出来
chunks:"initial"
},
vendor:{
chunks:"initial",
test:/node_modules/,
第三方的包 和自己的代码区分
minChunks:2,
minSize:0,
// 先走第三方 再走自己的
priority:10
}
}
}
}
entty:{
pageA:"./src/pageA.js",
pageB:"./src/pageB.js"
}
output:{
filename:"[name].js"
}
c文件只引用了jq
jq单独抽离出来 进行分离
let ModuleConcatenationPlugin = require('webapck/lib/ModuleConcatenationPlugin')
// 多个模块连接到一起
多个模块合并成一个闭包
export 和import的关系 变成了一个文件中var 变量的引用依赖
懒加载
spa路由
先渲染个空 等加载好再渲染这个组件 @babel/plugin-syntax-dynamic-import -D
// 4.0删除了
plugins:[]
首屏过慢
let Home=(props)=><AsyncComponent {...props} load = {()=>{
import ('./Home')
}}></AsyncComponent>
返回promise
// 执行父组件传递过来的数据func 并执行
this.props.load().then(res=>{
// this.setState({
// 执行加载后的的函数 替代原来的comp
})
})
需要在预设配置
"plugins":[
@babel/plugin-syntax/dynamic-import
]