webpack打包全过程 webpack

webpack的优势webpack5大特点
Webpack 有两种组织模块依赖的方式，同步(默认)和异步（高级）。异步依赖作为分割点，形成一个新的块。在优化了依赖树后，每一个异步区块都作为一个文件被打包。
Webpack 本身只能处理原生的 JavaScript 模块，但是 loader 转换器可以将各种类型的资源转换成 JavaScript 模块。这样，任何资源都可以成为 Webpack 可以处理的模块。
Webpack 有一个智能解析器，几乎可以处理任何第三方库，无论它们的模块形式是 CommonJS、 AMD 还是普通的 JS 文件。甚至在加载依赖的时候，允许使用动态表达式 require("./templates/" + name + ".jade") 。
Webpack 还有一个功能丰富的插件系统。大多数内容功能都是基于这个插件系统运行的，还可以开发和使用开源的 Webpack 插件，来满足各式各样的需求。
Webpack 使用异步 I/O （NodeJs）和多级“缓存”提高运行效率，这使得 Webpack 能够以令人难以置信的速度快速增量编译。

文章插图
webpack打包原理webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler) 。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle
webpack.config.js里配置
webpack.config.js里配置
webpack loader 将所有类型的文件，转换为应用程序的依赖图可以直接引用的模块
通过require()将想要使用的插件添加到plugins数组中,多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建它的一个实例。
npm init -y
安装webpack
npm i webpack_dome webpack-cli -D
在根目录下新建src文件夹,在src里新建index.js文件
index.js文件
创建并配置webpack.config.js文件
webpack.config.js文件
配置 package.json 文件，在scripts中添加'build'使得运行 npm run build 可以直接执行 webpack 命令,在根目录内会生成dist文件夹,里面是对应生成的文件,
安装 npm install --save-dev express webpack-dev-middleware ,添加'start'使得运行 npm run start 可以直接执行 webpack-dev-server 命令,
package.json 文件
再次打包时需要删除旧文件
执行npm install clean-webpack-plugin --save-dev 命令，安装依赖。
修改webpack.config.js文件配置
新建index.html文件,并手动引入打包后的js文件
执行npm i html-webpack-plugin --save-dev 命令，安装依赖。
新建index.ejs文件
修改webpack.config.js文件配置
重新运行 npm run build，生成新的 dist 包，包内会生成一个新的 index.html 文件，并自动引入了 index.min.js 文件。
执行npm i open-browser-webpack-plugin webpack-dev-server --save-dev 命令，安装依赖。
修改 webpack.config.js 配置
修改webpack.config.js文件配置
webpack定义及搭建 webpack是一个模块打包工具
ES Module
CommonJS
CMDAMD等
modules概念modules方法及变量
最开始只是js，现在支持大多数文件类型样式、图片等
node.js
一、创建 package.json
配置
二、安装webpack
webpack-cli 安装后可以使用命令行执行webpack的相关命令
不推荐这种方式，因为webpack版本已经固定了，当你安装了4的版本，就无法启动3的版本的项目，除非卸载然后再安装3版本的webpack
命令行进入到项目中
webpack -v 会在全局查找webpack，所以当在项目中安装webpack时，这个命令是没有作用的。npx 是在node_modules中寻找webpack
安装指定版本webpack
文件名为 webpack.config.js
修改默认配置文件
webpack start
网站导航
webpack核心四要素总结入口：webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。参数定义了打包后的入口文件，可以是个字符串或数组或者是对象；如果是数组，数组中的所有文件会打包生成一个filename文件；如果是对象，可以将不同的文件构建成不同的文件。
可以通过在 webpack 配置中配置 entry 属性，来指定一个入口起点（或多个入口起点）。默认值为 ./src 。
entry: {
app: './src/main.js'
}
出口：webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist 。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。你可以通过在配置中指定一个 output 字段，来配置这些处理过程。

webpack打包全过程 webpack

秒懂生活扩展阅读