webpack打包错误 Error: No module factory available

Z时代
2024-01-10
分类：技术分享

打包的时候出现Error: No module factory available for dependency type: CssDependency
网上其他的做法是修改的vue.config.js.我这个是分出来的webpack 有点不太会。请前辈们帮忙看看
webpack.base.config.js文件

const path = require('path'); // node.js 中的基本包，用于处理路径
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const CopyPlugin = require('copy-webpack-plugin')
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const devMode = process.env.NODE_ENV !== 'production';
module.exports = {
entry: {
main: './src/main',
vendors: './src/vendors'
},
output: {
path: path.join(__dirname, '../dist/assets'), // 输出文件所在目录
},
module: {
rules: [
{
test: /.vue$/,
loader: 'vue-loader'
},
{
test: /.css$/, // css 处理
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader'
]
},
{
test: /.js$/,
use: {
loader: 'babel-loader',
options: {
presets: [ //预设
'@babel/preset-env'
],
plugins:[
// 转es7的语法
["@babel/plugin-proposal-decorators", { "legacy": true }],
["@babel/plugin-proposal-class-properties", { "loose" : true }]
]
}
},
exclude: /node_modules/
},
{
test: /.less$/, // less 处理
use: [
MiniCssExtractPlugin.loader, // 这样相当于抽离成一个css文件， 如果希望抽离成分别不同的css, 需要再引入MiniCssExtractPlugin，再配置
'css-loader', // css-loader 用来解析@import这种语法
'less-loader',
'postcss-loader'
],
},
{
test: /.(gif|jpg|png|woff|svg|eot|ttf)??.*$/,
use: {
loader: 'url-loader',
options: {
limit: 200 * 1024, // 小于200k变成base64
}
}
},
]
},
resolve: {
extensions: ['.js', '.vue'],
alias: {
'vue': 'vue/dist/vue.esm.js'
}
},
plugins: [
// Vue-loader在15.*之后的版本都是 vue-loader的使用都是需要伴生 VueLoaderPlugin的
new VueLoaderPlugin(),
new CopyPlugin({
patterns: [
{
from: './src/resource',
to: './resource'
}, {
from: './src/images',
to: './images'
}, {
from: './src/api.js',
to: './'
}
],
}),
new CleanWebpackPlugin()
]}

webpack.prod.config.js文件

const webpack = require('webpack');
const path = require('path');
const webpackBaseConfig = require('./webpack.base.config');
const { merge } = require('webpack-merge');
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin")
const UglifyJsPlugin = require("uglifyjs-webpack-plugin")
const HTMLWebpackPlugin = require('html-webpack-plugin');
const fs = require('fs');
module.exports = merge(webpackBaseConfig, {
mode: 'production',
output: {
publicPath: '/assets/',
filename: '[name].[hash].js',
chunkFilename: '[name].[hash].chunk.js'
},
optimization: { // 优化项
minimizer: [
new UglifyJsPlugin({ // 优化js
cache: true, // 是否缓存
parallel: true, // 是否并发打包
sourceMap: true // 源码映射 set to true if you want JS source maps
}),
new OptimizeCSSAssetsPlugin({}) // css 的优化
],
splitChunks: { // 分割代码块，针对多入口
cacheGroups: { // 缓存组
common: { // 公共模块
minSize: 0, // 大于多少抽离
minChunks: 2, // 使用多少次以上抽离抽离
chunks: 'initial' // 从什么地方开始,刚开始
},
vendor: {
name: 'vendors',
priority: 1, // 增加权重, (先抽离第三方)
test: /node_modules/, // 把此目录下的抽离
minSize: 0, // 大于多少抽离
minChunks: 2, // 使用多少次以上抽离抽离
chunks: 'initial' // 从什么地方开始,刚开始
}
}
},
},
plugins: [
new HTMLWebpackPlugin({
filename: '../index.html',
template: './src/template/index.ejs',
inject: false
}),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
})
]})