webpack4.x简介
2021-04-10 23:50:08 0 举报AI智能生成
webpack4.x核心概念，核心配置等内容梳理
作者其他创作
大纲/内容
核心配置
entry
单入口，单页面应用，一个html，spa
string方式
entry: './src/index.js',
多入口，多页面应用，多个html, mpa
多入口一定要对应多出口
多入口一定要对应多出口
Obj对象写法
单入口的 字符串写法 === 多入口的 对象写法
output
单出口
// 打包后的代码存放目录
path
path
path: path.resolve(__dirname, './dist'),
// 打包后的文件命名
filename
filename
// filename: 'main.js'
对应多入口的多出口
// 打包后的代码存放目录
path
path
path: path.resolve(__dirname, './dist'),
// 打包后的文件命名
filename
filename
filename: '[name].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只做一个事情。
2. 多个loader作用于一个模块，需要注意顺序，是自后往前；
3. webpack的loader使用规范，一个loader只做一个事情。
plugin
举例：HtmlWebpackPlugin
安装
npm install --save-dev html-webpack-plugin
config
title: ⽤来⽣成⻚⾯的 title 元素
filename: 输出的 HTML ⽂件名，默认是 index.html, 也可以直接配置带有⼦⽬录。
template: 模板⽂件路径，⽀持加载器，⽐如 html!./index.html
filename: 输出的 HTML ⽂件名，默认是 index.html, 也可以直接配置带有⼦⽬录。
template: 模板⽂件路径，⽀持加载器，⽐如 html!./index.html
代码示例
举例：clean-webpack-plugin
安装
npm install --save-dev clean-webpack-plugin
config
如何做到dist⽬录下某个⽂件或⽬录不被清空
代码示例
作用：自动清空打包后的dist目录
mode
none
不开启任何开发模式，默认为production
production
生产模式
开启生产模式可帮助模块压缩，处理副作用等
development
开发模式，注重开发体验，输出信息比较多，代码不会被压缩等。
module
当webpack处理到不认识的模块时，需要在webpack中的module处进⾏配置，当检测到是什么格式的
模块，使⽤什么loader来处理。
模块，使⽤什么loader来处理。
配置示例
核心概念
entry
入口奇点，用来告诉webpack用哪个文件作为构建依赖图的起点。
output
webpack打包的输出配置，包含输出的文件命名、输出的目录等信息
mode
用于指定打包的目标环境，以便在打包的过程中启用webpack针对不同环境下内置的优化
chunk
代码块，一个chunk可能由多个模块组合而成，也用于代码合并和分割。
module
模块，在 Webpack ⾥⼀切皆模块，⼀个模块对应着⼀个⽂件。Webpack 会从配置的 Entry 开始递归找
出所有依赖的模块。
出所有依赖的模块。
bundle
资源经过webpack流程解析编译后最终输出的成果文件，皆打包后的产物。
通过入口生成的js文件称为bundle文件。
loader
由于webpack只支持js,json，因此loader主要作用是可以让webpack识别更多类型的文件【.vue, .css, .ts】，充当解析翻译的角色。
注意：一定是先安装后配置使用；
规范：一个loader最好只做一件事情
规范：一个loader最好只做一件事情
plugin
可以用来控制webpack构建流程，执行一些特殊的任务，功能非常强大，可以完成各种各样的任务，起到扩展的作用。
对输出目录起作用的。
loader, plugin
编译过程用loader, 打包过程扩展用plugin
chunks, module, bundle
一个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使⽤哪个配置⽂件来执⾏构建
webpack使⽤哪个配置⽂件来执⾏构建
职业：暂无
0 条评论
下一页
