我尝试了 extract-text-webpack-plugin 来提取 css 文件,但它失败了。webpack 的版本是 4.16.3,所以我使用 mini-css-extract-plugin 来做,也失败了!我认为这与这些插件的配置无关。有我的 webpack 配置。代码仓库在这里。成功打包,但没有css文件。
const baseConfig = require('./webpack.config.base')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const merge = require('webpack-merge')
const path = require('path')
const productionConfig = merge(baseConfig, {
mode: 'production',
entry: {
app: path.join(__dirname, '../src/index.js'),
vendor: ['vue', 'vue-router', 'vuex', 'axios', 'element-ui']
},
output: {
path: path.join(__dirname, '../build/public'),
filename: 'js/[name].bundle.js',
chunkFilename: 'js/[name].[chunkhash:8].chunk.js',
publicPath: './public'
},
module: {
rules: [
{
test: /\.css/,
use: [
MiniCssExtractPlugin.loader,
'css-loader'
],
include: [
path.resolve(__dirname, 'node_modules')
]
},
{
test: /\.less/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'less-loader'
],
include: [
path.resolve(__dirname, 'node_modules')
]
},
{
test: /\.(gif|jpg|jpeg|png|svg)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 1024,
name: '[name].[hash:8].[ext]',
publicPath: './public/img',
outputPath: '/img'
}
}
]
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'file-loader',
options: {
limit: 80000,
name: '[name].[hash:8].[ext]',
publicPath: './public/fonts',
outputPath: '/fonts'
}
}
]
},
optimization: {
splitChunks: {
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name: 'vendor',
chunks: 'all'
}
}
},
runtimeChunk: true
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].[chunkhash:8].css',
chunkFilename: '[id].css'
})
]
})
module.exports = productionConfig