如果没有啥特别的需求还是推荐vue-cli！
vite vue3 TSX项目
虽然vite 很香，但是vite rollup 动态加载，多页面 等问题比较难搞
vite的缺点
wepback __webpack_public_path__ 没有找到好的实践方案。
__webpack_public_path__ = window.BK_STATIC_URL;
第二个，动态加载css 里面的资源
/**
* @file 替换 asset css 中的 BK_STATIC_URL，__webpack_public_path__ 没法解决 asset 里静态资源的 url
* @author
*/
const { extname } = require('path');
class ReplaceCSSStaticUrlPlugin {
apply(compiler) {
// emit: 在生成资源并输出到目录之前
compiler.hooks.emit.tapAsync('ReplaceCSSStaticUrlPlugin', (compilation, callback) => {
const assets = Object.keys(compilation.assets);
const assetsLen = assets.length;
for (let i = 0; i < assetsLen; i++) {
const fileName = assets[i];
const name = extname(fileName);
if (extname(fileName) !== '.css') {
continue;
}
const asset = compilation.assets[fileName];
let minifyFileContent = asset.source().toString()
.replace(
/\{\{\s*BK_STATIC_URL\s*\}\}/g,
() => '../',
);
compilation.assets[fileName] = {
// 返回文件内容
source: () => minifyFileContent,
// 返回文件大小
size: () => Buffer.byteLength(minifyFileContent, 'utf8'),
};
}
callback();
});
}
}
module.exports = ReplaceCSSStaticUrlPlugin;
虽然有 vite-plugin-dynamic-publicpath 等插件，但是并不是非常好使
多页面配置，主要还是修改rollup配置
build: {
assetsDir: 'assets', // 指定生成静态资源的存放路径
rollupOptions: {
input: {
admin: path.resolve(__dirname, 'src/index.html'),
page: path.resolve(__dirname, 'src/page/index.html'),
index: path.resolve(__dirname, 'src/index/index.html'),
},
output: {
chunkFileNames: 'static/js/[name]-[hash].js',
entryFileNames: 'static/js/[name]-[hash].js',
assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
}
},
}
多页面更多的资料，网上很多，这里推荐几篇文章:
vue+vite多页应用配置及页面路径更改 https://juejin.cn/post/7004784113706090526
Vite 入门以及从 webpack 切换到 Vite 遇到的问题总结 https://jishuin.proginn.com/p/763bfbd4f55a
多页面貌似解决了，当rollup 打包完成后，都在二级目录，虽然有办法解决，但是一路搞下来，不想在折腾了
想来想去还是webpack 原有配置方便
webpack vue3 TSX
只需要升级npm 包：vue-loader vue-template-compiler"
vue-loader：它是基于 webpack 的一个的 loader 插件，解析和转换 .vue 文件，提取出其中的逻辑代码 script、样式代码 style、以及 HTML 模版 template，再分别把它们交给对应的 loader 去处理如 style-loader 、 less-loader 等等，核心的作用，就是 提取 。
@vue/compiler-sfc： Vue 2.x 时代，需要 vue-template-compiler 插件处理 .vue 内容为 ast ， Vue 3.x 则变成 @vue/compiler-sfc 。
vue-loader 需要注意
之前的
import VueLoaderPlugin from 'vue-loader/lib/plugin';
新的
import { VueLoaderPlugin } from 'vue-loader';
VueLoaderPlugin 的职责是将你定义过的其它规则复制并应用到 .vue 文件里相应语言的块。例如，如果你有一条匹配 /\.js$/ 的规则，那么它会应用到 .vue 文件里的