还是关于 extract-text-webpack-plugin 插件的问题....

在网上找到一位仁兄的代码，链接 https://segmentfault.com/a/1190000013994415，

然后就根据他的来试了一下，

------ webpack.config.js ------

const path = require('path')
const HTMLPlugin = require('html-webpack-plugin')
const webpack = require('webpack')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const {
VueLoaderPlugin
} = require('vue-loader');
const isDev = process.env.NODE_ENV === 'development'
const config = {
target: 'web',
entry: path.join(__dirname, 'src/index.js'),
output: {
filename: 'bundle.[hash:8].js',
path: path.join(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.jsx$/,
loader: 'babel-loader'
},
{
test:/\.(gif|jpg|jpeg|png|svg)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 1024,
name: '[name]-aaa.[ext]'
}
}
]
}
]
},
plugins: [
new VueLoaderPlugin(),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: isDev ? '"development"' : '"production"'
}
}),
new HTMLPlugin(),
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: "[name].css",
chunkFilename: "[id].css"
})
]
}
if(isDev){
config.module.rules.push({
test: /\.styl/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'postcss-loader',
options: {
sourceMap: true
}
},
'stylus-loader'
]
})
config.devtool = '#cheap-module-eval-source-map'
config.devServer = {
port: 8000,
host: '0.0.0.0',
overlay: {
errors: true
},
// open: true
// historyFallback: {
// }
hot: true
}
config.plugins.push(
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin()
)
} else {
config.output.filename = 'js/[name].[chunkhash:8].js';
config.module.rules.push(
{
test: /\.styl$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'postcss-loader',
options: {
sourceMap: true
}
},
'stylus-loader'
]
}
)
config.plugins.push(
new MiniCssExtractPlugin({
filename: "[name].[chunkhash:8].css",
chunkFilename: "[id].css"
})
)
}
module.exports = config;

然后，的确是有生成（然而我已经搞不懂到底会生成什么样子的文件了......），生成的dist如下

，

然而，也有报错....，真的看不懂了.....，如下图

求个大佬来说说到底是怎么回事.....改成 mini-css-extract-plugin 到底是怎么个用法....

求你们了...