文章目录
Webpack 项目构建与优化指南
简介
在现代前端开发中，Webpack 是一个不可或缺的模块打包工具，它能够将项目中的各种资源（如 JS、CSS、图片等）打包成浏览器可以识别的格式。本文将带你从零开始，一步步构建一个基于 Webpack 的项目，并进行必要的优化，以提高构建效率和运行性能。
一、创建基本项目
1. 初始化项目
首先，我们需要创建一个项目目录，并在其中初始化 package.json 文件：
mkdir my-webpack-project
cd my-webpack-project
npm init -y
2. 创建项目结构
在项目根目录下，创建基本的项目结构：
my-webpack-project
│
├── public
│ └── index.html
├── src
│ ├── index.tsx
│ └── App.tsx
├── build
│ ├── webpack.base.ts
│ ├── webpack.dev.ts
│ └── webpack.prod.ts
└── package.json
3. 引入 React 和 TypeScript
安装 React 和 TypeScript 相关依赖：
npm install react react-dom
npm install @types/react @types/react-dom -D
npm install typescript -D
二、Webpack 配置
1. 基础配置
创建 webpack.base.ts，配置基础的 Webpack 选项：
import { Configuration } from 'webpack';
import path from 'path';
const baseConfig: Configuration = {
entry: path.join(__dirname, '../src/index.tsx'),
output: {
filename: 'static/js/[name].js',
path: path.join(__dirname, '../dist'),
clean: true,
publicPath: '/',
},
module: {
rules: [],
},
resolve: {
extensions: ['.tsx', '.ts', '.jsx', '.js'],
},
plugins: [],
};
export default baseConfig;
2. 开发环境配置
创建 webpack.dev.ts，配置开发环境特有的选项：
import { merge } from 'webpack-merge';
import baseConfig from './webpack.base';
const devConfig = merge(baseConfig, {
mode: 'development',
devtool: 'eval-cheap-module-source-map',
// ...其他开发环境配置
});
export default devConfig;
3. 生产环境配置
创建 webpack.prod.ts，配置生产环境特有的选项：
import { merge } from 'webpack-merge';
import baseConfig from './webpack.base';
const prodConfig = merge(baseConfig, {
mode: 'production',
// ...其他生产环境配置
});
export default prodConfig;
三、环境变量配置
使用 cross-env 和 webpack.DefinePlugin 来配置和管理环境变量：
npm install cross-env -D
在 package.json 中添加脚本：
"scripts": {
"dev": "cross-env NODE_ENV=development webpack serve -c build/webpack.dev.ts",
"build": "cross-env NODE_ENV=production webpack -c build/webpack.prod.ts"
}
在 webpack.base.ts 中使用 DefinePlugin：
import { DefinePlugin } from 'webpack';
new DefinePlugin({
'process.env': JSON.stringify(process.env)
})
四、文件别名配置
在 webpack.base.ts 和 tsconfig.json 中配置文件别名：
// webpack.base.ts
resolve: {
alias: {
'@': path.join(__dirname, '../src')
}
}
// tsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
}
}
}
五、构建速度优化
1. Webpack 进度条
安装 webpackbar：
npm install webpackbar -D
在 webpack.base.ts 中引入：
import WebpackBar from 'webpackbar';
new WebpackBar()
2. 开启持久化存储缓存
在 webpack.base.ts 中配置缓存：
cache: {
type: 'filesystem'
}
3. 开启多线程 loader
安装 thread-loader：
npm install thread-loader -D
在 webpack.base.ts 中配置：
module: {
rules: [
{
test: /.(ts|tsx)$/,
use: [
{
loader: 'thread-loader',
options: {
workers: 4
}
},
'babel-loader'
]
}
]
}
六、构建产物优化
1. Bundle 分析工具
安装 webpack-bundle-analyzer：
npm install webpack-bundle-analyzer -D
在 webpack.analy.ts 中配置：
import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
new BundleAnalyzerPlugin()
2. 样式提取
安装 mini-css-extract-plugin：
npm install mini-css-extract-plugin -D
在 webpack.base.ts 和 webpack.prod.ts 中配置：
// webpack.base.ts
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// webpack.prod.ts
new MiniCssExtractPlugin({
filename: 'static/css/[name].css'
})
3. 样式和 JS 压缩
安装 css-minimizer-webpack-plugin 和 terser-webpack-plugin：
npm install css-minimizer-webpack-plugin terser-webpack-plugin -D
在 webpack.prod.ts 中配置：
import CssMinimizerPlugin from 'css-minimizer-webpack-plugin';
import TerserPlugin from 'terser-webpack-plugin';
optimization: {
minimizer: [
new CssMinimizerPlugin(),
new TerserPlugin({
parallel: true
})
]
}
4. 代码分割
在 webpack.prod.ts 中配置代码分割：
optimization: {
splitChunks: {
cacheGroups: {
vendors: {
test: /node_modules/,
name: 'vendors',
minChunks: 1,
chunks: 'initial',
minSize: 0,
priority: 1,
},
commons: {
name: 'commons',
minChunks: 2,
chunks: 'initial',
minSize: 0,
}
}
}
}
结语
通过上述步骤，我们成功构建了一个基于 Webpack 的项目，并进行了一系列的优化。这些优化包括了环境变量配置、文件别名设置、构建速度提升以及构建产物优化等，旨在提高开发效率和项目性能。希望这篇文章能帮助你更好地理解和使用 Webpack。
标签：指南,配置,webpack,ts,Webpack,base,构建,import From： https://blog.csdn.net/2301_77409965/article/details/143472627