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,