打包代码时会将所有 js 文件打包到一个文件中,体积太大了。如果只要渲染首页,就希望只加载首页的 js 文件,其他文件不应该加载。
所以将打包生成的文件进行代码分割,生成多个 js 文件,渲染哪个页面就只加载某个 js 文件,这样加载的资源就少,速度就更快。
使用代码分割(Code Split)可以解决这个问题
分割文件:将打包生成的文件进行分割,生成多个 js 文件。
按需加载:需要哪个文件就加载哪个文件。
创建新文件,多入口文件,使用对象表示
![](https://i-blog.csdnimg.cn/blog_migrate/8584f882d33191b62d0884b81e41e321.png)
![](https://i-blog.csdnimg.cn/blog_migrate/4c85210991b8757905e46457d95b5708.png)
![](https://i-blog.csdnimg.cn/blog_migrate/dc40493cfcf01931a549d630f0c832e3.png)
配置文件里面的内容
// webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
// 单入口
// entry: './src/main.js',
// 多入口
entry: {
main: "./src/main.js",//使用对象表示
app: "./src/app.js",
},
output: {
path: path.resolve(__dirname, "./dist"),
// [name]是webpack命名规则,使用chunk的name作为输出的文件名。
// 什么是chunk?打包的资源就是chunk,输出出去叫bundle。入口文件
// chunk的name是啥呢? 比如: entry中xxx: "./src/xxx.js", name就是xxx。注意是前面的xxx,和文件名无关。
// 为什么需要这样命名呢?如果还是之前写法main.js,那么打包生成两个js文件都会叫做main.js会发生覆盖。(实际上会直接报错的)
filename: "js/[name].js",
},
plugins: [
new HtmlWebpackPlugin({
template: "./public/index.html",//使用这个模块创建新文件
}),
],
mode: "production",
};
安装包-先初始化
npm init -y
npm i webpack webpack-cli html-webpack-plugin -D
多入口文件会生成多个文件
运行
npx webpack
输出了多个文件,配置了几个入口,至少输出几个 js 文件。
![](https://i-blog.csdnimg.cn/blog_migrate/9af481d7b4fa07aeee587d39c273cc20.png)