webpack打包逻辑代码分离优化 (SplitChunksPlugin)

瑞晟技术服务中心-耿瑞

已于 2022-01-30 09:37:51 修改

阅读量702

点赞数 4

文章标签： webpack javascript 前端

于 2022-01-28 11:20:29 首次发布

本文链接：https://blog.csdn.net/weixin_45966674/article/details/122727889

版权

webpack打包如果js代码特别多就会打包出一个特别大的js
那么我们需要将js代码分离成多个js文件引入
从而控制文件大小优化性能
先在终端输入

npm init

按终端提示操作就会生成一个项目出现一个package.json文件
在终端输入

npm install webpack webpack-cli --save-dev

会生成这样的目录
在这里插入图片描述
然后为了更好的查看代码效果我们引入html-webpack-plugin

npm install html-webpack-plugin --save

然后在根目录中构建src文件夹
在src下创建HelloWebpack.js
HelloWebpack.js参考代码如下

console.log('hello webpack');

在src下创建HelloWorld.js
HelloWorld.js参考代码如下

console.log('hello world');

在src下创建index.html
index.html参考代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

在根目录下创建webpack.config.js
webpack.config.js参考代码如下

//通过node获取到当前文件的位置
const path = require('path')
//导入刚引入的第三方插件html-webpack-plugin
const HtmlWebpackPplugin = require('html-webpack-plugin')
module.exports = {
    //设置当前入口文件
    entry: {
        HelloWebpack: './src/HelloWebpack.js',
        HelloWorld: './src/HelloWorld.js'
    },
    //出口配置
    output: {
      //打包的文件名
      filename: '[name].bundle.js',
      //生成的文件位置
      path: path.resolve(__dirname, './distribution')
    },
    mode: 'none',
    //webpack插件配置
    plugins: [
      //实例化html-webpack-plugin插件功能
      new HtmlWebpackPplugin({
        //html-webpack-plugin参数配置
        //指定打包HTML文件参照的模板HTML
        template: './src/index.html',
        //生成的html文件名称
        filename: 'app.html',
        //定义打包的js文件引入在新html的哪个标签里
        inject: 'head'
      })
    ],
    optimization:{
    //分离配置
      splitChunks: {
      //将相同的公共模块代码分离出来
        chunks: 'all'
      }
    }
}