webpack | NOTION BLOG

type

status

date

slug

summary

基本概念

webpack模块（用来可以复用js代码块）打包（合并压缩翻译代码整合解析）工具

webpack可以根据我们配置的入口进行一步步的分析所有的代码模块，根据我们的配置进行自动化的打包并且根据输出位置进行打包之后的文件输出

gulp/grunt 在一个配置文件中，开发者指明需要让他们干什么（一步一步的指定）这个工具就会帮助我们按照我们的指定来完成功能

webpack plus版本的gulp它在gulp的基础之上包含了他所有的基本功能在此基础之上添加了一个特殊的功能就是可以对模块化代码进行自动化打包

4大配置

入口出口加载器插件

使用

webpack 核心包

webpack-cli webpack的命令行

1.下载 cnpm install -g webpack@4.39.3 webpacl-cli@3

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

入口/出口

entry 入口

output 出口

配置好文件之后，在当前路径下输入webpack即可编译，但是会出现如下警告

production 生产模式压缩

development 开发模式不压缩

mode 打包模式

在入口出口的同级设置打包模式

mode："production/development"

打包多个文件怎么办？

1.entry配置一个对象用来设置多个入口文件

2.在出口的filename中使用[name]来进行多文件名的展示

plugin 插件

plugin主要就是用来扩展webpack的功能，让webpack有更多与构建项目无关的一些事情

clean-webpack-plugin 打包之后，清空原有的内容

https://www.npmjs.com/package/clean-webpack-plugin

html-webpack-plugin

就是把打包之后的内容动态插入到一个html页面中不需要我们手动进行引用

https://webpack.docschina.org/plugins/html-webpack-plugin/

但是注意 html-webpack-plugin的版本或者是是否缺失webpack包你要单独下次下载

devserver

npm install -g webpack-dev-server@3.4.0

启动webpack-dev-server

也可以在package.ison文件中进行配置

loader加载器

就是把浏览器不能识别的东西翻译成浏览器可以识别的东西

style-loader和css-loader

https://webpack.docschina.org/loaders/style-loader/

less-loader sass-loader

vue-loader

webpack有什么特点

1.依赖管理方便引用第三方模块让模块可以容易的复用

2.代码合并

3..各种插件

webpack打包的流程原理

webpack会把一个项目当成一个整体，通过给定的主文件，webpack会根据这个主文件然后依次分析他相关的依赖文件，并且使用loader来处理他们就进行编译最终打包成一个或多个浏览器可以识别的js文件

1.解析配置参数

2..注册配置中的plugin与loader

3.根据entry节点分析出这个项目中的模块关联关系。

4.根据loader的匹配条件进行逐一的文件转换

5.根据output把文件进行导出