webpack4.x简介
2021-04-10 23:50:08 0 举报AI智能生成
webpack4.x核心概念，核心配置等内容梳理
作者其他创作
大纲/内容
webpack4.x简介
核心配置
entry
单入口，单页面应用，一个html，spa
string方式
Obj对象写法
单入口的 字符串写法 === 多入口的 对象写法
output
单出口
// 打包后的代码存放目录path
// 打包后的文件命名filename
// filename: 'main.js'
对应多入口的多出口
// 占位符的写法支持单出口和多出口
loader
常见loader
style-loader
通过dom动态放入style标签内
css-loader
序列化 处理成，string 和 buffer
less-loader
sass-loader
ts-loader
将ts转换成js
bable-loader
转换es6、7等js新特性语法
file-loader
处理图片子图
eslint-loader
配置示例
注意
1. 多个loader作用于一个模块，需要使用数组；2. 多个loader作用于一个模块，需要注意顺序，是自后往前；3. webpack的loader使用规范，一个loader只做一个事情。
plugin
举例：HtmlWebpackPlugin
安装
npm install --save-dev html-webpack-plugin
config
代码示例
举例：clean-webpack-plugin
npm install --save-dev clean-webpack-plugin
如何做到dist⽬录下某个⽂件或⽬录不被清空
作用：自动清空打包后的dist目录
mode
none
不开启任何开发模式，默认为production
production
生产模式
开启生产模式可帮助模块压缩，处理副作用等
development
开发模式，注重开发体验，输出信息比较多，代码不会被压缩等。
module
当webpack处理到不认识的模块时，需要在webpack中的module处进⾏配置，当检测到是什么格式的模块，使⽤什么loader来处理。
核心概念
入口奇点，用来告诉webpack用哪个文件作为构建依赖图的起点。
webpack打包的输出配置，包含输出的文件命名、输出的目录等信息
用于指定打包的目标环境，以便在打包的过程中启用webpack针对不同环境下内置的优化
chunk
代码块，一个chunk可能由多个模块组合而成，也用于代码合并和分割。
模块，在 Webpack ⾥⼀切皆模块，⼀个模块对应着⼀个⽂件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。
bundle
资源经过webpack流程解析编译后最终输出的成果文件，皆打包后的产物。
通过入口生成的js文件称为bundle文件。
注意：一定是先安装后配置使用； 规范：一个loader最好只做一件事情
可以用来控制webpack构建流程，执行一些特殊的任务，功能非常强大，可以完成各种各样的任务，起到扩展的作用。
对输出目录起作用的。
一个chunks至少包含一个模块。
一个bundle至少包含一个chunks。
安装方式
局部
npm i -D webpack@4.44.0 webpack-cli@3.3.12
全局
npm i -g webpack@4.44.0 webpack-cli@3.3.12
不推荐使用
全局安装，版本会固定！升级需要手动！！！
需要维护多个项目（新的，旧的，可能webpack版本不一致导致编译失败）
执行构建
脚本
npm run dev
npx webpack
原理
原理就是通过shell脚本在node_modules/.bin⽬录下创建⼀个软链接。
配置
默认配置文件：
webpack.config.js
使用自定义配置文件：
⽐如webpackconfig.js，可以通过--config webpackconfig.js来指定webpack使⽤哪个配置⽂件来执⾏构建
职业：暂无
0 条评论
回复 删除
下一页
