webpack 打包全流程

目录

1 webpack的安装

2 webpack的配置

配置流程：

1 webpack安装

2 创建webpack配置文件 webpack.config.js

3 配置入口 entry

单入口和多入口

2. 动态配置入口文件

4 配置出口 output

5 配置模式 mode（webpack4）

6 配置解析策略 resolve

7 配置解析和转换文件的策略 module : loader

1. noParse

2. rules

8 、配置优化 optimization（webpack4）

1. 最小化包

2. 拆包

拆分业务代码

拆分第三方库

动态加载

9、配置 plugin  插件 

Eslint

  Babel  

10 watch 与 watchOptions

watch

参考： 

1 模块化

2前端模块化(AMD、CMD、commonJs、ES6)  

---

前端代码为何要进行构建和打包？

module chunk bundle 分别什么意思，有何区别？

loader 和 plugin 的区别？

webpack 如何实现懒加载？

webpack 常见性能优化？

bable-runtime 和 babel-polyfill 的区别？

1 webpack的安装

（wepack为了正常运行必须依赖node环境，而node环境为了可以正常的执行，必须使用npm工具管理node中各种依赖的包）

• 安装webpack首先要安装Node.js，Node.js自带了软件包管理工具npm
• 全局安装webpack（npm install webpack@3.6.0 -g）
• 局部安装webpck（npm install webpack@3.6.0 --save-dev）–save-dev是开发时依赖，项目打包后不需要继续使用。

2 webpack的配置

webpack配置_shkmzzh的博客-CSDN博客

webpack配置完全指南_webpack 配置_gogo2027的博客-CSDN博客

webpack 之后会发现很简单，基础的配置可以分为以下几个方面： entry 、 output 、 mode 、 resolve 、 module 、 optimization 、 plugin 、 source map 、 performance 等，

• webpack 是前端的打包工具

• 打包的工作内容是什么

1. 扫描项目，生成整个项目所有模块的依赖关系，根据配置对模块进行合并，生成一个单独的文件。修改html文件，让html文件引用生成后的文件
2. 将浏览器无法直接识别的（less、sass、ts）文件，转换成浏览器可以实现的内容。
3. 将浏览器暂时无法支持的JS新的语法转换成浏览器可以支持的语法

配置流程：

1 webpack安装

webpack是基于node.js的，使用前需要安装node

-D 是 --save-dev 的缩写，表示开发时依赖，只在项目开发阶段用到。 -S 是 --save 的缩写，表示运行时依赖，即项目打包发布运行时要用到。

npm初始化

npm init -y

安装webpack

webpack内部还依赖webpack-cli，所以webpack-cli也要安装

npm install --save-dev webpack webpack-cli

2 创建webpack配置文件 webpack.config.js

// 导入path模块
const path = require('path')
​
// webpack配置
module.exports = {// 配置打包入口文件entry: path.resolve(__dirname, 'src', 'index.js'),// 配置打包输出位置，及文件名output: {path: path.resolve(__dirname, 'dist'),// 输出文件名filename: 'bundle.js'}
}

3 配置入口 entry

单入口和多入口

module.exports = { entry: `./index.js`, }

2. 动态配置入口文件

当构建项目包含多个子项目时，每次增加一个子系统都需要将入口文件写入 webpack 配置文件中，其实我们让webpack 动态获取入口文件，例如：

// 使用 glob 等工具使用若干通配符，运行时获得 entry 的条目
module.exports = {entry: glob.sync('./project/**/index.js').reduce((acc, path) => {const entry = path.replace('/index.js', '')acc[entry] = pathreturn acc}, {}),
}

4 配置出口 output

用于告知 webpack 如何构建编译后的文件，可以自定义输出文件的位置和名称:

