webpack
一.webpack基础
1.简单配置
1.1 安装依赖
$ npm install webpack webpack-cli -D # 安装到本地依赖
1.2 工作模式
webpack4之后支持0配置打包
webpack提供了三种模式：
- development，开发模式，打包更加快速，省了代码优化步骤
- production，生产模式，打包比较慢，会开启 tree-shaking 和 压缩代码
- none，不使用任何默认优化选项
如何配置：
module.exports = {
mode: 'development',
};
1.3 配置文件
虽然webpack之后支持0配置打包，但是实际项目中我们通常需要通过配置文件来打包，以便满足不同的需求。
const path = require('path')
module.exports = {
mode: 'development', // 模式
entry: './src/index.js', // 打包入口地址
output: {
filename: 'bundle.js', // 输出文件名
path: path.join(__dirname, 'dist') // 输出文件目录
}
}
1.4 Loader
Loader的作用是将webpack不认识的内容转换为认识的内容。以下是一些常用loader，
1.4.1 style-loader、css-loader、sass-loader
用途：
- style-loader用于将
css编译完成的样式，挂载到页面style标签上。 - css-loader用于识别
.css文件, 处理css必须配合style-loader共同使用，只安装css-loader样式不会生效。 - sass-loader,将sass语言转换成css语言。
配置：
module.exports = {
module: {
rules: [
{
test: /\.scss$/,
use: [
"style-loader",
"css-loader",
"sass-loader"
],
include: /src/,
},
]
}
}
1.4.2 postcss-loader
用途：用于补充css样式各种浏览器内核前缀
配置：
方式一：在webpack.config.js中配置
{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
plugins: [
require('autoprefixer')
]
}
}
]
}方式二：在根目录创建 postcss.config.js
module.exports = {
plugins: [
require("autoprefixer")({
//兼容浏览器的最近两个版本
//兼容市场占有率大于1%的浏览器（世界的）
overrideBrowserslist: ["last 2 versions", ">1%"],
}),
],
};1.4.3 babel-loader
用途：将Es6+ 语法转换为Es5语法。
安装：
cnpm i babel-loader @babel/core @babel/preset-env -D
- babel-loader 这是使babel和webpack协同工作的模块
- @bable/core 这是babel编译器核心模块
- @babel/preset-env 这是babel官方推荐的预置器，可根据用户的环境自动添加所需的插件和补丁来编译Es6代码
配置：
module.exports = {
module: {
rules: [
{
test: /\.js$/,
use: {
loader: "babel-loader",
options: {
presets: [
['@babel/preset-env', { targets: "defaults"}]
]
}
}
},
]
}
}
1.4.4 ts-loader
用途：用于配置项目typescript
安装：
cnpm i ts-loader typescript -D
配置：
tsconfig.json
{
"compilerOptions": {
"declaration": true,
"declarationMap": true, // 开启map文件调试使用
"sourceMap": true,
"target": "es5", // 转换为Es5语法
}
}
webpack.config.js
module.exports = {
entry: "./src/index.ts",
output: {
path: __dirname + "/dist",
filename: "index.js",
},
module: {
rules: [
{
{
test: /\.ts$/,
use: "ts-loader",
}
}
]
}
}
1.4.5 file-loader
用途：用于处理文件类型资源，如jpg，png等图片。返回值为publicPath为准。
安装：
cnpm i file-loader -D
配置：
module.exports = {
module: {
rules: [
{
test: /\.(png|jpg|jpeg)$/,
use: [
{
loader: "file-loader",
options: {
name: "[name]_[hash:8].[ext]",
publicPath: "https://www.baidu.com" //路径前缀
}
}
]
}
]
}
}
1.4.6 url-loader
用途：url-loader也是处理图片类型资源，只不过它与file-loader有一点不同，url-loader可以设置一个根据图片大小进行不同的操作，如果该图片大小大于指定的大小，则将图片进行打包资源，否则将图片转换为base64字符串合并到js文件里
安装：
cnpm i url-loader -D
配置：
module.exports = {
module: {
rules: [
{
test: /\.(png|jpg|jpeg)$/,
use: [
{
loader: "url-loader",
options: {
name: "[name]_[hash:8].[ext]",
limit: 10240, // 这里单位为(b) 10240 => 10kb
// 这里如果小于10kb则转换为base64打包进js文件，如果大于10kb则打包到dist目录
}
}
]
}
]
}
}
1.4.7 eslint-loader
用途：用于检查代码是否符合规范，是否存在语法错误。
安装：
cnpm i eslint-loader eslint -D
配置：
.eslintrc.js
module.exports = {
root: true,
env: {
browser: true,
},
rules: {
"no-alert": 0, // 禁止使用alert
"indent": [2, 4], // 缩进风格
"no-unused-vars": "error" // 变量声明必须使用
}
}
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.ts$/,
use: ["eslint-loader", "ts-loader"],
enforce: "pre",
exclude: /node_modules/
},
{
test: /\.ts$/,
use: "ts-loader",
exclude: /node_modules/
}
]
}
}
1.5 插件（plugin）
与 Loader 用于转换特定类型的文件不同，插件（Plugin）可以贯穿 Webpack 打包的生命周期，执行不同的任务
1.5.1 HotModuleReplacementPlugin
作用：模块热更新插件。Hot-Module-Replacement 的热更新是依赖于 webpack-dev-server，后者是在打包文件改变时更新打包文件或者 reload 刷新整个页面，HRM 是只更新修改的部分。
配置：
const webpack = require('webpack')
plugins: [
new webpack.HotModuleReplacementPlugin(), // 热更新插件
]
1.5.2 html-webpack-plugin
作用：生成 html 文件。将 webpack 中entry配置的相关入口 chunk 和 extract-text-webpack-plugin抽取的 css 样式 插入到该插件提供的template或者templateContent配置项指定的内容基础上生成一个 html 文件，具体插入方式是将样式link插入到head元素中，script插入到head或者body中。
配置：
const HtmlWebpackPlugin = require('html-webpack-plugin')
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: path.join(__dirname, '/index.html'),
minify: {
// 压缩HTML文件
removeComments: true, // 移除HTML中的注释
collapseWhitespace: true, // 删除空白符与换行符
minifyCSS: true, // 压缩内联css
},
inject: true,
}),
]
inject 有四个选项值
- true：默认值，
script标签位于html文件的body底部 - body：
script标签位于html文件的body底部（同 true） - head：
script标签位于head标签内 - false：不插入生成的 js 文件，只是单纯的生成一个
html文件
1.5.3 clean-webpack-plugin
作用：clean-webpack-plugin 用于在打包前清理上一次项目生成的 bundle 文件，它会根据 output.path 自动清理文件夹；这个插件在生产环境用的频率非常高，因为生产环境经常会通过 hash 生成很多 bundle 文件，如果不进行清理的话每次都会生成新的，导致文件夹非常庞大。
配置：
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
plugins: [
new HtmlWebpackPlugin({
template: path.join(__dirname, '/index.html'),
}),
new CleanWebpackPlugin(), // 所要清理的文件夹名称
]
1.5.4 extract-text-webpack-plugin
作用：将 css 成生文件，而非内联 。该插件的主要是为了抽离 css 样式,防止将样式打包在 js 中引起页面样式加载错乱的现象
配置：
const ExtractTextPlugin = require('extract-text-webpack-plugin')
plugins: [
// 将css分离到/dist文件夹下的css文件夹中的index.css
new ExtractTextPlugin('css/index.css'),
]
1.6 区分环境
本地开发和部署线上，通常是有不同的需求
本地环境：
- 需要更快的构建速度
- 需要打印 debug 信息
- 需要 live reload 或 hot reload 功能
- 需要 sourcemap 方便定位问题
- ...
生产环境：
- 需要更小的包体积，代码压缩+tree-shaking
- 需要进行代码分割
- 需要压缩图片体积
- ...
针对不同的需求，首先要做的就是做好环境的区分
1.本地安装 cross-env
npm install cross-env -D
2.配置启动命令
package.json
"scripts": {
"dev": "cross-env NODE_ENV=dev webpack serve --mode development",
"test": "cross-env NODE_ENV=test webpack --mode production",
"build": "cross-env NODE_ENV=prod webpack --mode production"
},
3.在 Webpack 配置文件中获取环境变量
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
console.log('process.env.NODE_ENV=', process.env.NODE_ENV) // 打印环境变量
const config = {
entry: './src/index.js', // 打包入口地址
output: {
filename: 'bundle.js', // 输出文件名
path: path.join(__dirname, 'dist') // 输出文件目录
},
module: {
rules: [
{
test: /\.css$/, //匹配所有的 css 文件
use: 'css-loader' // use: 对应的 Loader 名称
}
]
},
plugins:[ // 配置插件
new HtmlWebpackPlugin({
template: './src/index.html'
})
]
}
module.exports = (env, argv) => {
console.log('argv.mode=',argv.mode) // 打印 mode(模式) 值
// 这里可以通过不同的模式修改 config 配置
return config;
}
1.7 devServer
1.安装webpack-dev-server
npm intall webpack-dev-server当版本
version >= 4.0.0时，需要使用 devServer.static 进行配置，不再有devServer.contentBase配置项。
2.配置本地服务
// webpack.config.js
const config = {
// ...
devServer: {
contentBase: path.resolve(__dirname, 'public'), // 静态文件目录
compress: true, //是否启动压缩 gzip
port: 8080, // 端口号
// open:true // 是否自动打开浏览器
},
// ...
}
module.exports = (env, argv) => {
console.log('argv.mode=',argv.mode) // 打印 mode(模式) 值
// 这里可以通过不同的模式修改 config 配置
return config;
}
为什么要配置 contentBase ？
因为 webpack 在进行打包的时候，对静态文件的处理，例如图片，都是直接 copy 到 dist 目录下面。但是对于本地开发来说，这个过程太费时，也没有必要，所以在设置 contentBase 之后，就直接到对应的静态目录下面去读取文件，而不需对文件做任何移动，节省了时间和性能开销。
1.8 资源模块的使用
webpack5 新增资源模块(asset module)，允许使用资源文件（字体，图标等）而无需配置额外的 loader。
资源模块支持以下四个配置：
asset/resource将资源分割为单独的文件，并导出 url，类似之前的 file-loader 的功能.asset/inline将资源导出为 dataUrl 的形式，类似之前的 url-loader 的小于 limit 参数时功能.asset/source将资源导出为源码（source code）. 类似的 raw-loader 功能.asset会根据文件大小来选择使用哪种类型，当文件小于 8 KB（默认） 的时候会使用 asset/inline，否则会使用 asset/resource
配置文件
// ./src/index.js
const config = {
// ...
module: {
rules: [
// ...
{
test: /\.(jpe?g|png|gif)$/i,
type: 'asset',
generator: {
// 输出文件位置以及文件名
// [ext] 自带 "." 这个与 url-loader 配置不同
filename: "[name][hash:8][ext]"
},
parser: {
dataUrlCondition: {
maxSize: 50 * 1024 //超过50kb不转 base64
}
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/i,
type: 'asset',
generator: {
// 输出文件位置以及文件名
filename: "[name][hash:8][ext]"
},
parser: {
dataUrlCondition: {
maxSize: 10 * 1024 // 超过100kb不转 base64
}
}
},
]
},
// ...
}
module.exports = (env, argv) => {
console.log('argv.mode=',argv.mode) // 打印 mode(模式) 值
// 这里可以通过不同的模式修改 config 配置
return config;
}