npm install webpack webpack-cli webpack-dev-server style-loader css-loader html-webpack-plugin cross-env mini-css-extract-plugin less less-loader postcss postcss-loader autoprefixer @babel/core @babel/preset-env babel-loader typescript ts-loader @babel/preset-typescript eslint eslint-webpack-plugin eslint-config-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node @typescript-eslint/eslint-plugin --save
entry 选项用于指定 Webpack 打包的入口文件，即告诉 Webpack 从哪个文件开始打包entry 可以配置为一个字符串、一个数组或一个对象webpack.config.js
module.exports = {
mode:'development',
devtool:false,
entry: './src/index.js',
/*
entry: ['./src/entry1.js','./src/entry2.js'],
entry:{
app: './src/index.js',
}
*/
};
package.json
{
"scripts": {
"build": "webpack"
}
}
src\index.js
console.log('index');
output 选项用于指定 Webpack 打包后输出的文件和路径，即告诉 Webpack 打包后的文件应该放在哪个目录下以及如何命名output 通常配置为一个对象，包含了多个属性path 指定了打包文件的输出路径，必须是一个绝对路径filename 指定了打包后的文件名，可以包含路径信息webpack.config.js
+const path = require('path');
module.exports = {
mode:'development',
devtool:false,
entry: './src/index.js',
+ output: {
+ path: path.resolve(__dirname, 'dist'),
+ filename: 'main.js'
+ }
};
src\index.js
+import './index.css';
console.log('index');
src\index.css
body{
color: red;
}
test 属性指定了匹配的文件类型use 属性指定了转换方式exclude用于指定哪些文件或目录不应该被 loader 处理css-loader作用是将CSS代码转换为JavaScript代码css-loader 可以识别 @import 和 url() 等语句，实现 CSS 模块的引用和解析style-loader最终通过style标签动态插入到HTML中style-loader 用于将 css-loader 转换后的 JavaScript 对象，以 style 标签的形式动态插入到 HTML 文件中const path = require('path');
module.exports = {
mode:'development',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.js'
},
+ module: {
+ rules: [
+ { test: /\.css$/, use: ['style-loader','css-loader']}
+ ]
+ }
};
html-webpack-plugin 是 Webpack 中用于生成 HTML 文件的插件，可以根据模板生成 HTML 文件，并自动将打包后的 JS、CSS 文件引入 HTML 文件中title 指定了 HTML 文件的标题template 指定了 HTML 文件的模板路径，即使用该模板生成 HTML 文件webpack.config.js
const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode:'development',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.js'
},
module: {
rules: [
{ test: /\.css$/, use: ['style-loader','css-loader']}
]
},
+ plugins: [
+ new HtmlWebpackPlugin({template: './src/index.html'})
+ ]
};
src\index.html
<!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>
</body>
</html>
webpack-dev-server是一个基于 Express 的 Web 服务器，它可以为 Webpack 打包后的代码提供一个本地开发环境，支持实时刷新、热替换和自动构建等功能，大大提高了开发效率static：静态资源目录的路径，设置该参数可以在服务器中访问这些静态资源compress：启用 gzip 压缩，默认是关闭的port：服务器端口，默认是 8080host：服务器主机名，默认是 localhostopen：是否自动在浏览器中打开页面，默认是关闭的hot：启用模块热替换功能，默认是关闭的watchFiles：需要监听的文件列表，当这些文件发生变化时，自动重启服务器historyApiFallback：参数用于设置是否启用 HTML5 历史记录 API，用于处理单页应用的路由问题。默认情况下，当使用浏览器的前进/后退按钮时，devServer 会尝试根据 URL 路径查找对应的静态资源，如果找不到就返回 404。如果启用了 historyApiFallback，则会将这些请求重定向到 index.html，然后交给前端路由来处理webpack-dev-server 命令后，webpack-dev-server 将会启动一个本地 Web 服务器，并监听我们定义的端口。我们可以在浏览器中访问 http://localhost:9000，即可预览打包后的页面，并实现实时刷新和热替换功能webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode:'development',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.js'
},
+ devServer: {
+ static: path.join(__dirname, 'public'),
+ compress: true,
+ host:'localhost',
+ port: 9000,
+ open:true,
+ hot:true,
+ historyApiFallback: true,
+ watchFiles: [
+ "src/**/*.js",
+ "src/**/*.css"
+ ]
+ },
module: {
rules: [
{ test: /\.css$/, use: ['style-loader','css-loader']}
]
},
plugins: [
new HtmlWebpackPlugin({template: './src/index.html'})
]
};
package.json
{
"scripts": {
"build": "webpack",
+ "dev": "webpack serve"
}
}
css-loader 可以将 CSS 文件中的样式代码转换成 JavaScript 对象，并在 JavaScript 中导出，以便于其他 Loader 或插件进行处理。css-loader 支持使用 import 和 url() 等方式导入 CSS 文件和资源文件style-loader 可以将 CSS 样式注入到 Webpack 打包后的 JavaScript 文件中，使得页面能够正确显示样式。它会将 CSS 样式代码插入到页面的 style 标签中，或以内联样式的方式插入到 head 标签中mini-css-extract-plugin 当我们使用 style-loader 将 CSS 样式注入到 JavaScript 文件中时，每次页面加载都会将样式代码包含在 JavaScript 文件中，造成 JavaScript 文件变大，加载速度变慢，降低了页面的性能,为了解决这个问题，可以使用 mini-css-extract-plugin 插件，将 CSS 文件单独提取出来，生成独立的 CSS 文件，可以在页面加载时并行加载 CSS 文件，避免了 JavaScript 文件变大、加载缓慢的问题。此外，使用独立的 CSS 文件也可以让样式代码和 JavaScript 代码分离，方便维护和修改，提高开发效率package.json
{
"scripts": {
+ "build": "cross-env NODE_ENV=production webpack",
+ "dev": "cross-env NODE_ENV=development webpack serve"
}
}
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
mode:'development',
devtool:false,
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.js'
},
devServer: {
static: path.join(__dirname, 'public'),
compress: true,
port: 9000
},
module: {
rules: [
{ test: /\.css$/, use: [
+ (process.env.NODE_ENV === 'development' ?
+ 'style-loader' :
+ MiniCssExtractPlugin.loader)
,'css-loader']}
]
},
plugins: [
new HtmlWebpackPlugin({template: './src/index.html'}),
+ new MiniCssExtractPlugin(),
]
};
less 是一种基于 CSS 的扩展语言，它提供了更多的功能，比如变量、嵌套规则、运算、混合等等。Less 的代码可以转换为标准的 CSS 代码，从而可以在浏览器中直接使用less-loader 是一个 Webpack 的 loader，它可以将 Less 代码转换为标准的 CSS 代码。在 Webpack 配置文件中，通过配置 Less-loader 可以让 Webpack 在构建项目时自动将 Less 代码转换为 CSS 代码sass 是一种基于 CSS 的扩展语言，它提供了更多的功能，比如变量、嵌套规则、运算、混合等等。Sass 的代码可以转换为标准的 CSS 代码，从而可以在浏览器中直接使用sass-loader 是一个 Webpack 的 loader，它可以将 Sass 代码转换为标准的 CSS 代码。在 Webpack 配置文件中，通过配置 Sass-loader 可以让 Webpack 在构建项目时自动将 Sass 代码转换为 CSS 代码stylus 是一种基于 CSS 的扩展语言，它提供了更多的功能，比如变量、嵌套规则、运算、混合等等。Stylus 的代码可以转换为标准的 CSS 代码，从而可以在浏览器中直接使用Stylus-loader 是一个 Webpack 的 loader，它可以将 Stylus 代码转换为标准的 CSS 代码。在 Webpack 配置文件中，通过配置 Stylus-loader 可以让 Webpack 在构建项目时自动将 Stylus 代码转换为 CSS 代码src\index.js
import './index.css';
+import './index.less';
console.log('index');
src\index.less
@color:red;
body{
color: @color;
}
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
mode: 'development',
devtool: false,
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.js'
},
devServer: {
static: path.join(__dirname, 'public'),
compress: true,
port: 9000
},
module: {
rules: [
{
test: /\.css$/, use: [
(process.env.NODE_ENV === 'development' ?
'style-loader' :
MiniCssExtractPlugin.loader),
'css-loader']
},
+ {
+ test: /\.less$/, use: [
+ (process.env.NODE_ENV === 'development' ?
+ 'style-loader' :
+ MiniCssExtractPlugin.loader),
+ 'css-loader',
+ 'less-loader'
+ ]
+ }
]
},
plugins: [
new HtmlWebpackPlugin({ template: './src/index.html' }),
new MiniCssExtractPlugin(),
]
};
PostCSS 是一个使用 JavaScript 插件转换 CSS 的工具。它可以帮助我们自动处理浏览器前缀、使用未来的 CSS 语法等问题PostCSS 将 CSS 解析成 AST（抽象语法树），然后使用插件对 AST 进行处理，最后将处理后的 AST 转换为 CSS 代码browserslistrc 是一个文件，它用于指定当前项目需要支持的浏览器范围last 2 versions：表示需要支持最近两个版本的所有浏览器> 1%：表示需要支持全球使用率超过 1% 的浏览器iOS 7：表示需要支持 iOS 7 版本的 Safari 浏览器last 3 iOS versions：表示需要支持最近三个版本的 iOS Safari 浏览器webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
mode: 'development',
devtool: false,
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.js'
},
devServer: {
static: path.join(__dirname, 'public'),
compress: true,
port: 9000
},
module: {
rules: [
{
test: /\.css$/,
use: [
(process.env.NODE_ENV === 'development' ?
'style-loader' :
MiniCssExtractPlugin.loader),
'css-loader',
+ "postcss-loader"
]
},
{
test: /\.less$/,
use: [
(process.env.NODE_ENV === 'development' ?
'style-loader' :
MiniCssExtractPlugin.loader),
'css-loader',
+ "postcss-loader",
'less-loader'
]
}
]
},
plugins: [
new HtmlWebpackPlugin({ template: './src/index.html' }),
new MiniCssExtractPlugin(),
]
};
postcss.config.js
module.exports = {
plugins: [
require("autoprefixer")
]
};
.browserslistrc
# Browsers that we support
last 2 versions
> 1%
iOS 7
last 3 iOS versions
@babel/preset-env是 Babel 的一个预设，用于自动检测目标环境并根据需要转换 JavaScript 代码@babel/preset-env 会根据配置的目标环境，自动检测当前代码中使用的 ECMAScript 特性，并通过转换、降级或添加 polyfill 来保证代码在目标环境中能够正常运行@babel/preset-env 的配置非常灵活，可以通过 .babelrc、babel.config.js、Webpack配置等多种方式来指定需要支持的目标环境babel-preset-react是 Babel 的一个规则集，包含了常用的React插件，例如支持 preset-flow、syntax-jsx 和 transform-react-jsx 等插件@babel/preset-typescript 是 Babel 的一个规则集，用于将 TypeScript 代码转译为 JavaScript 代码@babel/preset-flow 是 Babel 的一个规则集，用于将 Flow 代码转译为 JavaScript 代码webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
mode: 'development',
devtool: false,
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.js'
},
devServer: {
static: path.join(__dirname, 'public'),
compress: true,
port: 9000
},
module: {
rules: [
{
test: /\.js$/,
use: [
{
+ loader: 'babel-loader'
}
]
},
{
test: /\.css$/, use:
[
(process.env.NODE_ENV === 'development' ?
'style-loader' :
MiniCssExtractPlugin.loader),
'css-loader',
"postcss-loader"
]
},
{
test: /\.less$/,
use: [
(process.env.NODE_ENV === 'development' ?
'style-loader' :
MiniCssExtractPlugin.loader),
'css-loader',
"postcss-loader",
'less-loader'
]
}
]
},
plugins: [
new HtmlWebpackPlugin({ template: './src/index.html' }),
new MiniCssExtractPlugin(),
]
};
.babelrc
{
"presets": [
[
"@babel/preset-env",
{
"targets": {
"ie": "11"
}
}
]
]
}
src\index.js
let sum = (a,b)=>a+b;
console.log(sum(1,2));
resolve.extensions 是 Webpack 配置中的一个选项，用于配置在导入模块时可以省略的后缀名,在模块导入时，Webpack会按照指定的后缀名顺序依次尝试加载文件，直到找到匹配的文件为止ts-loader 是 Webpack 中的一个加载器，用于将 TypeScript 代码转换成 JavaScript 代码。它是基于 typescript 编译器实现的，支持所有 TypeScript 的语法和特性，可以帮助开发者在 Webpack 中使用 TypeScript 进行开发webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
mode: 'development',
devtool: false,
+ entry: './src/index.ts',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.js'
},
devServer: {
static: path.join(__dirname, 'public'),
compress: true,
port: 9000
},
+ resolve: {
+ extensions: ['.ts', '.js'],
+ },
module: {
rules: [
+ {
+ test: /\.ts$/,
+ use: 'ts-loader',
+ exclude: /node_modules/
+ },
{
test: /\.js$/,
use: [
{
loader: 'babel-loader'
}
]
},
{
test: /\.css$/, use:
[
(process.env.NODE_ENV === 'development' ?
'style-loader' :
MiniCssExtractPlugin.loader),
'css-loader',
"postcss-loader"
]
},
{
test: /\.less$/,
use: [
(process.env.NODE_ENV === 'development' ?
'style-loader' :
MiniCssExtractPlugin.loader),
'css-loader',
"postcss-loader",
'less-loader'
]
}
]
},
plugins: [
new HtmlWebpackPlugin({ template: './src/index.html' }),
new MiniCssExtractPlugin(),
]
};
tsconfig.json
{
"compilerOptions": {
"noImplicitAny": true,
"moduleResolution": "node"
}
}
src\index.ts
@babel/preset-typescript 是 Babel 的一个预设，用于将 TypeScript 代码转换为 JavaScript 代码webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
mode: 'development',
devtool: false,
entry: './src/index.ts',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.js'
},
devServer: {
static: path.join(__dirname, 'public'),
compress: true,
port: 9000
},
resolve: {
extensions: ['.ts', '.js'],
},
module: {
rules: [
{
test: /\.ts$/,
use:
+ [
+ {
+ loader: 'babel-loader',
+ options: {
+ presets: ['@babel/preset-typescript']
+ }
+ }
+ ],
exclude: /node_modules/
},
{
test: /\.js$/,
use: [
{
loader: 'babel-loader'
}
]
},
{
test: /\.css$/, use:
[
(process.env.NODE_ENV === 'development' ?
'style-loader' :
MiniCssExtractPlugin.loader),
'css-loader',
"postcss-loader"
]
},
{
test: /\.less$/,
use: [
(process.env.NODE_ENV === 'development' ?
'style-loader' :
MiniCssExtractPlugin.loader),
'css-loader',
"postcss-loader",
'less-loader'
]
}
]
},
plugins: [
new HtmlWebpackPlugin({ template: './src/index.html' }),
new MiniCssExtractPlugin(),
]
};
eslint-config-airbnb 是Airbnb提供的代码风格规则集，它是ESLint生态第一个成名的规则集合之一。它的优点在于提供了一套完整的、可自定义的代码规范，旨在帮助开发者编写具有一致性和可读性的代码eslint-config-standard遵循Standard.js代码风格规范，提供了最便捷的统一代码风格的方式。使用该规则集可以避免因代码风格不一致而引起的错误和混乱eslint-plugin-vue和eslint-plugin-react插件来实现对SFC文件和React代码风格的检查@typescript-eslint/eslint-plugin插件来检查代码风格和语法错误eslint-plugin-sonarjs插件，该插件基于Sonar提供了代码质量检查工具，提供圈复杂度、代码重复率等检测功能webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const ESLintPlugin = require('eslint-webpack-plugin')
module.exports = {
mode: 'development',
devtool: false,
entry: './src/index.ts',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.js'
},
devServer: {
static: path.join(__dirname, 'public'),
compress: true,
port: 9000
},
resolve: {
extensions: ['.ts', '.js'],
},
module: {
rules: [
{
test: /\.ts$/,
use:
[
{
loader: 'babel-loader',
options: {
presets: ['@babel/preset-typescript']
}
}
],
exclude: /node_modules/
},
{
test: /\.js$/,
use: [
{
loader: 'babel-loader'
}
]
},
{
test: /\.css$/, use:
[
(process.env.NODE_ENV === 'development' ?
'style-loader' :
MiniCssExtractPlugin.loader),
'css-loader',
"postcss-loader"
]
},
{
test: /\.less$/,
use: [
(process.env.NODE_ENV === 'development' ?
'style-loader' :
MiniCssExtractPlugin.loader),
'css-loader',
"postcss-loader",
'less-loader'
]
}
]
},
plugins: [
new HtmlWebpackPlugin({ template: './src/index.html' }),
new MiniCssExtractPlugin(),
+ new ESLintPlugin({ extensions: ['.js', '.ts'] })
]
};
.eslintrc
{
"parser": "@typescript-eslint/parser",
"plugins": ["@typescript-eslint"],
"extends": ["plugin:@typescript-eslint/recommended"]
}
src\index.ts
let sum = (a:number,b:number)=>a+b;
console.log(sum(1,2));
module.rules.type用于指定加载器的类型，也就是告诉Webpack该如何处理不同类型的文件asset/resource类型的加载器会生成带有[hash][ext][query]后缀的文件名。如果需要自定义文件名，可以通过设置output.assetModuleFilename属性进行控制module.rules.parser.dataUrlCondition用于限制文件大小的阈值Asset Modules类型通过添加 4 种新的模块类型替代了所有这些加载器asset/resource 生成单独的文件并导出 URLasset/inline 导出资产的数据 URIasset/source 导出资产的源代码asset 会自动选择导出数据 URI 还是生成单独的文件,可以设置文件大小限制来实现webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const ESLintPlugin = require('eslint-webpack-plugin')
module.exports = {
mode: 'development',
devtool: false,
entry: './src/index.ts',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.js'
},
devServer: {
static: path.join(__dirname, 'public'),
compress: true,
port: 9000
},
resolve: {
extensions: ['.ts', '.js'],
},
module: {
rules: [
{
test: /\.ts$/,
use:
[
{
loader: 'babel-loader',
options: {
presets: ['@babel/preset-typescript']
}
}
],
exclude: /node_modules/
},
{
test: /\.js$/,
use: [
{
loader: 'babel-loader'
}
]
},
{
test: /\.css$/, use:
[
(process.env.NODE_ENV === 'development' ?
'style-loader' :
MiniCssExtractPlugin.loader),
'css-loader',
"postcss-loader"
]
},
{
test: /\.less$/,
use: [
(process.env.NODE_ENV === 'development' ?
'style-loader' :
MiniCssExtractPlugin.loader),
'css-loader',
"postcss-loader",
'less-loader'
]
},
+ {
+ test: /\.(png)$/,
+ type: 'asset/resource'
+ },
+ {
+ test: /\.(jpg)$/,
+ type: "asset/inline"
+ },
+ {
+ test: /\.(bmp)$/,
+ type: "asset",
+ parser: {
+ dataUrlCondition: {
+ maxSize: 1024
+ }
+ }
+ },
{
test: /\.svg$/i,
type: "asset/source"
},
]
},
plugins: [
new HtmlWebpackPlugin({ template: './src/index.html' }),
new MiniCssExtractPlugin(),
new ESLintPlugin({ extensions: ['.js', '.ts'] })
]
};
mozjpeg、optipng、pngquant、svgo、gifsicle和webp等，可以自动选择最优的优化工具对图片进行处理cnpm install image-webpack-loader --save
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const ESLintPlugin = require('eslint-webpack-plugin')
module.exports = {
mode: 'development',
devtool: false,
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.js'
},
devServer: {
static: path.join(__dirname, 'public'),
compress: true,
port: 9000
},
resolve: {
extensions: ['.ts', '.js'],
},
module: {
rules: [
{
test: /\.ts$/,
use:
[
{
loader: 'babel-loader',
options: {
presets: ['@babel/preset-typescript']
}
}
],
exclude: /node_modules/
},
{
test: /\.js$/,
use: [
{
loader: 'babel-loader'
}
]
},
{
test: /\.css$/, use:
[
(process.env.NODE_ENV === 'development' ?
'style-loader' :
MiniCssExtractPlugin.loader),
'css-loader',
"postcss-loader"
]
},
{
test: /\.less$/,
use: [
(process.env.NODE_ENV === 'development' ?
'style-loader' :
MiniCssExtractPlugin.loader),
'css-loader',
"postcss-loader",
'less-loader'
]
},
{
test: /\.(png)$/,
type: 'asset/resource'
},
{
test: /\.(jpg)$/,
type: "asset/inline"
},
{
test: /\.(bmp)$/,
type: "asset",
parser: {
dataUrlCondition: {
maxSize: 1024
}
}
},
{
test: /\.svg$/i,
type: "asset/source"
},
+ {
+ // 匹配文件的正则表达式，这里表示匹配JPG、PNG、GIF和SVG格式的图片文件
+ test: /\.(jpe?g|png|gif|svg)$/i,
+ use: [
+ {
+ // 使用image-webpack-loader对图片进行优化和压缩
+ loader: 'image-webpack-loader',
+ options: {
+ // 是否禁用图片优化和压缩
+ disable: process.env.NODE_ENV === 'development',
+ mozjpeg: {
+ progressive: true, // 是否开启渐进式JPEG，可以有效提升JPEG图片加载速度
+ quality: 65 // 压缩JPEG图片的质量，取值范围为0到100，值越大质量越好但文件越大
+ },
+ optipng: {
+ enabled: true // 是否开启PNG图片的优化，可以有效提升PNG图片加载速度
+ },
+ pngquant: {
+ // 压缩PNG图片的质量范围，取值范围为0到1，值越大质量越好但文件越大
+ // 第一个数字表示压缩质量的下限，第二个数字表示压缩质量的上限
+ quality: [0.65, 0.9],
+ speed: 4 // 压缩PNG图片的速度，取值范围为1到10，值越大速度越快但质量越低
+ },
+ svgo: {
+ plugins: [ // 压缩SVG图片的插件列表，这里包含removeViewBox和cleanupIDs两个插件
+ { //用于删除SVG图片中的viewBox属性
+ //viewBox属性是用来指定SVG视口范围的，它的值是一个矩形框的坐标和宽高
+ removeViewBox: false
+ },
+ { //用于删除SVG图片中的无用ID属性
+ cleanupIDs: true
+ }
+ ]
+ },
+ gifsicle: {
+ interlaced: true // 是否开启GIF图片的隔行扫描,可以有效提升GIF图片加载速度
+ }
+ }
+ }
+ ]
+ }
]
},
plugins: [
new HtmlWebpackPlugin({ template: './src/index.html' }),
new MiniCssExtractPlugin(),
//new ESLintPlugin({ extensions: ['.js', '.ts'] })
]
};
responsive-loader是一个webpack的loader，用于实现响应式图片的功能。它可以根据设备屏幕大小和像素密度等因素自动调整图片大小和清晰度，从而提高网站的用户体验和性能cnpm i responsive-loader sharp --save
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const ESLintPlugin = require('eslint-webpack-plugin')
module.exports = {
mode: 'development',
devtool: false,
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.js'
},
devServer: {
static: path.join(__dirname, 'public'),
compress: true,
port: 9000
},
resolve: {
extensions: ['.ts', '.js'],
},
module: {
rules: [
{
test: /\.ts$/,
use:
[
{
loader: 'babel-loader',
options: {
presets: ['@babel/preset-typescript']
}
}
],
exclude: /node_modules/
},
{
test: /\.js$/,
use: [
{
loader: 'babel-loader'
}
]
},
{
test: /\.css$/, use:
[
(process.env.NODE_ENV === 'development' ?
'style-loader' :
MiniCssExtractPlugin.loader),
'css-loader',
"postcss-loader"
]
},
{
test: /\.less$/,
use: [
(process.env.NODE_ENV === 'development' ?
'style-loader' :
MiniCssExtractPlugin.loader),
'css-loader',
"postcss-loader",
'less-loader'
]
},
/* {
test: /\.(png)$/,
type: 'asset/resource'
},
{
test: /\.(jpg)$/,
type: "asset/inline"
},
{
test: /\.(bmp)$/,
type: "asset",
parser: {
dataUrlCondition: {
maxSize: 1024
}
}
},
{
test: /\.svg$/i,
type: "asset/source"
},
{
// 匹配文件的正则表达式，这里表示匹配JPG、PNG、GIF和SVG格式的图片文件
test: /\.(jpe?g|png|gif|svg)$/i,
use: [
{
// 使用image-webpack-loader对图片进行优化和压缩
loader: 'image-webpack-loader',
options: {
// 是否禁用图片优化和压缩
disable: process.env.NODE_ENV === 'development',
mozjpeg: {
progressive: true, // 是否开启渐进式JPEG，可以有效提升JPEG图片加载速度
quality: 65 // 压缩JPEG图片的质量，取值范围为0到100，值越大质量越好但文件越大
},
optipng: {
enabled: true // 是否开启PNG图片的优化，可以有效提升PNG图片加载速度
},
pngquant: {
// 压缩PNG图片的质量范围，取值范围为0到1，值越大质量越好但文件越大
// 第一个数字表示压缩质量的下限，第二个数字表示压缩质量的上限
quality: [0.65, 0.9],
speed: 4 // 压缩PNG图片的速度，取值范围为1到10，值越大速度越快但质量越低
},
svgo: {
plugins: [ // 压缩SVG图片的插件列表，这里包含removeViewBox和cleanupIDs两个插件
{ //用于删除SVG图片中的viewBox属性
//viewBox属性是用来指定SVG视口范围的，它的值是一个矩形框的坐标和宽高
removeViewBox: false
},
{ //用于删除SVG图片中的无用ID属性
cleanupIDs: true
}
]
},
gifsicle: {
interlaced: true // 是否开启GIF图片的隔行扫描,可以有效提升GIF图片加载速度
}
}
}
]
}, */
+ {
+ test: /\.(jpe?g|png)$/i,
+ //oneOf是一个优化选项，用于提高打包的速度
+ oneOf:[
+ {
+ //resourceQuery是一个用于匹配请求资源的URL中查询字符中
+ resourceQuery:/sizes/,
+ use:[
+ {
+ loader:'responsive-loader',
+ options:{
+ sizes:[300,600,1024],
+ adapter:require('responsive-loader/sharp')
+ }
+ }
+ ]
+ },
+ {
+ type: 'asset/resource',
+ }
+ ]
+ }
]
},
plugins: [
new HtmlWebpackPlugin({ template: './src/index.html' }),
new MiniCssExtractPlugin(),
//new ESLintPlugin({ extensions: ['.js', '.ts'] })
]
};
src\index.js
import responsiveImg from './images/bg.png?sizes[]=300,sizes[]=600,sizes[]=1024';
console.log(bg);
let image = new Image();
image.srcset = responsiveImg.srcSet;
image.sizes = `(min-width: 1024) 1024px,100vw`;
document.body.appendChild(image);
webpack-spritesmith是一个webpack插件，用于生成雪碧图。它可以将多个小图片合并成一张大图片，并在生成的CSS文件中自动生成background-position属性和样式代码，简化了雪碧图的生成和使用过程resourceQuery是一个用于匹配资源请求URL的查询字符串。它可以用于在webpack中对不同资源做不同的处理oneOf是一个用于优化打包速度的属性。通常情况下，webpack会按照配置中的loader顺序依次尝试处理模块，直到找到能够处理该模块的loader，这个过程会花费一定的时间，影响打包速度。而使用oneOf可以让webpack只尝试一次匹配，并使用第一个匹配成功的loader来处理模块，从而提升打包速度webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const ESLintPlugin = require('eslint-webpack-plugin')
const SpritesmithPlugin = require('webpack-spritesmith');
module.exports = {
mode: 'development',
devtool: false,
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.js'
},
devServer: {
static: path.join(__dirname, 'public'),
compress: true,
port: 9000
},
resolve: {
extensions: ['.ts', '.js'],
},
module: {
rules: [
{
test: /\.ts$/,
use:
[
{
loader: 'babel-loader',
options: {
presets: ['@babel/preset-typescript']
}
}
],
exclude: /node_modules/
},
{
test: /\.js$/,
use: [
{
loader: 'babel-loader'
}
]
},
{
test: /\.css$/, use:
[
(process.env.NODE_ENV === 'development' ?
'style-loader' :
MiniCssExtractPlugin.loader),
'css-loader',
"postcss-loader"
]
},
{
test: /\.less$/,
use: [
(process.env.NODE_ENV === 'development' ?
'style-loader' :
MiniCssExtractPlugin.loader),
'css-loader',
"postcss-loader",
+ {
+ loader:'less-loader',
+ options:{
+ lessOptions:{
+ paths:[
+ path.resolve(__dirname,'src/spritesmith-generated')
+ ]
+ }
+ }
+ }
]
},
/* {
test: /\.(png)$/,
type: 'asset/resource'
},
{
test: /\.(jpg)$/,
type: "asset/inline"
}, */
{
test: /\.(bmp)$/,
type: "asset",
parser: {
dataUrlCondition: {
maxSize: 1024
}
}
},
{
test: /\.svg$/i,
type: "asset/source"
},
{
// 匹配文件的正则表达式，这里表示匹配JPG、PNG、GIF和SVG格式的图片文件
test: /\.(jpe?g|png|gif|svg)$/i,
use: [
{
// 使用image-webpack-loader对图片进行优化和压缩
loader: 'image-webpack-loader',
options: {
// 是否禁用图片优化和压缩
disable: process.env.NODE_ENV === 'development',
mozjpeg: {
progressive: true, // 是否开启渐进式JPEG，可以有效提升JPEG图片加载速度
quality: 65 // 压缩JPEG图片的质量，取值范围为0到100，值越大质量越好但文件越大
},
optipng: {
enabled: true // 是否开启PNG图片的优化，可以有效提升PNG图片加载速度
},
pngquant: {
// 压缩PNG图片的质量范围，取值范围为0到1，值越大质量越好但文件越大
// 第一个数字表示压缩质量的下限，第二个数字表示压缩质量的上限
quality: [0.65, 0.9],
speed: 4 // 压缩PNG图片的速度，取值范围为1到10，值越大速度越快但质量越低
},
svgo: {
plugins: [ // 压缩SVG图片的插件列表，这里包含removeViewBox和cleanupIDs两个插件
{ //用于删除SVG图片中的viewBox属性
//viewBox属性是用来指定SVG视口范围的，它的值是一个矩形框的坐标和宽高
removeViewBox: false
},
{ //用于删除SVG图片中的无用ID属性
cleanupIDs: true
}
]
},
gifsicle: {
interlaced: true // 是否开启GIF图片的隔行扫描,可以有效提升GIF图片加载速度
}
}
}
]
},
{
test: /\.(jpe?g|png)$/i,
oneOf:[
{
resourceQuery: /sizes?/,
use: [
{
loader: 'responsive-loader',
options: {
adapter: require('responsive-loader/sharp'),
},
},
]
},
{
type:'asset/resource',
}
]
},
]
},
plugins: [
new HtmlWebpackPlugin({ template: './src/index.html' }),
new MiniCssExtractPlugin(),
//new ESLintPlugin({ extensions: ['.js', '.ts'] })
+ new WebpackSpritesmith({
+ src:{//指定输入的文件
+ cwd:path.resolve(__dirname,'src/images/icons'),
+ glob:'**/*.png'
+ },
+ target:{//指定输出的文件路径
+ image:path.resolve(__dirname,'src/spritesmith-generated/sprite.png'),
+ css:path.resolve(__dirname,'src/spritesmith-generated/sprite.less'),
+ },
+ apiOptions:{
+ cssImageRef: "sprite.png"
+ },
+ spritesmithOptions: {
+ algorithm: 'top-down',
+ padding: 10
+ }
+ })
]
};
src\index.js
import './icons.less'
src\icons.less
@import 'sprite.less';
.icon-twitter {
.sprite(@twitter);
}
.icon-facebook {
.sprite(@facebook);
}
.icon-github {
.sprite(@github);
}
module.exports = {
entry: './src/index.js'
};
module.exports = {
entry: {
app:()=>'./src/app.js'
}
};
module.exports = {
entry: ['./src/app.js', './src/vendor.js']
};
import：声明入口文件，可以是路径字符串或路径数组（多入口）dependOn：声明该入口的前置依赖Bundle，即在该入口代码执行前需要先执行的代码块webpack.config.js
module.exports = {
mode: 'development',
devtool: false,
entry:{
+ vendor:"./src/vendor.js",
+ main: { import: "./src/index.js", dependOn: "vendor" }
}
}
src\index.js
import {vendor} from './vendor.js';
console.log(vendor);
src\vendor.js
export const vendor = 'vendor';
runtime：设置该入口的Runtime Chunk。若该属性不为空，Webpack会将该入口的运行时代码抽离成单独的Bundleruntime属性来指定该入口的Runtime ChunkRuntime Chunk是默认被打包生成的，它会被注入到每一个输出文件中，但是Webpack 4之后可以通过entry中的runtime属性来控制是否生成Runtime Chunkwebpack.config.js
module.exports = {
mode: 'development',
devtool: false,
entry:{
+ vendor:{ import: "./src/vendor.js", runtime: "runtime-vendor" },
+ main: { import: "./src/index.js", runtime: "runtime-main" }
}
}
output.publicPath：指定产物发布的路径，通常用于处理静态资源的引用路径output.clean：指定打包前是否自动清理打包目录，以避免产生垃圾文件output.chunkLoading：指定异步模块加载的技术方案，当打包出的产物中包含异步加载的模块时，Webpack会根据chunkLoading属性的值来决定如何加载这些模块。可选的值有false、jsonp、require等false：不使用异步加载，即将所有模块打包到一个文件中。这种方式的优点是简单易用，缺点是可能会导致打包文件过大，影响页面加载速度。webpack.config.js
module.exports = {
mode: 'development',
devtool: false,
entry:"./src/index.js",
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js',
+ publicPath:'/',
+ clean:true,
+ chunkLoading:'jsonp'
}
}
src\index.js
import('./vendor').then(res=>console.log(res))
如果你有单独的后端开发服务器 API，并且希望在同域名下发送 API 请求 ，那么代理某些 URL 会很有用。
devServer: {
proxy: {
"/api": 'http://localhost:3000'
}
}
devServer: {
proxy: {
"/api": {
target: 'http://localhost:3000',
pathRewrite:{"^/api":""}
}
}
}
devServer: {
onBeforeSetupMiddleware(devServer){// express()
devServer.app.get('/api/users', (req, res) => {
res.json([{ id: 1 }, { id: 2 }]);
});
}
}
webpack-dev-middleware就是在 Express 中提供 webpack-dev-server 静态服务能力的一个中间件
npm install webpack-dev-middleware --save-dev
const express = require('express');
const app = express();
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const webpackOptions = require('./webpack.config');
webpackOptions.mode = 'development';
const compiler = webpack(webpackOptions);
app.use(webpackDevMiddleware(compiler, {}));
app.listen(3000);
webpack-dev-middleware的好处是可以在既有的 Express 代码基础上快速添加 webpack-dev-server 的功能，同时利用 Express 来根据需要添加更多的功能，如 mock 服务、代理 API 请求等