webpack 入门1
一、准备工作
1.新建文件夹webpack-abc,进入
文件夹。
npm init -y
npm i webpack webpack-cli
webpack-dev-server
html-webpack-plugin
@babel/core
babel-loader
@babel/preset-env
@babel/preset-react -D
2.新建public目录-> index.html
3.执行一下
npx webpack
二、webpack优化时使用到的属性
1. noParse
module中的一个属性，作用：不去解析指定的库依赖，提高打包效率。
当 webpack去解析 jquery的时候，会去解析jquery这个库是否依赖其他的包。我们对于这类不会依赖其他包的库，我们在打包时没有必要去解析，提高打包效率。
npm i jquery -D
在 indexjs 中引入 import jquery from 'jquery';
exports = {
...
module: {
// 不解析
noParse: /jquery/,
rules: [
...
]
}
}然后执行 npx webpack看看,打包的大小。
各插件使用
2. IgnorePlugin
作用：忽略指定的第三方包目录，打包时不要被打进去。如我们要使用moment这个依赖库支持多个国家语言。
npm i moment -D
在indexjs中引入
import moment from'moment';
// 引入中文
import 'moment/locale/zh-cn';
moment.locale('zh-cn');
let tt = moment().endOf('day').fromNow(
console.log(tt)
在webpack.configjs中添加
// 插件
plugins:[
// 打包忽略掉./ocale/目录内容
new webpack.IgnorePlugin({
resourceRegExp:/^\.\/locale$/,
contextRegExp: /moment$/,
}),
new HtmIWebpackPlugin({
template:'./public/index.html',//页面模版
})
],
3. dllPlugin
这是webpack内置插件，实现了拆分bundles，提升构建速度。
举例，我们打包一个React项目,把一些不常改动的依赖包，如:react, react-dom, axios,antd等单
独打包好，然后以动态链接的方式引入即可。第二次打包时，就会发现这些包已经打包好了不需要再打包，这样可以提升性能。
4. tree-shaking、scope-hosting
这是生产环境下webpack的两个内置优化。
tree-shaking：自动去除import引入但没有使用的代码。
scope-hosting：提升作用域。如、累加和的直接加载结果。
5.抽离公共代码
webpack.configjs 使用optimization的splitChunks属性
module.exports ={
optimization:{
splitChunks:{ //如果只有一个入口就不用分离了；只有多页才需要公共的代码抽离出来。
common:{
chunks: 'initial',// 刚开始就要抽离
minSize: 0, //大小大于0字节的时候要抽离出来
minChunks: 2, //重复 2次使用的时候要抽离出来
}
}
}
}
6.懒加载，这里就是按需加载。
场景：点击按钮时候，需要动态加载xxjs，并读取该文件导出的内容。
// 使用语法动态导入插件
@babel/plugin-syntax-dynamic-import
打包的时候就会打成xxjs文件,然后按需去动态加载
import('./xx.js').then(data =>{
console.log(data.default)
})
7.热更新
热更新是指对数据变化的局部进行更新，而不进行页面刷新。
使用内置插件
NamedModulePlugin，作用：打印热更新的模块路径
使用内置插件
HotModuleReplacementPlugin,作用：热更新插件
let path = require('path')
let webpack = require('webpack')// 1.
let HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports ={
devServer:{
port: 300,
open: true,
contentBase:'./dist',
hot: true, // 2.启用热更新
},
...
plugin:[
new webpack.NamedModulePlugin(),
//打印热更新的模块路径
new webpack.HotModuleReplacementPlugin(),// 3.热更新插件
new HtmlWebpackPlugin({
template:'./src/index.html',
filename:'index.html',
})
]
}8.loader解析时，指定或者排除解析目录
exclude:不解析的目录,
include:解析的目录，两者写其一即可。
oneOf: 匹配到一个loader后面的就不继续匹配了。