背景:
之前使用vue2+webpack开发了一个npm库,现在想升级为vue3版本(纯手工)
因为没有使用脚手架,得自己写webpack的配置.
vue2升级到vue3,vue-loader也得升级到17.0.0以上。之前VueLoaderPlugin的这个文件就不存在了,我就直接注释了这个plugin(怪我webpack还是不够熟悉)
问题:
然后执行打包就一直报错,下面是一部分
Module parse failed: Unexpected token (2:2)File was processed with these loaders:*./node modules/vue-loader/dist/index.jsYou may need an additional loader to handle the result of these loaders.
<el-menu
开始一直在通过上面的部分找问题:以为是缺少了什么loader,查询了半天还是没解决
最后看到重点:vue-loader was used without the corresponding plugin. Make sure to include Vueloaderplugin in your…
没有使用VueLoaderPlugin
解决:
在plugin中加入VueLoaderPlugin
webpack配置:
const path = require('path')
const ProgressBarPlugin = require('progress-bar-webpack-plugin')
const VueLoaderPlugin = require('vue-loader').VueLoaderPlugin;
const TerserPlugin = require('terser-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const { resolve } = require('path')
module.exports = {
// 模式
mode: 'production',
// 入口
entry: {
app: ['./src/index.js'],
util: ['./src/util']
},
// 输出
output: {
path: path.resolve(process.cwd(), './lib'),
publicPath: '/lib/',
// 输出的文件名
filename: '[name].js',
// 初始的chunk文件名称
chunkFilename: 'js/[id].js',
// library 暴露为 AMD 模块。 在 AMD 或 CommonJS 的 require 之后可访问(libraryTarget:'umd')
libraryTarget: 'umd',
// 入口的默认导出将分配给 library target:
// if your entry has a default export of `MyDefaultModule`
// var MyDefaultModule = _entry_return_.default;
// libraryExport: 'default',
// 会把 AMD 模块命名为 UMD 构建
umdNamedDefine: true,
// 为了使 UMD 构建在浏览器和 Node.js 上均可用,应将 output.globalObject 选项设置为 'this'。对于类似 web 的目标,默认为 self。
globalObject: 'typeof self !== \'undefined\' ? self : this'
},
// 解析
resolve: {
// 能够使用户在引入模块时不带扩展.尝试按顺序解析这些后缀名。如果有多个文件有相同的名字,但后缀名不同,webpack 会解析列在数组首位的后缀的文件 并跳过其余的后缀。
extensions: ['.js', '.vue', '.json']
// 创建 import 或 require 的别名,来确保模块引入变得更简单。
},
// 优化
optimization: {
// 允许你通过提供一个或多个定制过的 TerserPlugin 实例, 覆盖默认压缩工具(minimizer)
minimizer: [
new TerserPlugin({
terserOptions: {
output: {
comments: false
}
}
})
]
},
// 性能
performance: {
// 不展示警告或错误提示。
// 官网推荐使用error,有助于防止把体积大的bundle部署到生产环境,从而影响网页的性能
// 很奇怪这里要把它关闭
hints: false
},
// stats对象
stats: {
// 告知 stats 是否添加关于子模块的信息。
children: false
},
// 模块
module: {
// 使用babel-loader和vue-loader
rules: [
{
test: /\.(jsx?|babel|es6)$/,
include: process.cwd(),
loader: 'babel-loader'
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
// compilerOptions: {
// preserveWhitespace: false
// }
}
},
// 由于在组件中写了>>>这种形式的深度选择器,这种方式在sass中不支持,固这里不能和sass合并,可以将深度选择器改成:deep()形式
{ test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader'] },
{ test: /\.scss$/, use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'] },
{
test: /\.(jpg|png|gif|bmp|jpeg)$/,
use: [{ loader: 'url-loader', options: { esModule: false } }]
},
{ test: /\.(ttf|eot|svg|woff|woff2)$/, use: [{ loader: 'url-loader', options: { esModule: false } }] }
]
},
// 插件
plugins: [
new ProgressBarPlugin(),
new VueLoaderPlugin(),
new MiniCssExtractPlugin({
filename: 'css/index.css',
chunkFilename: 'css/[name].[contenthash:8].css'
})
]
}