前端工程化 - webpack 基础
前端工程化 - webpack 基础
# 作用
- 转换 ES6 语法
- 转换 JSX
- CSS 前缀补全/预处理器
- 压缩混淆
- 图片压缩
# 优势
- 社区生态丰富
- 配置灵活和插件化扩展
- 官方更新迭代速度快
# 配置文件
默认配置文件 webpack.config.js，可以通过 webpack --config 指定配置文件
module.exports = {
entry: './src/index.js', // 打包入口文件
output: './dist/main.js', // 打包的输出
mode: 'production', // 环境
module: { // Loader 配置
rules: [
{ test: /\.txt/, use: 'raw-loader'}
]
},
plugins: [ // 插件配置
new HtmlwebpackPlugin({
template: './src/index.html'
})
]
};
# 安装
mkdir test
cd test
npm init -y
npm i webpack@4.31.0 webpack-cli@3.3.2 --save-dev# Hello，world
配置文件
const path = require('path');
module.exports = {
mode: 'production',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
}
};
src 内容
// helloworld.js
export function helloworld () {
return 'Hello Webpack';
};
// src/index.js
import { helloworld } from './helloworld';
document.write(helloworld());
执行打包
./node_modules/.bin/webpack
通过 npm script 运行(原理：模块局部安装会在 node_modules/.bin 目录创建软链接)
{
"scripts": {
"build": "webpack"
}
}
# entry
用来指定打包入口
单入口
module.exports = {
entry: './src/index.js',
}
多入口
module.exports = {
entry: {
app: './src/app.js',
adminApp: './src/adminApp.js'
}
};
# output
指定编译后文件输出位置
单入口
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: __dirname + '/dist'
}
}
多入口 通过占位符确保文件名称的唯一
module.exports = {
entry: {
app: './src/app.js',
adminApp: './src/adminApp.js'
},
output: {
filename: '[name].js',
path: __dirname + '/dist'
}
};
# Loaders
webpack 开箱只支持 JS 和 JSON 两种文件类型，通过 Loaders 去支持其他文件类型并且把它们转换成有效的模块，并且可以添加到依赖图中
本身是一个函数，接收源文件作为参数，返回转化的结果
常见 Loader
名称 | 描述 |
|---|---|
babel-loader | 转换 ES6、ES7 等 JS 新特性语法 |
css-loader | 支持 .css 文件的加载和解析 |
less-loader | 将 less 文件转换成 css |
ts-loader | 将 TS 转换成 JS |
file-loader | 进行图片、字体等的打包 |
raw-loader | 将文件以字符串的形式导入 |
thread-loader | 多进程打包 JS 和 CSS |
用法
const path = require('path');
module.exports = {
mode: 'production',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.txt$/, // 指定匹配规则
use: 'raw-loader' // 指定使用的 loader
}
]
}
};
# Plugins
插件用于 bundle 文件的优化，资源管理和环境变量注入，作用于整个构建过程
常用插件
名称 | 描述 |
|---|---|
CommonsChunkPlugin | 将 chunks 相同的模块代码提取成公共 js |
CleanWebpackPlugin | 清理构建目录 |
ExtractTextWebpackPlugin | 将 CSS 从 bunlde 文件里提取成一个独立的 CSS 文件 |
CopyWebpackPlugin | 将文件或者文件夹拷贝到构建的输出目录 |
HtmlwebpackPlugin | 创建 html 文件去承载输出的 bundle |
UglifyjsWebpackPlugin | 压缩 JS |
ZipWebpackPlugin | 将打包出的资源生成一个 zip 包 |
用法
const path = require('path');
module.exports = {
mode: 'production',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
]
};
# mode
指定当前的构建环境是：production（默认）、development 或 none
选项 | 描述 |
|---|---|
development | 设置 process.env.NODE_ENV 值为 development，开启 NamedChunksPlugin 和 NamedModulesPlugin |
production | 设置 process.env.NODE_ENV 值为 production，开启 FlagDependencyUsagePlugin,FlagIncludedChunksPlugin,ModuleConcatenationPlugin,NoEmitOnErrosPlugin,OccurrenceOrderPlugin,SideEffectsFlagPlugin,TerserPlugin |
none | 不开启任何优化选项 |
# 解析 ES6、JSX
# 解析 ES6
安装依赖
npm i @babel/core@7.4.4 @babel/preset-env@7.4.4 babel-loader@8.0.5 -Dwebpack.config.js
const path = require('path');
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
use: 'babel-loader',
}
]
}
};
.babelrc
{
"presets": [
"@babel/preset-env"
]
}
# 解析 JSX
依赖安装
npm i react@16.8.6 react-dom@16.8.6 @babel/preset-react@7.0.0 -D
.babelrc
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}
# 解析 CSS、Less 和 Sass
css-loader 用于加载 .css 文件，并且转换成 commonjs 对象
style-loader 将样式通过 <style> 标签插入到 head 中
# 解析 CSS
依赖安装
npm i style-loader@0.23.1 css-loader@2.1.1
webpack.config.js
const path = require('path');
module.exports = {
// ...
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
};
# 解析 Less
less-loader 用于将 less 转换成 css
npm i less@3.9.0 less-loader@5.0.0 -D
webpack.config.js
const path = require('path');
module.exports = {
// ...
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
'less-loader'
]
}
]
}
};