这是我参与「第五届青训营 」笔记创作活动的第10天。
课堂重点
- Webpack 的本质
- Webpack 定义解析
- Webpack 优势
详细内容
什么是webpack
前端项目由众多文件构成，
旧时代手动管理缺点，依赖手工过程繁琐。当外部文件很多，对开发效率影响非常大，管理成本高，后面出现很多工程化工具，webpack就是其中一种工具。正是有了这些工具的出现，有了前端工程的概念。
webpack本质上是一种前端资源编译，打包工具。webpack会对非js的文件编译成js内容，之后打包成一个文件。
如何使用 webpack
示例
- 安装
npm i -D webpack webpack-cli
- 配置 webpack.config.js
- entry: 定义当前项目的入口
- output: 定义当前项目的出口
- filename：文件名
- path：文件保存路径
- 执行编译命令
npx webpack
核心流程
webpack 做了什么
模块化 + 一致性
- 多个文件资源合并成一个，减少 http 请求数
- 支持模块化开发
- 支持高级 JS 特性
- 支持ts、cs 方言
- 统一图片、css、字体 等其他资源的处理模型
- etc...
使用 Webpack
关于 webpack 的使用方法,基本围绕"配置"展开. 大致分为两类:
- 流程类: 作用于流程中某个或若干环节,直接影响打包效果的配置项
- 工具类: 主流程之外,提供更多工程化能力的配置项
流程类配置
配置总览
简单使用
处理css
- 安装 loader
npm add -D css-loader style-loader
- 添加
module处理 css 文件
const path = require('path')
module.exports = {
entry: './src/index.js',
output: {
filename: '[name].js',
path: path.join(__dirname, './dist')
},
module: {
// CSS 处理器
rules: [{
test: /\.css$/,
use: ["style-loader", "css-loader"]
}]
}
}
处理js 接入Babel
Babel是一个编译器，针对JavaScript，为什么会有Babel这样一个工具的存在？
本文默认你对es6、es7等有所涉足，我们在写es6+语法的时候是不是很方便，什么
promise、async await`，可是es6+语法写的虽然很酸爽，但是浏览器他不兼容啊，你想想你写的代码在浏览器上跑不起来，在好的语法在好的特性又有什么用？这个时候Babel这样一个工具出来了，他可以将我们写的es6+语法转换为浏览器兼容的语法，比如将箭头函数转换为普通函数，有了这样一个工具我们就即可以写酸爽的语法，又可以让使浏览器兼容。
生成HTML
工具类配置
-
HMR 模块热替换
-
Tree-Shaking 树摇: 删除没用代码 Dead Code 开启tree-shaking
mode: "production"optimization.usedExports: true -
其他工具