module.exports = {output: { // path 必须为绝对路径// 输出文件路径path: path.resolve(__dirname, '../../dist/build'),// 包名称filename: "[name].bundle.js",// 或使用函数返回名(不常用)// filename: (chunkData) => {//   return chunkData.chunk.name === 'main' ? '[name].js': '[name]/[name].js';// },// 块名，公共块名(非入口)chunkFilename: '[name].[chunkhash].bundle.js',// 打包生成的 index.html 文件里面引用资源的前缀// 也为发布到线上资源的 URL 前缀// 使用的是相对路径，默认为 ''publicPath: '/', }
}

在 webpack4 开发模式下，会默认启动 output.pathinfo ，它会输出一些额外的注释信息，对项目调试非常有用，尤其是使用 eval devtool 时。

filename ：[name] 为 entry 配置的 key，除此之外，还可以是 [id] （内部块 id ）、 [hash]、[contenthash] 等。
 

5 配置模式 mode（webpack4）

设置 mode ，可以让 webpack 自动调起相应的内置优化

module.exports = {// 可以是 none、development、production// 默认为 productionmode: 'production'
}

production 模式下给你更好的用户体验：

• 较小的输出包体积
• 浏览器中更快的代码执行速度
• 忽略开发中的代码
• 不公开源代码或文件路径
• 易于使用的输出资产

development 模式会给予你最好的开发体验：

• 浏览器调试工具
• 快速增量编译可加快开发周期
• 运行时提供有用的错误消息

6 配置解析策略 resolve

自定义寻找依赖模块时的策略（例如 import _ from 'lodash'）:

module.exports = {resolve: {// 设置模块导入规则，import/require时会直接在这些目录找文件// 可以指明存放第三方模块的绝对路径，以减少寻找，// 默认 node_modulesmodules: [path.resolve(`${project}/components`), 'node_modules'],// import导入时省略后缀// 注意：尽可能的减少后缀尝试的可能性extensions: ['.js', '.jsx', '.react.js', '.css', '.json'],// import导入时别名，减少耗时的递归解析操作alias: {'@components': path.resolve(`${project}/components`),'@style': path.resolve('asset/style'),},// 很多第三方库会针对不同的环境提供几份代码// webpack 会根据 mainFields 的配置去决定优先采用那份代码// 它会根据 webpack 配置中指定的 target 不同，默认值也会有所不同mainFields: ['browser', 'module', 'main'],},
}

7 配置解析和转换文件的策略 module : loader

决定如何处理项目中不同类型的模块，通常是配置 module.rules 里的 Loader:

// webpack配置
module.exports = {// ...// 扩展文件加载模块 - css模块加module: {// 由于可以加载多种文件，每种文件对应一种loader，所以是数组rules: [// 由于是多种文件，所以使用扩展名进行区分，再应用不同的loader{// 正则判断文件类型test: /\.css$/i,// 这种类型文件使用以下loaderuse: ['style-loader', 'css-loader'],},{// 判断less文件test: /\.less$/i,use: ["style-loader","css-loader","less-loader"]},{// 加载图片资料模板test: /\.(png|jpg|jpeg|gif|svg)$/,type: 'asset/resource'},{// 加载字体文件test: /\.(eot|ttf|otf|woff2)$/,type: 'asset'}]}
}

1. noParse

指明 webpack 不去解析某些内容，该方式有助于提升 webpack 的构建性能。

2. rules

常见的 loader 有：

• babel-loader：解析 .js 和 .jsx 文件

• tsx-loader：处理 ts 文件

• less-loader：处理 less 文件，并将其编译为 css

• sass-loader：处理 sass、scss 文件，并将其编译为 css

• postcss-loader：

• css-loader：处理 css 文件

  style-loader：将 css 注入到 DOM

  file-loader：将文件上的import / require 解析为 url，并将该文件输出到输出目录中

  url-loader：用于将文件转换成 base64 uri 的 webpack 加载程序

  html-loader：将 HTML 导出为字符串， 当编译器要求时，将 HTML 最小化

8 、配置优化 optimization（webpack4）

webapck4 会根据你所选择的 mode 进行优化，你可以手动配置，它将会覆盖自动优化

主要涉及两方面的优化：

• 最小化包
• 拆包

  

1. 最小化包

2. 拆包

拆分 node_modules

很多情况下，我们不需要手动拆分包，可以使用 optimization.splitChunks ：

拆分业务代码

拆分第三方库

动态加载

9、配置 plugin  插件 

配置 Plugin 去处理及优化其它的需求，

Eslint

npm i eslint-webpack-plugin eslint -D

配置文件由很多种写法：

• .eslintrc.*：新建文件，位于项目根目录
  • .eslintrc
  • .eslintrc.js
  • .eslintrc.json
  • 区别在于配置格式不一样
• package.json 中 eslintConfig：不需要创建文件，在原有文件基础上写
• rules 具体规则
• "off" 或 0 - 关闭规则
• "warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)
• "error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)

  Babel  

npm i babel-loader @babel/core @babel/preset-env -D

配置文件由很多种写法：

babel.config.*：新建文件，位于项目根目录
babel.config.js
babel.config.json

package.json 中 babel：不需要创建文件，在原有文件基础上写
Babel 会查找和自动读取它们，所以以上配置文件只需要存在一个即可
 

module.exports = {plugins: [// 优化 requirenew webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /en|zh/),// 用于提升构建速度createHappyPlugin('happy-babel', [{loader: 'babel-loader',options: {presets: ['@babel/preset-env', "@babel/preset-react"],plugins: [['@babel/plugin-proposal-class-properties', {loose: true}]],// babel-loader 支持缓存转换出的结果，通过 cacheDirectory 选项开启cacheDirectory: true,// Save disk space when time isn't as importantcacheCompression: true,compact: true,}}])]
}

常用 plugins：

html-webpack-plugin：生成 html 文件，并将包添加到 html 中
webpack-parallel-uglify-plugin：压缩 js（多进程并行处理压缩）
happypack：多线程loader，用于提升构建速度
hard-source-webpack-plugin：为模块提供中间缓存步骤，显著提高打包速度
webpack-merge：合并 webpack 配置
mini-css-extract-plugin：抽离 css
optimize-css-assets-webpack-plugin：压缩 css
add-asset-html-webpack-plugin：将 JavaScript 或 CSS 资产添加到 html-webpack-plugin 生成的 HTML 中
更多插件可见：plugins
 

10 watch 与 watchOptions

我们可以在命令行里启动监听（ --watch ）：

webpack --watch --config webpack.config.dev.js
 

在 webpack-dev-server 和 webpack-dev-middleware 中，默认启用了监视模式。

watch

监视文件更新，并在文件更新时重新编译：

module.export = {// 启用监听模式watch: true,
}

webpack看这一篇就够了_itpeilibo的博客-CSDN博客

参考： 

1 模块化

前端模块化开发_Ukashi的博客-CSDN博客

简单来说，将一个项目划分为不同的功能模块来开发维护的过程就是模块化。

js一开始并没有模块化的概念，直到ajax被提出，前端能够像后端请求数据，前端逻辑越来越复杂，就出现了许多问题：全局变量，函数名冲突，依赖关系不好处理。模块化就是衍生出来解决这些问题的一种方法

模块化开发优点：

• 解决命名冲突
• 提供复用性
• 提高代码可维护性
• 灵活架构，焦点分离，方便模块间组合、分解
• 多人协作互不干扰

2前端模块化(AMD、CMD、commonJs、ES6)  

前端模块化(AMD、CMD、commonJs、ES6)_前端amd_GA莹莹子的博客-CSDN博客

CommonJs和ES6模块化的区别？
1.CommonJs模块引入方式使用require()，导出的方式是module.exports=value或exports.xx=value。
ES6使用import {} from(必须放在文件开头)和export let/const或export {}引入和导出。
2.CommonJs模块输出的是一个值的拷贝。
ES6输出的是值的引用。
3.CommonJs模块是运行时加载，加载的是一个对象(exports或module.exports)。
ES6模块是编译(将import语法转化为require)时加载的，效率更高，不是对象，它的对外接口是一种静态定义，只有在脚本使用时才会调用。
ES6渐渐取代CommonJs