简介
开发时，我们会使用框架（react，vue）,ES6模板语法，Less/Sass等css预处理器等语法进行开发，这样的代码必须经过编译成浏览器能识别的js,css等语法才能运行，所以我们需要打包工具，除此之外，打包工具还能压缩代码，做兼容性处理，提高代码性能等功能
常见打包工具：Grunt Gulp Webpack Vite
其中，webpack是使用最广，功能最强大，最受欢迎的
webpack：是一个静态资源打包工具
它会以一个或多个文件作为打包的入口，将我们整个项目所有文件编译组合成一个或多个文件输出出去，输出文件可以在浏览器中运行了。
我们将webpack输出的文件叫做bundle。
功能介绍
webpack的模式：
开发模式：只能编译js中的ES Module语法
生产模式：能编译和压缩js中的ES Module语法
使用
1.目录结构
webpack项目根目录下
src 项目源码目录
- js文件目录（里面存放各种js文件）
- main.js项目主文件
2.解析文件
1.先初始化包描述文件,在项目根目录下运行命令
npm init -y生成package.json文件，包描述文件
2.安装webpack包和webpack-cli(webpack的指令文件，后面可以使用npx指令)运行命令
npm i webpack webpack-cli -Dnpm： 是包管理文件，下载保存更新之类功能
npx：是将node_modules中的包替换为环境变量
3.npx指定打包的入口文件和打包模式--mode
npx webpack ./src/main.js --mode=developmentwebpack默认将文件打包输出到dist目录下
4.将html中引入打包后的js文件即dist目录下的.js文件
<script src="../dist/main.js"></script>基本配置
1.核心概念
1.entry(入口)：指定webpack从哪个文件开始打包
2.output(输出):指定webpack打包后的文件输出到哪里，如何命名
3.loader(加载器):webpack本身只能处理js，json等文件，其他文件或者资源需要借助loader才能解析
4.plugins(插件）扩展webpack的功能
5.mode（模式)主要有两种模式：
- 开发模式：development
- 生产模式：production
2.配置文件
一般在项目的根目录下创建webpack.config.js文件，运行webpack命令会自动找到该配置文件，所以配置名称不能出错。
webpack.config.js文件
const path=require('path')
module.exports = {
//入口
entry:"./src/main.js",//必须是相对路径
//entry:{//多入口文件，打包之后也会生成多个对应文件
//app:"./src/app.js",
//main:"./src/main.js",
//0}
// 输出
output: {
// 文件输出路径
path: path.resolve(__dirname, "dist"),//绝对路径
// 文件名
filename:"main.js"
//filename:"[name].js"//webpack命名方式，[name]以文件名自己名字命名
},
// 加载器
module: {
rules: [
//loader配置
]
},
// 插件
plugins: [
//插件的配置
],
// 模式
mode:"development",
}此时自需要运行
npx webpack不需要运行
npx webpack ./src/main.js --mode=development3.开发模式
开发模式就是程序员开发时的模式，主要做两件事：
1.编译代码使浏览器识别
2.代码质量检查，代码格式规范
loader加载器
处理样式资源
webpack本身不能识别样式资源，所以我们需要借助loader来解析样式资源，可在官方文档：Loaders | webpack 中文文档 | webpack 中文文档 | webpack 中文网下找到对应的加载器。
style-loader和css-loader 使用
1.在src目录下的css文件夹下创建css文件，再入口文件main.js中引入
// 想要webpack打包资源，必须在入口文件下引入该资源
import "./css/index.css"2.安装 style-loader：
npm install --save-dev style-loader
style-loader与 css-loader 一起使用,所以要下载两个包
npm install --save-dev css-loader
然后把 loader 添加到你的webpack配置中。
webpack.config.js
// 加载器
module: {
rules: [
//loader配置
{
test: /\.css$/i,//test的意思是只检测.css文件
use: [//执行顺序,从右到左，或从下到上
"style-loader",//将js通过创建style标签添加html文件中生效
"css-loader"//将css资源编译生成commonJs的模块到js中
],
},
]
},less加载器
1.在src目录下的less文件夹下创建less文件，再入口文件main.js中引入
// 想要webpack打包资源，必须在入口文件下引入该资源
import "./less/index.less"2.安装less-loader：
npm install less less-loader --save-dev然后把 loader 添加到你的webpack配置中。
webpack.config.js
rules: [
{
test: /\.less$/i,
use: [
'style-loader',
'css-loader',
'less-loader', //将less编译成css
],
},
],scss/sass加载器
1.在src目录下的scss文件夹下创建scss文件，再入口文件main.js中引入
// 想要webpack打包资源，必须在入口文件下引入该资源
import "./scss/index.scss"2.安装less-loader：
npm install sass-loader sass webpack --save-dev然后把 loader 添加到你的webpack配置中。
webpack.config.js
rules: [
{
test: /\.s[ac]ss$/i,
use: [
// 将 JS 字符串生成为 style 节点
'style-loader',
// 将 CSS 转化成 CommonJS 模块
'css-loader',
// 将 Sass 编译成 CSS
'sass-loader',
],
},
],stylus加载器
1.在src目录下的stylus文件夹下创建stylus文件，再入口文件main.js中引入
// 想要webpack打包资源，必须在入口文件下引入该资源
import "./stylus/index.styl"2.安装less-loader：
npm install stylus stylus-loader --save-dev然后把 loader 添加到你的webpack配置中。
webpack.config.js
rules: [
{
test: /\.styl$/,
// loader: "stylus-loader", // 将 Stylus 文件编译为 CSS
use: [
// 将 JS 字符串生成为 style 节点
'style-loader',
// 将 CSS 转化成 CommonJS 模块
'css-loader',
// 将 Sass 编译成 CSS
"stylus-loader",
],
},
],处理图片资源
处理图片资源不需要加载器，需要在配置文件中配置范围类型，引用图片文件即可图片文件
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: 'asset/resource',
parser: {
dataUrlCondition: {
//小于10kb的图片转base64
//优点：减少请求的数量，缺点体积会变大
maxSize: 10 * 1024, //10kb
}
}
},修改文件输出目录
修改js文件
// 输出
output: {
// 所有文件输出路径
path: path.resolve(__dirname, "dist"), //绝对路径
// 文件名
// filename: "main.js"
filename: 'static/js/main.js',
clear: true //清空上一次打包的内容
},2.修改图片资源输出位置
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: 'asset/resource',
parser: {
dataUrlCondition: {
//小于10kb的图片转base64
//优点：减少请求的数量，缺点体积会变大
maxSize: 10 * 1024, //10kb
}
},
generator: {
//输出图片名称
// hash代表图片的名称，hash:10代表只取前十位，ext代表拓展名，query一般指url携带的参数
filename: 'static/images/[hash][ext][query]'
}
},处理字体图标资源
不需要加载器，只需配置加载器即可
{
test: /\.(woff|woff2|eot|ttf|otf)$/i,
type: 'asset/resource',
generator: {
//输出图片名称
// hash代表图片的名称，hash:10代表只取前十位，ext代表拓展名，query一般指url携带的参数
filename: 'static/medias/[hash:10][ext][query]',
},
},处理其他资源
只需要在字体图标配值中添加后缀名验证即可
{
test: /\.(woff|woff2|eot|ttf|otf|map4|avi)$/i,
type: 'asset/resource',
generator: {
//输出图片名称
// hash代表图片的名称，hash:10代表只取前十位，ext代表拓展名，query一般指url携带的参数
filename: 'static/medias/[hash:10][ext][query]',
},
},处理js资源
- 针对js的兼容性处理，使用babel来完成
- 针对代码格式使用Eslint来完成
- 先完成Eslint再由babel做兼容处理
Eslint
可组装的JavaScript和jsx检查语法工具，即可以监测js和jsx(react就是jsx语法）语法工具，可以配置规则来设置各项功能
1.配置文件
配置文件有很多种写法：
- .eslintrc*
- .eslintrc.js
- eslintrc.json
区别在于配置格式不一样。另外这些文件需要新建，或者在package.json中的eslintConfig:不需要创建，在原有的基础上ESlint会读取它们，所以以上文件存在一个即可。
2.具体配置
我们以.eslintrc.js配置文件为例：
module.exports = {
// 解析选项
parserOptions: {},
// 具体检查规则
rules: {},
// 继承其他规则
extends: [],
// ...
// 其他规则详见：https://eslint.bootcss.com/docs/user-guide/configuring
};1.parseOptions解析选项
parserOptions: {
ecmaVersion: 6, // ES 语法版本
sourceType: "module", // ES 模块化
ecmaFeatures: { // ES 其他特性
jsx: true // 如果是 React 项目，就需要开启 jsx 语法
}
}2.rules的配置规则
rules里面的属性值：
- "off "或
0表示关闭规则 - "warn "或
1- 开启规则，使用警告级别的错误："warn" (不会导致程序退出) 'error'或2- 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)
rules: {
semi: "error", // 禁止使用分号
'array-callback-return': 'warn', // 强制数组方法的回调函数中有 return 语句，否则警告
'default-case': [
'warn', // 要求 switch 语句中有 default 分支，否则警告
{ commentPattern: '^no default$' } // 允许在最后注释 no default, 就不会有警告了
],
eqeqeq: [
'warn', // 强制使用 === 和 !==，否则警告
'smart' // https://eslint.bootcss.com/docs/rules/eqeqeq#smart 除了少数情况下不会有警告
],
}3.extends 继承
开发中一点点写 rules 规则太费劲了，所以有更好的办法，继承现有的规则。
现有以下较为有名的规则：
- Eslint 官方的规则open in new window：
eslint:recommended - Vue Cli 官方的规则open in new window：
plugin:vue/essential - React Cli 官方的规则open in new window：
react-app
// 例如在React项目中，我们可以这样写配置
module.exports = {
extends: ["react-app"],
rules: {
// 我们的规则会覆盖掉react-app的规则
// 所以想要修改规则直接改就是了
eqeqeq: ["warn", "smart"],
},
};Eslint的使用
安装
eslint是插件，需要安装才能使用。安装 eslint-webpack-plugin
npm install eslint-webpack-plugin --save-dev注意: 如果未安装eslint>=7 ，你还需先通过 npm 安装：
npm install eslint --save-dev然后把插件添加到你的 webpack 配置。例如：
const ESLintPlugin = require('eslint-webpack-plugin');//导入eslint插件模块
module.exports = {
//plugins: [new ESLintPlugin(options)],第一种形式
new ESLintPlugin({
context:path.resolve(__dirname,'src')//指定检测那些文件，此时必须在根目录下创建eslint配//置文件
})
};忽略某些文件
.eslintignore文件：在项目根目录下创建
dist/js //不检查dist目录js目录下的文件
dist//不检查dist目录Babel
JavaScript 编译器：主要用于将 ES6 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境
配置文件
在根目录下多种写法：
- babel.config.js
- babel.config.json
- babelrc
- babelrc.js
- babelrc.json
在package.json中的Babel会在原有的基础上找到它们，所以以上配置文件只需保存一个即可。
具体配置
我们以babel.config.json为例：
module.exports = {
// 预设
presets: [],
};perset预设简单理解：就是一组 Babel 插件, 扩展 Babel 功能
- @babel/preset-env: 一个智能预设，允许您使用最新的 JavaScript。
- @babel/preset-react：一个用来编译 React jsx 语法的预设
- @babel/preset-typescript：一个用来编译 TypeScript语法的预设
babel的使用
1.安装
要下载三个包
npm install -D babel-loader @babel/core @babel/preset-env webpack2.在webpack.config.json中使用(第一种方式)
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/, // 排除node_modules代码不编译，因为node_modules是第三包已经处理过了，如果在处理太慢了
loader: "babel-loader",
options:{
preset:["@babel/preset-env"]//能够编译es6语法
}
}
],
}3.在根目录下的新建文件
module.exports = {
preset:["@babel/preset-env"]
}处理html资源
html中会引入main.js文件，但在实际开发中会引入大量的文件，一个个引入太麻烦了，所以可以使用html插件自动引入
使用
1.安装
npm install --save-dev html-webpack-plugin2.配置文件
该插件将为你生成一个 HTML5 文件， 在 body 中使用 script 标签引入你所有 webpack 生成的 bundle。 只需添加该插件到你的 webpack 配置中
这将会生成一个包含以下内容的 dist/index.html 文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>webpack App</title>
</head>
<body>
<script src="index_bundle.js"></script>
</body>
</html>自动化和服务器
每次写完代码都需要手动输入指令才能编译代码，太麻烦，我们希望一切自动化
搭建开发服务器
1.安装
npm i webpack-dev-server -D2 .配置文件
在webpage.config.json中配置
module.exports = {
// 开发服务器
devServer: {
host: "localhost", // 启动服务器域名
port: "3000", // 启动服务器端口号
open: true, // 是否自动打开浏览器
},
mode: "development",
};3.输入指令变化
现在要开启服务器，所以打包指令变为：
npx webpack server生产模式
当目录中存在生产模式和开发模式的配置文件时，可以用以下命令打开开发模式
npx webpack server --config .\webpack.dev.js此时需要在开发环境下的配置文件中修改
module.exports = {
//入口
entry: "./src/main.js", //必须是相对路径
// 输出
output: {
// 所有文件输出路径
// clear: true, //清空上一次打包的内容
// path: path.resolve(__dirname, "dist"), //绝对路径
// 开发模式没有输出，故可以是undefined
path: undefined,
// 文件名
// 但是需要指定入口文件路径
filename: 'static/js/main.js',
},
}生产模式下的配置
const path = require('path')
const ESLintPlugin = require('eslint-webpack-plugin'); //导入eslint插件模块
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 生产模式的配置
module.exports = {
//入口
entry: "./src/main.js", //必须是相对路径
// 输出
output: {
// 所有文件输出路径
// clear: true, //清空上一次打包的内容
path: path.resolve(__dirname, "dist"), //绝对路径
// 文件名
// filename: "main.js"
filename: 'static/js/main.js',
},
// 加载器
module: {
rules: [
//loader配置
{
test: /\.css$/i, //test的意思是只检测.css文件
use: [ //执行顺序,从右到左，或从下到上
"style-loader", //将js通过创建style标签添加html文件中生效
"css-loader", //将css资源编译生成commonJs的模块到js中
],
},
{
test: /\.less$/i,
use: [
'style-loader',
'css-loader',
'less-loader', //将less编译成css
],
},
{
test: /\.s[ac]ss$/i,
use: [
// 将 JS 字符串生成为 style 节点
'style-loader',
// 将 CSS 转化成 CommonJS 模块
'css-loader',
// 将 Sass 编译成 CSS
'sass-loader',
],
},
{
test: /\.styl$/,
// loader: "stylus-loader", // 将 Stylus 文件编译为 CSS
use: [
// 将 JS 字符串生成为 style 节点
'style-loader',
// 将 CSS 转化成 CommonJS 模块
'css-loader',
// 将 Sass 编译成 CSS
"stylus-loader",
],
},
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: 'asset/resource',
parser: {
dataUrlCondition: {
//小于10kb的图片转base64
//优点：减少请求的数量，缺点体积会变大
maxSize: 10 * 1024, //10kb
}
},
generator: {
//输出图片名称
// hash代表图片的名称，hash:10代表只取前十位，ext代表拓展名，query一般指url携带的参数
filename: 'static/images/[hash:10][ext][query]'
},
},
{
test: /\.(woff|woff2|eot|ttf|otf|map4|avi)$/i,
type: 'asset/resource', //asset/resource表示文件不改变，之前什么样打包之后就什么杨
generator: {
//输出图片名称
// hash代表图片的名称，hash:10代表只取前十位，ext代表拓展名，query一般指url携带的参数
filename: 'static/medias/[hash:10][ext][query]',
},
},
]
},
// 插件
plugins: [
//插件的配置
// 插件都是构造函数需要用new来创建实例使用
new ESLintPlugin({
context: path.resolve(__dirname, 'src') //指定检测那些文件，此时必须在根目录下创建eslint配置文件
}),
new HtmlWebpackPlugin({ //处理html资源
template: path.resolve(__dirname, 'public/index.html') //template属性：以public/index.html文件创建新文件，
// 新文件的模板结构和index.html文件一致，并且自动引入js文件
})
],
// 生产模式没有开发服务器,不会输出文件，
// devServer: {
// static: './dist', //指定服务器在哪里找文件
// host: "localhost", // 启动服务器域名
// port: "3000", // 启动服务器端口号
// open: true, // 是否自动打开浏览器
// },
// 模式为production
mode: "production",
}生产模式运行的打包指令
npx webpack --config .\webpack.prod.js生产配置和开发配置也可以放在一个文件夹里，比如config,此时配置文件中的绝对路径都要向上移一层。
比如：
output: {
// 所有文件输出路径
// clear: true, //清空上一次打包的内容
path: path.resolve(__dirname, "../dist"), //绝对路径
// 文件名
// filename: "main.js"
filename: 'static/js/main.js',
},打包命令也改为：
npx webpack --config .\config\webpack.prod.js也可以在package.json文件中的script节点下设置打包命令
"scripts": {在package.json文件中配置打包命令，如下：，
"start": "npm run dev",npm run dev和npm run start 是一样的打包命令，一般为开启本地服务器
"dev": "webpack serve --config ./config/webpack.dev.js",
"bulid": "webpack --config ./config/webpack.prod.js"，npm run bulid则为生产包
},处理css资源
1.提取css文件为单独文件
目的：解决闪屏的问题，将css文件提取出来压缩，然后再用link引入
1.安装插件
npm i mini-cssextract-plugin -D2.配置
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const path = require('path')
function getStyleLoader(str) {//因为所有的css文件都需要提取出来，可以配置一个函数返回
return [
MiniCssExtractPlugin.loader, //将css文件单独提取出来
"css-loader",
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
[
'postcss-preset-env', //用于解决css样式兼容性问题，还需要再package.json文件中配置browseList来指定兼容那些样式
],
],
}
}
},
str
].filter(Boolean)
}
module.exports = {
// 入口文件
entry: './src/main.js', //相对路径
// 输出文件
output: {
path: path.resolve(__dirname, '../dist'), //绝对路径,代表全部文件的路径
filename: 'js/main.js', //指定打包入口文件的地址
clean: true //打包文件之前将dist文件夹清空
},
//加载器
module: {
rules: [
//load加载器
{
test: /\.css$/i,
use: getStyleLoader()
},
{
test: /\.less$/i,
use: getStyleLoader('less-loader')
}
]
},
// 插件
plugins: [
new HtmlWebpackPlugin({ //作用：自动打包.html文件,新文件的特点：1.结构和原来一致，2.自动引入打包文件
template: path.resolve(__dirname, '../public/index.html')
}),
new MiniCssExtractPlugin({
filename: 'static/css/index.css' //将css文件单独提取出来并命名为index.css
}) //将css文件单独提取出来
],
mode: 'production',
}2.解决css样式冲突的问题
1.安装插件
npm i postcss-loader postcss postcss-preset-env -D
// postcss-preset-env智能预设来解决兼容性问题2.配置
module: {
rules: [
//load加载器
{
test: /\.css$/i,
use: MiniCssExtractPlugin.loader, //将css文件单独提取出来
"css-loader",
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
[
'postcss-preset-env', //用于解决css样式兼容性问题，还需要再package.json文件中配置browseList来指定兼容那些样式
],
],
}
}
},
},
{
test: /\.less$/i,
use: MiniCssExtractPlugin.loader, //将css文件单独提取出来
"css-loader",
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
[
'postcss-preset-env', //用于解决css样式兼容性问题，还需要再package.json文件中配置browseList来指定兼容那些样式
],
],
}
}
},
},还需要在package.json文件中的browseList节点中配置需要做到什么程度的匹配
如：
"browseList": [
"ie>=8"
]3.压缩css文件
1.下载插件
npm install css-mininizer-webpack-plugin -D2.配置
const CssMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin')
module.exports = {
plugins: [
new CssMinimizerWebpackPlugin() //压缩css文件
],
mode: 'production',
}webpack的高级应用
sourceMap
sourceMap:是一个用来源代码与构建后代码——映射文件的方案，他会生成一个xxx.map文件，
它会包含源代码和构建后的代码每一行和每一列的映射关系，构建后的代码出错就会映射到源代码出错的位置，可以帮助我们有效的找到报错的根源.
cheap-module-source-map优点：打包编译速度快，只包含行映射，没有列映射，一般用在开发环境。
在开发环境下只需要配置：
module.exports = {
devtool: 'cheap-module-source-map'
// sourceMap:是一个用来源代码与构建后代码——映射文件的方案，他会生成一个xxx.map文件，
// 它会包含源代码和构建后的代码每一行和每一列的映射关系，构建后的代码出错就会映射到源代码出错的位置，可以帮助我们有效的找到报错的根源.
// cheap-module-source-map优点：打包编译速度快，只包含行映射，没有列映射，一般用在开发环境
// source-map优点：包含行列映射，导报速度慢，有能够用于生产环境
}source-map优点：包含行列映射，导报速度慢，有能够用于生产环境
在生产环境下配置：
module.exports = {
mode: 'production',
devtool: "source-map"
}HotModuleReplacement提升打包构建速度
只需要在devServer节点中配置
module.exports = {
devServer: {
host: "localhost", //启动服务器域名
port: '3000', //启动服务器端口号
open: true, //是否开启浏览器
hot: true, //开启HMR,它应用在开发环境，只会检测改变的文件，而不是整个文件，然后修改该文件,在实际开发中会使用loader
// ，如：vue项目中使用vue- loader
},
}也可以在main.js文件中引入限制
if (module.hot) {
//判断是否支持热模块替换功能
module.hot.accept("./js/sum.js")
module.hot.accept("./css/index.css")
}oneof提升打包速度
作用：只对其中一个合适的loader进行配置，改进了以前挨个配置的缺陷，提升打包速度，生产环境和开发环境都可以使用
只需要配置：
const { ESLint } = require('eslint')
const ESLintWebpackPlugin = require('eslint-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path')
module.exports = {
//加载器
module: {
rules: [
//load加载器
{
oneOf: [
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
},
{
test: /\.less$/i,
use: [
// compiles Less to CSS
'style-loader',
'css-loader',
'less-loader',
],
},
{ //处理图片资源
test: /\.(png|jpe?g|gif|webp|svg)$/,
type: 'asset', //asset表示文件会转成base64,asset/resource
parser: {
dataUrlCondition: {
maxSize: 10 * 1024 // 小于10kb的图片资源转为base64,优点：减少请求数量，缺点：体积会增加
}
},
generator: {
filename: 'static/images/[hash:10][ext][query]'
}
},
{ //处理字体图标资源
test: /\.(ttf|woff|woff2)$/,
type: 'asset/resource', //asset表示文件会转成base64,asset/resource
parser: {
dataUrlCondition: {
maxSize: 10 * 1024 // 小于10kb的图片资源转为base64,优点：减少请求数量，缺点：体积会增加
}
},
generator: {
filename: 'static/media/[hash:10][ext][query]'
}
},
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
// options: {//预设;表示将文件转为浏览器所能识别的,也可以在babel配置文件中配置
// presets: ['@babel/preset-env']//智能预设，能识别最新的javascript
// }
}
}
]
}
]
}
}include和exclude
用于指定处理的文件和不处理的文件，一般放在loader中使用，可以放在生产环境和生产环境
配置：
module.exports = {
//加载器
module: {
rules: [
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/, //排除node_modules下的模块
// 或者：exclude:'node_modules'默认值
include: path.resolve(__dirname, '../src'), //只处理src下的文件
use: {
loader: 'babel-loader',
// options: {//预设;表示将文件转为浏览器所能识别的,也可以在babel配置文件中配置
// presets: ['@babel/preset-env']//智能预设，能识别最新的javascript
// }
}
}
]
},
}Cache
每次打包时，js文件都要经过eslint检查和Babel编译，速度较慢，我们可以缓存之前的结果，这样第二次打包就会更快。
只需要在webpack.json文件的eslint的插件中配置：
plugins: [
new ESLintWebpackPlugin({
context: path.resolve(__dirname, '../src'),//context 指定要检查的文件
cache:true,//开启缓存
cacheLocation: path.resolve(__dirname, "../node_modules/.cache/eslintcache") //指 定缓 存文件的地址
})
]Thread多进程打包
当项目越来越大的时候，需要我们提升打包速度，这时候可以开启电脑的多进程来做同一件事。速度更快。
下载包：
npm install thread-loader -D获取cpu的数量
const os = require('os')
const threads = os.cpus().length; //获取cpu的个数
const TerserWebpackPlugin=require('terser-webapck-plugin')
减少体积的方式
压缩图片的体积
多入口文件
按需加载：
import "./css/index.css"
import "./less/index.less"
import "./css/iconfont.css"
console.log(sum(1, 2, 1, 2))
if (module.hot) {
//判断是否支持热模块替换功能
module.hot.accept("./js/sum.js")
module.hot.accept("./css/index.css")
}
document.querySelector('.btn').onclick = function() {
//按需加载,webpackChunkName给打包文件重命名
import (/*webpackChunkName:"math"*/'./js/sum').then(res => {
sum(1,2,3)
console.log(res)
})
.catch(err => {
console.log(err)
})
}4
·
166
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
