webpack - 设置 webpack 和 vue3
问题描述
我正在尝试使用 webpack 和 typescript 设置 vue3。目前我遇到的问题是,每当我尝试运行时webpack serve
,浏览器控制台内都会出现警告:
runtime-core.esm-bundler.js:3413 You are running the esm-bundler build of Vue. It is recommended to configure your bundler to explicitly replace feature flag globals with boolean literals to get proper tree-shaking in the final bundle. See http://link.vuejs.org/feature-flags for more details.
我不明白。我的 webpack 配置如下:
const path = require("path")
module.exports = {
mode: 'development',
entry: './src/index.ts',
devtool: 'inline-source-map',
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
],
},
resolve: {
alias: {
vue: "vue/dist/vue.esm-bundler.js"
},
extensions: ['.tsx', '.ts', '.js'],
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
}
这是 tsconfig:
{
"compilerOptions": {
"outDir": "./dist/",
"noImplicitAny": true,
"module": "es6",
"target": "es5",
"allowJs": true,
"moduleResolution": "node"
}
}
我想在没有此警告的情况下进行配置,然后继续支持 sfc!
解决方案
从您在错误中获得的链接。
构建将在不配置这些标志的情况下工作,但强烈建议正确配置它们,以便在最终捆绑包中获得正确的 tree-shaking。
这应该可以解决您的问题。
const path = require("path");
const webpack = require('webpack');
module.exports = {
mode: 'development',
entry: './src/index.ts',
devtool: 'inline-source-map',
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
],
},
resolve: {
alias: {
vue: "vue/dist/vue.esm-bundler.js"
},
extensions: ['.tsx', '.ts', '.js'],
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
plugins: [
new webpack.DefinePlugin({
"__VUE_OPTIONS_API__": true,
"__VUE_PROD_DEVTOOLS__": false,
});
],
}
还值得补充的是,@vue-cli是 vue 项目的标准工具。
推荐阅读
- selenium - 硒中每个测试的多个与单个断言?
- javascript - 图像未显示在附加的 d3 甘特图中
- c++ - 为什么这段代码对测试用例 5 给出了错误的答案?
- javascript - 绝对元素不会滚动
- java - RecyclerView 搜索过滤器只过滤一个值
- regex - 使用 perl 脚本从字符串中删除特殊字符
- arrays - Vue js-选择特定键时如何复制数组
- javascript - 反应原生@0.63.4 | react@17.0.1 重复数据删除无效 - 导致无效的挂钩调用
- angular - 将多个项目文件夹提交到一个存储库
- ios - Flutter - Firebase 动态链接不被 onLink 捕获但在 iOS 上打开应用