为什么要学习webpack
- 理解前端“工程化”概念，工具，目标
- 一个团队总要有那么几根人熟悉webpack ，某种程度上可以成为个人核心竞争力
- 高阶前端必经之路
什么是webpack。
一个前端项目由很多文件组成，在没有打包工具之前，
- 依赖手工，比如有50个JS文件。。。操作，过程繁琐
- 当代码之间来的时候，就得严格按照依赖顺序书写
- 开发与生产环境一致，那一接入Ts或JS新特性，
- 比较难接入Less Sass 等工具
- JS 图片 css 资源管理模型不一致
为了解决这些问题，出现了许多工具
本质上是一种前端资源编译打包工具
- 多份资源文件打包成一个 Bundle
- 支持 Babel、Eslint、TS、CoffeScript、Less Sass
- 支持模块化处理 css、图片 等资源文件
- 支持 HMR + 开发服务器
- 支持持续监听、持续构建
- 支持代码分离
- 支持 Tree-shaking
- 支持 Sourcemap
使用Webpack
- 安装依赖
npm i -D webpack webpackcli - 编写配置文件
const path = require("path");
module.exports = {
entry: "index",
mode: "development",
output: {
filename: "[name].js",
path: path.join(__dirname, "./dist"),
},
module: {
rules: [
{
test: /\.less/i,
use: ["style-loader", "css-loader", "less-loader"],
},
],
},
};
- 执行命令
npx webpack
核心流程
- 入口处理，
从entry文件开始，启动编译流程
- 依赖分析
从‘entry’文件开始，根据require，import 等语句，找到依赖资源
- 资源解析
根据‘module’配置，调用资源转移器，将png css等非标准资源转译为JS资源
- 资源合并打包
将转译后的资源内容合并打包为可直接在浏览器运行的JS文件
递归二三步骤，直到所有资源都被解析
模块化+一致性
- 多个文件资源合并成一个，减少 http 请求数
- 支持模块化开发
- 支持高级 JS 特性
- 支持 Typescript、CoffeeScript 方言
- 统一图片、CSS、字体 等其它资源的处理模型
- Etc.
webpack配置总览
处理css
npm i -D css-loader style-loader
- 添加“module”处理css文件
const path = require("path");
module.exports = {
entry: "./index.js",
mode: "development",
output: {
filename: "[name].js",
path: path.join(__dirname, "./dist"),
},
module: {
rules: [
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
],
},
};
思考题
-
Loader 有什么作用? 为什么这里需要用到 css-loader、style-loader
-
与旧时代 -- 在 HTML 文件中维护 css 相比，这种方式会有什么优劣处?
-
有没有接触过 Less、Sass、Stylus 这一类 CSS 预编译框架? 如何在 Webpack 接入这些工具?
接入Babel，
Babel主要用来用于JS的转译，降级JS中高级语法
npm i -D @babel/core @babel/preset-env babel-loader
- 声明产物出口'output';
const path = require("path");
module.exports = {
entry: "./index.js",
mode: "development",
output: {
filename: "[name].js",
path: path.join(__dirname, "./dist"),
},
module: {
rules: [
{
test: /\.js$/,
use: [
{
loader: "babel-loader",
option: {
presets: [["@babel/preset-env"]],
},
},
],
},
],
},
};
- 执行
npx webpack
思考题
- Babel 具有什么功能？
- Babel与webpack分别解决了什么问题，为何两者能协作到一起？
生成HTML
npm i -D html-webpack-plugin
进行配置
const path = require("path");
const HTMLWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: "./index.js",
mode: "development",
output: {
filename: "[name].js",
path: path.join(__dirname, "./dist"),
},
module: {
rules: [
{
test: /\.js$/,
use: [
{
loader: "babel-loader",
options: {
presets: [["@babel/preset-env"]],
},
},
],
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
],
},
plugins: [new HTMLWebpackPlugin()],
};
执行npx webpack
会生成引入了js文件的html
思考题
- 相比于手工维护HTML内容，这种方式有什么优缺点？
工具线
HMR。模块热替换
修改代码，在浏览器即时展示，完成更新，无需重新打包
在配置文件中，
module.exports = {
/.........
devServer: {
open: true,
hot: true,
},
watch: true,
};
/.................
安装 webpack-dev-serve
Tree-Shaking
对未被使用的代码，不进行打包，
/----------------
mode:"production"
optimzation: {
useExports: true,
},
/------------------
思考题
- 除上面提到的内容，还有哪些配置可划分为“流程类”配置?
- 工具类配置具体有什么作用? 包括 devtool/cache/stat'等
