webpack当中的代码分割详解

A.代码分割方法一：将原来的单入口文件改为多入口文件

将不同的文件例如js代码文件分为入口文件和测试文件，这个时候打包出来的代码就会根据不同的文件单独打包成属于他们自己的文件

 例如以下为单入口文件:

entry: './src/js/index.js'

 多入口文件:(在输出的时候将输出的文件名进行分类)

 entry: {// 多入口：有一个入口，最终输出就有一个bundleindex: './src/js/index.js',test: './src/js/test.js'},output: {// [name]：取文件名filename: 'js/[name].[contenthash:10].js',path: resolve(__dirname, 'build')}

B.使用splitChunks分离代码

当我们在文件当中引入了node_modules的包时，在打包之后可能打包工具会自动将node_modules当中的包打包进文件当中，这个时候使用以下代码:可以将引入的这些包单独打包，从而减小打包的体积

总的来说，功能就是:

    1. 可以将node_modules中代码单独打包一个chunk最终输出

    2. 自动分析多入口chunk中，有没有公共的文件。如果有会打包成单独一个chunk

  optimization: {splitChunks: {chunks: 'all'}}

完整代码:

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {// 单入口// entry: './src/js/index.js',entry: {index: './src/js/index.js',test: './src/js/test.js'},output: {// [name]：取文件名filename: 'js/[name].[contenthash:10].js',path: resolve(__dirname, 'build')},plugins: [new HtmlWebpackPlugin({template: './src/index.html',minify: {collapseWhitespace: true,removeComments: true}})],/*1. 可以将node_modules中代码单独打包一个chunk最终输出2. 自动分析多入口chunk中，有没有公共的文件。如果有会打包成单独一个chunk*/optimization: {splitChunks: {chunks: 'all'}},mode: 'production'
};

C.通过js代码，让某个文件被单独打包成一个chunk

 通过js代码，让某个文件被单独打包成一个chunk

 import动态导入语法：能将某个文件单独打包

例如在js代码当中添加以下代码：

import('./test').then(({ mul, count }) => {console.log(mul(2, 5));}).catch(() => {console.log('文件加载失败~');});

这个时候在打包的时候就能将引入的这个test.js文件单独打包完成