Webpack的developement和production打包
1.developement和production打包的区别
- 在开发项目的时候使用的是development模式
- 在开发环境下SourceMap非常全，对我门代码的调试非常方便
- 开发环境下我们的代码不需要进行压缩
- 在development环境下，使用的是webpack中的devServer可以帮我们开启一个服务器，里面还有一些HMR
- 在生产的时候使用的是production模式
- 在线上环境，sourceMap非常简洁，它可以生产一个.map文件
- 生产环境下的代码都是被压缩过后的
2.Chunk是什么？
在webpack打包的过程中，生成了若干个js文件，每一个js文件都叫做一个Chunk
3.Lazy loading懒加载
懒加载并不是webpack的一个概念，而是es里的一个概念，提出一个import这样的语法。所以它和webpack本质上关系不大,webpack只不过能够识别出import这种语法，然后对它引入的模块进行代码分割
懒加载实际上就是import这种语法，可以让我们在代码执行时，需要某些模块时，再去请求某些模块的源代码，不需一次性加载页面上
async function getComponent(){
const {default:_}=await import(/webpackChunkName:"lodash"/ 'lodash')
const element=document.createElement("div")
element.innerHTML=_.join(['Dell', 'Lee'], '-')';
return element
}
document.addEventListener('click', ()=>{ //只有点击页面的时候才会运行代码
getComponent().then(element=>{
document.body.appendChild(element)
})
})
4.懒加载的好处
- 优化网页或应用的方式
- 加快了应用的初始加载速度
- 可以让页面加载速度1更快
- 减轻了他的总体体积
5.webpack的构建流程
- 启动构建，读取合并配置参数，加载Plugin 实例化Complier
- 编译，从entry发出，针对每个module进行调用对应的loader,翻译文件内容，找到module依赖的module,递归的进行编译处理
- 对编译后的module组合成chunk,把chunk转换成文件，输出到系统，如果只执行一次，以上阶段会按顺序各执行一次，
- 但在开启监听的模式下
- 每个大阶段中话发生很多事件，Webpack会把这些事件广播出来提供给Plugin使用，
6.webpack.config.js配置
1.入口配置
entry:{
filename:"./src/main.js"
},
output:{
filename:"bundle.js",
path:path.resolve(__dirname,"dist")
},
- module配置
module:{
rules:[ // 规则
{
test:/.(sass|scss)$/,
use:['style-loader','css-loader','sass-loader']
}
]
},
- 插件配置Plugins
plugins:[
new htmlWebpackPlugin({
filename:"index.html",
template:path.join(__dirname,"index.html")
})
],
- 使用vue
resolve: {
alias: {
'vue': 'vue/dist/vue.js'
}
},
