webpack打包错误 Error: No module factory available

打包的时候出现Error: No module factory available for dependency type: CssDependency
网上其他的做法是修改的vue.config.js.我这个是分出来的webpack 有点不太会。请前辈们帮忙看看image
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'

})

]

})
阅读 212
评论
    1 个回答
    • 557

    试试将new MiniCssExtractPlugin()加进prod文件的

      撰写回答

      登录后参与交流、获取后续更新提醒

      相似问题
      推荐文章