1、npm init --yes（安装node环境）

2、npm i webpack webpack-cli--save-dev（安装webpack和webpack-cli）

3、npx webpack(打包命令)

4、npm install css-loader --save-dev (安装css-loader)

5、npm install style-loader --save-dev (安装style-loader)

6、npm install clean-webpack-plugin --save-dev (安装插件)

webpack 中的 module指的是什么

前端中的模块系统 webpack 支持 ESModule， CommonJS, AMD, Asset.(img .video, audio, json)

1、ESM 关键字 export ，允许将ESM中内容暴露给其他模块。

关键字 import

import {aa} from './a.js';
export {bb}

// package.json

type: module -> ESM type: Commonjs -> CommonJS

2、CommonJS

module.export 允许将CommonJS中的内容暴露给其他模块

require

所以webpack modules 如何表达自己的各种依赖关系

*ESM import 语句 *AMD require

• CSS/sass/less @import.

我们常说的chunk和bundle的区别是什么（!!!）

1、Chunk

chunk 是webpack打包过程中modules的集合，是（打包过程中）的概念

webpack打包是从一个入口模块开始，入口模块引用其他模块，其他模块引用其他模块。。。。

webpack 通过引用关系这个打包模块，这些module就形成了一个chunk.

如果有多个入口模块，会产生多条打包路径。每条路径都会形成一个chunk。

2、bundle

是我们最终输出的一个或者多个打包好的文件。

3、chunk和bundle的关系是什么？

大多数情况下，一个chunk会生产一个bundle，但是也有例外。

但是如果加入了 sourcemap， 一个entry，一个chunk， 对应2个bundle

chunk 是过程中的代码块

bundle 是打包结果形成的代码块， chunk 构建完成呈现为bundle。

4、

1）初始化npm

npm init

2) 新建 npmrc 配置文件 配置淘宝源

3）安装 webpack

npm i webpack webpack-cli -D（开发模式）

4) 创建src，编写代码内容

5. 配置 webpack

6. 打包 webpack npx webpack

5、Split Chunk

//webpack.config.js
module.export = {
    mode: 'production',
    entry: {
        index: './src/index.js',
        other: './src/multiply.js'
    },
    output: {
        filename: '[name].js'
    },
    // devtool: "source-map",
    optimization: {
        runtimeChunk: "single",
        splitChunks: {
            cacheGroups: {
                commons: {
                    chunks: "initial",
                    minChunks: 2,
                    minSize: 0,
                },
                vendor: {
                    test: /node_modules/,
                    chunks: "initial",
                    name: "vendor",
                    enforce: true
                }
            }
        }
    }
}

// 这种配置产生?个chunk
// 1. entry index
// 2. entry other
// 3. runtimeChunk: "single"
// 4. splitChunks common
// 5. splitChunks vendor

Plugin 和 Loader 分别是做什么的？怎么工作的？

1、Loader

模块转换器，将非js模块转化为webpack能识别的js模块。 本质上，webpack loader 将所有类型的文件，转换为应用程序的依赖图

2、Plugin

扩展插件，webpack运行的各个阶段，都会广播出对应的事件，插件去监听对应的事件

3.Compiler

对象， 包含了webpack环境的所有配置信息。包含了options loader, plugins.

webpack 启动的时候实例化， 它在全局是唯一的，可以把他理解为webpack的实例

4.Compliation

包含了当前的模块资源， 编译生成资源。

webpack值开发模式下运行的时候，每当检测到一个文件变化，就会创建一次新的Compilation.

简单描述webpack打包过程

1、初始化参数： shell webpack.config.js 2、开始编译：初始化一个Compiler对象，加载所有配置，开始编译 3、确定入口：根据entry中的配置，找出所有入口文件 4、编译模块： 从入口文件开始，调用所有的loader,再去递归的找依赖 5、完成模块编译： 得到每个模块被编译后的最终内容及他们之间的依赖关系。 6、输出资源： 需要根据得到的依赖关系，组装成一个个包含多个module的chunk 7、输出完成： 根据配置，确定要数据的文件名和文件路径