webpack4
webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。在 webpack 看来, 前端的所有资源文件(js/json/css/img/less/...)都会作为模块处理。它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。
使用
- 初始化 package.json
npm init - 下载并安装 webpack
npm install webpack webpack-cli -g
npm install webpack webpack-cli -D
开发环境指令：webpack src/js/index.js -o build/js/built.js --mode=development
功能：webpack 能够编译打包 js 和 json 文件，并且能将 es6 的模块化语法转换成浏览器能识别的语法。
生产环境指令：webpack src/js/index.js -o build/js/built.js --mode=production
功能：在开发配置功能上多一个功能，压缩代码。
- 问题
不能编译打包 css、img 等文件。
不能将 js 的 es6 基本语法转化为 es5 以下语法。
开发环境的基本配置
打包样式资源
- 下载安装 loader 包
npm i css-loader style-loader less-loader less -D - 修改配置文件
module: {
rules: [
// 详细 loader 配置
// 不同文件必须配置不同 loader 处理
{
// 匹配哪些文件
test: /\.css$/,
// 使用哪些 loader 进行处理
use: [
// use 数组中 loader 执行顺序：从右到左，从下到上 依次执行
// 创建 style 标签，将 js 中的样式资源插入进行，添加到 head 中生效
'style-loader',
// 将 css 文件变成 commonjs 模块加载 js 中，里面内容是样式字符串
'css-loader'
]
}
]
},
打包 HTML 资源
- 下载安装 plugin 包
npm install --save-dev html-webpack-plugin - 修改配置文件
plugins: [
// plugins 的配置
// html-webpack-plugin
// 功能：默认会创建一个空的 HTML，自动引入打包输出的所有资源（JS/CSS）
// 需求：需要有结构的 HTML 文件
new HtmlWebpackPlugin({
// 复制 './src/index.html' 文件，并自动引入打包输出的所有资源（JS/CSS）
template: './src/index.html'
})
],
打包图片资源
- 下载安装 loader 包
npm install --save-dev html-loader url-loader file-loader - 修改配置文件
module: {
rules: [
{
// 问题：默认处理不了 html 中 img 图片
// 处理图片资源
test: /\.(jpg|png|gif)$/,
// 使用一个 loader
// 下载 url-loader file-loader
loader: 'url-loader',
options: {
// 图片大小小于 8kb，就会被 base64 处理
// 优点: 减少请求数量（减轻服务器压力）
// 缺点：图片体积会更大（文件请求速度更慢）
limit: 8 * 1024,
// 问题：因为 url-loader 默认使用 es6 模块化解析，而 html-loader 引入图片是 commonjs
// 解析时会出问题：[object Module]
// 解决：关闭 url-loader 的 es6 模块化，使用 commonjs 解析
esModule: false,
// 给图片进行重命名
// [hash:10]取图片的 hash 的前 10 位
// [ext]取文件原来扩展名
name: '[hash:10].[ext]'
}
},
{
test: /\.html$/,
// 处理 html 文件的 img 图片（负责引入 img，从而能被 url-loader 进行处理）
loader: 'html-loader'
}
]
},
打包其他资源
module: {
rules: [
// 打包其他资源(除了 html/js/css 资源以外的资源)
{
// 排除 css/js/html 资源
exclude: /\.(css|js|html|less)$/,
loader: 'file-loader',
options: {
name: '[hash:10].[ext]'
}
}
]
}
devserver
devServer: {
// 项目构建后路径
contentBase: resolve(__dirname, 'build'),
// 启动 gzip 压缩
compress: true,
// 端口号
port: 3000,
// 自动打开浏览器
open: true
}
运行指令: npx webpack-dev-server
生产环境的基本配置
提取 css 成单独文件
- 下载插件
npm install --save-dev mini-css-extract-plugin - 修改配置文件
module: {
rules: [
{
test: /\.css$/,
use: [
// 创建 style 标签，将样式放入
// 'style-loader',
// 这个 loader 取代 style-loader。作用：提取 js 中的 css 成单独文件
MiniCssExtractPlugin.loader,
// 将 css 文件整合到 js 文件中
'css-loader'
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
// 对输出的 css 文件进行重命名
filename: 'css/built.css'
})
]
css 兼容性处理
- 下载 loader
npm install --save-dev postcss-loader postcss-preset-env - 修改配置文件
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: () => [
// postcss 的插件
require('postcss-preset-env')()
]
}
}
]
}
]
},
- 修改 package.json
"browserslist": {
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
],
"production": [
">0.2%",
"not dead",
"not op_mini all"
]
}
压缩 css
- 下载安装包
npm install --save-dev optimize-css-assets-webpack-plugin - 修改配置文件
plugins: [
// 压缩 css
new OptimizeCssAssetsWebpackPlugin()
]
js 语法检查
- 下载安装包
npm install --save-dev eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import - 修改配置文件
module: {
rules: [
/*
注意：只检查自己写的源代码，第三方的库是不用检查的
airbnb --> eslint-config-airbnb-base eslint-plugin-import eslint
*/
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'eslint-loader',
options: {
// 自动修复 eslint 的错误
fix: true
}
}
]
}
- 配置 package.json
"eslintConfig": {
"extends": "airbnb-base",
"env": {
"browser": true
}
}
js 兼容性处理
- 下载安装包
npm install --save-dev babel-loader @babel/core @babel/preset-env @babel/polyfill core-js - 修改配置文件
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
// 预设：指示 babel 做怎么样的兼容性处理
presets: [
[
'@babel/preset-env',
{
// 按需加载
useBuiltIns: 'usage',
// 指定 core-js 版本
corejs: {
version: 3
},
// 指定兼容性做到哪个版本浏览器
targets: {
chrome: '60',
firefox: '60',
ie: '9',
safari: '10',
edge: '17'
}
}
]
]
}
}
]
}
js 压缩
- 修改配置文件
// 生产环境下会自动压缩 js 代码
mode: 'production'
HTML 压缩
- 修改配置文件
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
// 压缩 html 代码
minify: {
// 移除空格
collapseWhitespace: true,
// 移除注释
removeComments: true
}
})
]