模块打包工具的由来
Web1.0
- 编写静态页面
- 表单验证和动效
Web2.0 之 AJAX
- 管理数据
- 和用户进行数据交互
大前端开发
- PC 端
- 移动端
- 小程序
- APP
现代 Web 开发“问题”
- 采用模块化开发
- 使用新特性提高效率保证安全性
- 实时监听开发过程使用热更新
- 项目结果打包压缩优化
使用 Webpack 实现项目工程化
模块打包工具概要
- 模块打包器（Module bundler）
- 模块加载器（Loader）
- 代码拆分（Code Splitting）
- 资源模块（Asset Module）
打包工具解决的是前端整体的模块化，并不单指 JavaScript 模块化
Webpack 快速上手
安装 Webpack
yarn init -y
yarn add [email protected] [email protected] --dev
yarn webpack --version
编写代码
// src/heading.js
export default () => {
const element = document.createElement('h2')
element.textContent = 'Hello World'
element.addEventListener('click', () => {
alert('Hello Webpack')
})
return element
}
// src/index.js
import createdHeading from './heading.js'
const heading = createdHeading()
document.body.append(heading)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Webpack - 快速上手</title>
</head>
<body>
<script type="module" src="src/index.js"></script>
</body>
</html>
执行 Webpack 命令
yarn webpack
webpack 配置文件
// webpack.config.js
// 该文件是运行在 Node.js 中，所以需要按照 Common.js 的方式编写代码
const path = require('path')
module.exports = {
// 指定打包入口文件的路径，如是相对路径，./ 不可省略
entry: './src/main.js',
// 输出文件配置
output: {
filename: 'bundle.js',
// 只能使用绝对路径
path: path.join(__dirname, 'output')
}
}
配置打包命令
{
"name": "01-getting-started",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"build": "webpack"
},
"devDependencies": {
"webpack": "^4.40.2",
"webpack-cli": "^3.3.9"
}
}
执行命令
yarn build
Webpack 工作模式
如未设置 mode 属性，webpack 会默认使用 production 模式去做工作，除此之外还有 development 及 none 模式，这三种的模式的差异，详见官方文档
production 模式
会自动启动一些优化插件，如自动压缩代码等
development 模式
webpack 会自动优化打包的速度，并会自动添加一些调试过程中需要的辅助到代码中。
yarn webpack --mode development
none 模式
运行最原始的模式打包，不会做任何额外的处理。
yarn webpack --mode none
通过配置文件 mode 属性设置 webpack 工作模式
// 该文件是运行在 Node.js 中，所以需要按照 Common.js 的方式编写代码
const path = require('path')
module.exports = {
// 设置工作模式
mode: 'development',
// 指定打包入口文件的路径，如是相对路径，./ 不可省略
entry: './src/main.js',
// 输出文件配置
output: {
filename: 'bundle.js',
// 只能使用绝对路径
path: path.join(__dirname, 'dist')
}
}
Webpack 资源模块加载
webpack 默认只会处理 JS 文件，此时直接加载 CSS 则会报错，需要使用配置相对应的处理加载器 loader。loader 是 webpack 的核心特性，借助于 loader 就可以加载任何类型的资源。
加载 CSS
编写 css 代码
// src/main.css
body {
margin: 0 auto;
padding: 0 20px;
max-width: 800px;
background-color: yellow;
}
安装 css-loader
yarn add css-loader --dev
TypeError: this.getOptions is not a function
原因 [email protected] 版本过高，降回 [email protected]
安装 style-loader
该 loader 的作用是将经过 css-loader 转换后的结果，通过 style 标签的形式追加到页面上。
yarn add [email protected] --dev
// 该文件是运行在 Node.js 中，所以需要按照 Common.js 的方式编写代码
const path = require('path')
module.exports = {
// 设置工作模式
// mode: 'development',
mode: 'none',
// 指定打包入口文件的路径，如是相对路径，./ 不可省略
// entry: './src/main.js',
entry: './src/main.css',
// 输出文件配置
output: {
filename: 'bundle.js',
// 只能使用绝对路径
path: path.join(__dirname, 'dist')
},
module: {
rules: [
{
test: /.css$/,
// 从后往前执行，先执行最后一个 loader，这里会先执行 css-loader
use: [
'style-loader',
'css-loader'
]
}
]
}
}
运行编译命令
yarn webpack
Webpack 导入资源模块
webpack 建议在 JS 中引用 css，根据代码的需要动态导入资源。
- 逻辑合理，JS 确实需要这些资源文件
- 确保上线资源不缺失，都是必要的
// src/heading.css
.heading {
padding: 20px;
background: #343434;
color: #fff;
}
import './heading.css'
export default () => {
const element = document.createElement('h2')
element.textContent = 'Hello World'
element.classList.add('heading')
element.addEventListener('click', () => {
alert('Hello Webpack')
})
return element
}
// 该文件是运行在 Node.js 中，所以需要按照 Common.js 的方式编写代码
const path = require('path')
module.exports = {
// 设置工作模式
// mode: 'development',
mode: 'none',
// 指定打包入口文件的路径，如是相对路径，./ 不可省略
entry: './src/main.js',
// 输出文件配置
output: {
filename: 'bundle.js',
// 只能使用绝对路径
path: path.join(__dirname, 'dist')
},
module: {
rules: [
{
test: /.css$/,
// 从后往前执行，先执行最后一个 loader，这里会先执行 css-loader
use: [
'style-loader',
'css-loader'
]
}
]
}
}
Webpack 文件资源加载器
安装 file-loader
yarn add [email protected] --dev
引用图片
import createdHeading from './heading.js'
import './main.css'
import icon from './icon.png'
const heading = createdHeading()
document.body.append(heading)
const img = new Image()
img.src = icon
document.body.append(img)
配置 loader
// 该文件是运行在 Node.js 中，所以需要按照 Common.js 的方式编写代码
const path = require('path')
module.exports = {
// 设置工作模式
// mode: 'development',
mode: 'none',
// 指定打包入口文件的路径，如是相对路径，./ 不可省略
entry: './src/main.js',
// 输出文件配置
output: {
filename: 'bundle.js',
// 用来存放打包后文件的输出目录，只能使用绝对路径
path: path.join(__dirname, 'dist'),
// 指定资源文件引用的目录，'': 默认值，表示网站根目录，dist /不能省略
publicPath: 'dist/'
},
module: {
rules: [
{
test: /.css$/,
// 从后往前执行，先执行最后一个 loader，这里会先执行 css-loader
use: [
'style-loader',
'css-loader'
]
},
{
test: /.png$/,
use: 'file-loader'
}
]
}
}
编译后的代码
