既然vuecli停止开发更新，那就自建webpack支持vue3构建环境，支持sass，ts，jsx，5年前端还不会webpack配置吗
站长
· 阅读数 41
最近公司构建vue项目越来越慢了。vue2主项目生产构建需要10分钟，而本地也需要6分钟左右。子项目也个个5分钟左右。每次发布都被吐槽到想死。作为公司一个有追求的前端，总想着如何去优化下。奈何vuecli封装太深，无处下手。而身为一个5年老前端，至今没有好好的配置过webpack全配置，既然这样那就试试自己配置webpack看看能不能使得打包速度提升上去。
先放项目地址：ht-vue-webpack
npm地址：ht-vue-webpack-plugin，安装的时候注意-D
项目内部使用方式vue3：play
后期再计划实现vue2的配置处理，注意vue2，vue-loader版本需要为16版本以下，vue2未来肯定要实现的，公司的老项目3年了，服务器每次构建都需要10分钟左右。唉，这还是微前端拆包分化了4个子项目的情况。
其实对于目前项目来说，替换下vue-loader2版本，改改配置就差不多了，但是个人没有更多精力去验证和测试实用性。毕竟还是公司项目优先，恰饭吗。
新项目用vite没毛病，如果还是纠结webpack环境的话那么新手可以使用我的包。老手为了提升复制我的代码对于你或者公司来说都是件好事
下面主要放项目中遇到的问题
一、搭建过程中遇到的难题
1、vueCli。public文件如何设置的
配置copy-webpack-plugin，在构建的时候复制到对应的生产目录，注意需要忽略index.html入口文件
new CopyPlugin({
patterns: [
{
from: resolvePath(extractConfig.publicDir),
to: resolvePath(extractConfig.distDir), // 输出目录
toType: 'dir',
noErrorOnMissing: true,
globOptions: {
dot: true,
gitignore: true,
ignore: ['**/index.html'],
},
info: {
minimized: true,
},
},
],
}),
devServer配置
devServer: {
host: '0.0.0.0',
// history路由配置
historyApiFallback: {
disableDotRule: true,
htmlAcceptHeaders: ['text/html', 'application/xhtml+xml'],
rewrites: [
// 页面匹配规则
{
from: /^\/$/,
to: `${rootToStrNull(extractConfig.publicPath)}/index.html`,
},
{
from: /./,
to: `${rootToStrNull(extractConfig.publicPath)}/index.html`,
},
],
},
// 静态资源目录
static: {
directory: resolvePath(extractConfig.publicDir),
publicPath: extractConfig.publicPath,
},
// 代理
proxy: {},
// 改变端口
port: extractConfig.port,
hot: 'only', // 防止 error 导致整个页面刷新
open: false, // 不打开浏览器
client: {
overlay: {
errors: true,
warnings: true,
},
logging: 'warn',
progress: true,
},
},
2、index.html中BASE_URL如何实现
new webpack.DefinePlugin({
__VUE_OPTIONS_API__: 'true',
__VUE_PROD_DEVTOOLS__: 'false',
BASE_URL: JSON.stringify(rootToStrNull(extractConfig.publicPath)), // 注入基本信息
}),
3、process.env.VUE_APP_BASE_API如何实现
使用dotenv-webpack配置
new Dotenv({
path: getEnvPath(cliOptions, getMode()),
}),
注意我的项目中开头也运行dotenv，不然在node环境运行会没有变量，上面只是说让浏览器环境和打包构建的时候能获取到。
我的项目默认是把所有配置文件放在根目录env文件下面，默认使用.env文件，其余使用需要指定--mode [文件名称]
4、sass构建失败，不支持根文件内容注释和变量
主要是构建顺序问题，看配置
{
test: /\.s[ac]ss$/i,
use: [
// 需要注意loader加载顺序
// 'style-loader', // 顺序1，把css插入到head标签中
MiniCssExtractPlugin.loader, // 顺序1，把css提取到单独的文件中
'css-loader',
'postcss-loader', // 顺序最后
// 将 Sass 编译成 CSS
'sass-loader',
],
},
5、支持ts和tsx，核心痛苦lang="tsx"不知道如何配置
看代码吧，这个问题困扰了我一天时间
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
reactivityTransform: true,
},
},
{
test: /\.(ts|tsx)$/,
exclude: /node_modules/,
use: [
babelLoaderConf,
{
loader: 'ts-loader',
options: {
transpileOnly: true, // 关闭类型检查，即只进行转译
// 注意如果不用jsx则使用该配置，删除appendTsxSuffixTo，
// appendTsSuffixTo: ['\\.vue$'],
// 使用jsx则使用该配置，删除appendTsSuffixTo，
appendTsxSuffixTo: ['\\.vue$'],
},
},
],
},
二、关于区分环境
通过配置文件env指定读取文件所在地址，默认读取根目录下env文件夹下的.env文件
使用 --mode [文件名称] 指定文件下面读取的配置文件后即可使用process.env.[自定义变量]
关于构建和打包，除非使用webpackMergeConfig进行改变webpack内mode变量，否则构建的时候采用区分webpack serve或build方式进行区分构建生产还是运行开发环境 不会再出现vuecli那种会修改到NODE.ENV的情况，同时我这里也没有NODE.ENV
三、最后内部webpack全量放出
核心原理讲解：
提供webpack基本配置，通过webpack-merge合并用户配置，最后返回webpack配置
webpack-base.js
const { resolvePath, rootToStrNull } = require('../util/handlerPath.js')
const { VueLoaderPlugin } = require('vue-loader')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyPlugin = require('copy-webpack-plugin')
const webpack = require('webpack')
const { merge } = require('webpack-merge')
const configHandler = require('../configHandler')
const Dotenv = require('dotenv-webpack')
const { getEnvPath } = require('../util/env')
const { getMode } = require('../util/argv')
const babelLoaderConf = {
loader: 'babel-loader',
options: {
presets: [
'@babel/preset-env',
// [
// '@babel/preset-typescript',
// {
// allExtensions: true, // 支持所有文件扩展名
// },
// ],
],
plugins: ['@vue/babel-plugin-jsx'],
cacheDirectory: true, // babel编译后的内容默认缓存在 node_modules/.cache/babel-loader
},
}
/*
* @param {Object} cliOptions合并配置
* @param {Object} cliOptions.extractConfig 抽离配置，方便一些简单的配置，比如publicPath的配置，不然webpack的配置太繁琐了
* @param {Object} cliOptions.webpackMergeConfig 通过webpack-merge合并的配置，会覆盖extractConfig传入的数据
* */
module.exports = (cliOptions = {}) => {
const { webpackMergeConfig } = cliOptions
const extractConfig = configHandler(cliOptions)
return merge(
{
plugins: [
new Dotenv({
path: getEnvPath(cliOptions, getMode()),
}),
// 请确保引入这个插件
new VueLoaderPlugin(),
new MiniCssExtractPlugin({
filename: 'css/[name].[contenthash].css',
chunkFilename: 'css/[id].[contenthash].css',
}),
// 注入的全局变量
new webpack.DefinePlugin({
__VUE_OPTIONS_API__: 'true',
__VUE_PROD_DEVTOOLS__: 'false',
BASE_URL: JSON.stringify(rootToStrNull(extractConfig.publicPath)), // 注入基本信息
}),
new CopyPlugin({
patterns: [
{
from: resolvePath(extractConfig.publicDir),
to: resolvePath(extractConfig.distDir), // 输出目录
toType: 'dir',
noErrorOnMissing: true,
globOptions: {
dot: true,
gitignore: true,
ignore: ['**/index.html'],
},
info: {
minimized: true,
},
},
],
}),
new HtmlWebpackPlugin({
template: `./${extractConfig.publicDir}/index.html`,
}),
],
entry: './src/main', // 忽略后缀名
cache: true,
output: {
publicPath: extractConfig.publicPath, // 公共路径
filename: 'js/[name].[chunkhash].js',
path: resolvePath(extractConfig.distDir), // 输出目录
clean: true,
},
resolve: {
extensions: ['.js', '.ts', '.tsx', '.jsx', '.vue'],
alias: {
'@': resolvePath('./src'),
},
},
optimization: {
splitChunks: {
chunks: 'all',
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
chunks: 'all',
},
},
},
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
reactivityTransform: true,
},
},
{
test: /\.(ts|tsx)$/,
exclude: /node_modules/,
use: [
babelLoaderConf,
{
loader: 'ts-loader',
options: {
transpileOnly: true, // 关闭类型检查，即只进行转译
// 注意如果不用jsx则使用该配置，删除appendTsxSuffixTo，
// appendTsSuffixTo: ['\\.vue$'],
// 使用jsx则使用该配置，删除appendTsSuffixTo，
appendTsxSuffixTo: ['\\.vue$'],
},
},
],
},
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: [babelLoaderConf],
},
// css处理部分
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'],
},
{
test: /\.s[ac]ss$/i,
use: [
// 需要注意loader加载顺序
// 'style-loader', // 顺序1，把css插入到head标签中
MiniCssExtractPlugin.loader, // 顺序1，把css提取到单独的文件中
'css-loader',
'postcss-loader', // 顺序最后
// 将 Sass 编译成 CSS
'sass-loader',
],
},
// 静态资源处理部分
{
test: /\.(eot|svg|ttf|woff|)$/,
type: 'asset/resource',
generator: {
filename: 'fonts/[name].[hash:8][ext]',
},
},
{
test: /\.(png|jpe?g|gif|svg|webp)(\?.*)?$/,
type: 'asset',
generator: {
// [ext]前面自带"."
filename: 'assets/[name].[hash:8][ext]',
},
parser: {
dataUrlCondition: {
maxSize: 4 * 1024, // 4kb
},
},
},
],
},
},
webpackMergeConfig ? webpackMergeConfig : {},
)
}
webpack-dev.js
const baseConfig = require('./webpack-base')
const { merge } = require('webpack-merge')
const { rootToStrNull, resolvePath } = require('../util/handlerPath.js')
const configHandler = require('../configHandler')
module.exports = function (cliOptions) {
const extractConfig = configHandler(cliOptions)
return merge(baseConfig(cliOptions), {
mode: 'development',
devtool: 'inline-cheap-module-source-map',
optimization: {
runtimeChunk: 'single',
},
devServer: {
host: '0.0.0.0',
// history路由配置
historyApiFallback: {
disableDotRule: true,
htmlAcceptHeaders: ['text/html', 'application/xhtml+xml'],
rewrites: [
// 页面匹配规则
{
from: /^\/$/,
to: `${rootToStrNull(extractConfig.publicPath)}/index.html`,
},
{
from: /./,
to: `${rootToStrNull(extractConfig.publicPath)}/index.html`,
},
],
},
// 静态资源目录
static: {
directory: resolvePath(extractConfig.publicDir),
publicPath: extractConfig.publicPath,
},
// 代理
proxy: {},
// 改变端口
port: extractConfig.port,
hot: 'only', // 防止 error 导致整个页面刷新
open: false, // 不打开浏览器
client: {
overlay: {
errors: true,
warnings: true,
},
logging: 'warn',
progress: true,
},
},
})
}
webpack-prd.js
const baseConfig = require('./webpack-base')
const { merge } = require('webpack-merge')
const configHandler = require('../configHandler')
module.exports = function (cliOptions) {
const config = configHandler(cliOptions)
return merge(baseConfig(cliOptions), {
devtool: config.sourceMap ? 'source-map' : 'none',
mode: 'production',
})
}
吐出index.js
const webpackDev = require('./config/webpack-dev')
const webpackPrd = require('./config/webpack-prd')
const { loaderEnv } = require('./util/env')
const { getMode, isBuild, isServe } = require('./util/argv')
/*
* @param {function} cliOptions(config),返回参数参考下面的注释
* config mode,当前mode值
*
* @param {Object} cliOptions合并配置
* @param {Object} cliOptions.extractConfig 抽离配置，方便一些简单的配置，比如publicPath的配置，不然webpack的配置太繁琐了
* @param {Object} cliOptions.webpackMergeConfig 通过webpack-merge合并的配置，会覆盖extractConfig传入的数据
* */
module.exports = (cliOptions = {}) => {
// mode值代表了env文件的名称
const mode = getMode()
if (typeof cliOptions === 'function') {
cliOptions = cliOptions({ mode, env: process.env })
}
// console.log(cliOptions)
loaderEnv(cliOptions, mode) // 加载环境变量，首位
// 内部判断是否生产构建，可以被webpackMergeConfig覆盖
const build = isBuild()
const serve = isServe()
// 生产构建
if (build) return webpackPrd(cliOptions)
// dev运行
if (serve) return webpackDev(cliOptions)
}
四、关于公司业务代码迁移和该包的发展
由于vueCli停止更新维护，所以未来webpack相关的构建就全面使用这个库了。而且自研的控制能力肯定是最强的。内部的依赖等都是webpack5刚发布没多久那会，依赖都挺老了。想要项目长久运行，那就需要自己多努力了。当然不更新为什么不能用呢？（笑）
关于为什么还使用webpack，只能说，历史因素很大。而且webpack很稳
未来关于新项目还是非常值得使用vite的，但是用过的都知道微前端对于vite并不是非常友好。
关于公司老业务webpack生态来说，有时间了就逐步逐步的迁移。这个包vue3环境我已经迁移成功了。我把项目中play文件拷贝出来，然后把public和src文件全面替换掉就运行和构建成功了。所以我个人而言是比较有把握的。
转载自:https://juejin.cn/post/7269357836026675257