前端构建是现代 Web 开发中的重要流程，指将源代码转换为生产可用的优化代码的过程。它包括代码转换、模块打包、资源优化、代码压缩等多个步骤，极大提升了开发效率和代码质量。
// webpack.config.js
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{ test: /\.js$/, use: 'babel-loader' },
{ test: /\.css$/, use: ['style-loader', 'css-loader'] }
]
}
}
// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()],
build: {
outDir: 'dist',
sourcemap: true
}
})
// package.json
{
"scripts": {
"build": "parcel build src/index.html"
}
}
// rollup.config.js
export default {
input: 'src/index.js',
output: {
file: 'dist/bundle.js',
format: 'esm'
}
}
# 启动开发服务器
npm run dev
# - 开启 HMR
# - 实时编译
# - Source Map
# - 错误提示
# 生产构建
npm run build
# - 代码压缩
# - Tree Shaking
# - 代码分割
# - 资源优化
# 本地预览
npm run preview
# - 模拟生产环境
# - 验证构建结果
{
"presets": [
["@babel/preset-env", { "targets": "defaults" }],
"@babel/preset-react"
],
"plugins": [
"@babel/plugin-proposal-class-properties"
]
}
defaults
not IE 11
maintained node versions
{
"extends": ["eslint:recommended"],
"env": {
"browser": true,
"es2021": true
},
"parserOptions": {
"ecmaVersion": 12,
"sourceType": "module"
},
"rules": {
"no-unused-vars": "error"
}
}
// 按需加载
const LazyComponent = React.lazy(() => import('./Component'))
// Webpack 分块
import(/* webpackChunkName: "user" */ './User')
// 路由懒加载
const Home = () => import('./pages/Home')
// 图片懒加载
<img loading="lazy" src="image.jpg" />