Javascript Web包未将CSS从供应商vue组件提取到文件中

我有一个问题，网页包没有从供应商的VUE组件中提取CSS

Html头如下所示：

所有这些样式标记仅来自供应商的Vue组件。从Javascript加载页面后插入

挖掘vue组件中的其他样式、无挖掘文件、来自非vue供应商包的样式被正确拆分为main.css和vendor.css

const webpack = require('webpack'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin'); const utils = require('./utils'); const path = require('path'); const isProduction = process.env.NODE_ENV === 'production'; const SRC_PATH = path.join(__dirname, 'src'); const DIST_PATH = path.join(__dirname, !isProduction ? 'www-dev' : 'www'); function resolve(dir) { return path.join(__dirname, '../', dir) } module.exports = { devtool: !isProduction ? 'inline-source-map' : undefined, entry: { main: [ SRC_PATH + '/main.less', SRC_PATH + '/main.js', ] }, output: { path: DIST_PATH, publicPath: '', filename: !isProduction ? '[name].js' : '[name].min.js?c=[chunkhash]', sourceMapFilename: !isProduction ? '[name].js.map' : undefined }, module: { rules: utils.styleLoaders({ sourceMap: true, extract: true }) .concat([{ test: /\.vue$/, loader: 'vue-loader', options: { loaders: utils.cssLoaders({ sourceMap: true, extract: true }) }, }, { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }, { test: /\.(woff2?|ttf|eot|otf)$/, loader: 'file-loader', options: { name: path => { if(!/node_modules|bower_components/.test(path)) return 'fonts/[name].[hash].[ext]'; return 'fonts/vendor/' + path .replace(/\\/g, '/') .replace( /((.*(node_modules|bower_components))|fonts|font|assets)\//g, '' ) + '?[hash]'; }, publicPath: './' } }, { test: /\.(bmp|png|jpe?g|gif|svg|ico|ani|cur)$/, loaders: [{ loader: 'file-loader', options: { name: path => { if(!/node_modules|bower_components/.test(path)) return 'images/[name].[hash].[ext]'; return 'images/vendor/' + path .replace(/\\/g, '/') .replace( /((.*(node_modules|bower_components))|images|image|img|assets)\//g, '' ) + '?[hash]'; }, publicPath: './' } }, 'img-loader' ] } ]) }, resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js', '~': resolve('node_modules'), '@': resolve('src') } }, plugins: [], performance: { hints: false } } //Dev & Production plugins module.exports.plugins.push( //Environment new webpack.DefinePlugin({ 'process.env': { NODE_ENV: '"' + (!isProduction ? 'development' : 'production') + '"' } }), //Extract CSS to file new ExtractTextPlugin({ filename: !isProduction ? '[name].css?c=[chunkhash]' : '[name].min.css?c=[chunkhash]' }), //Extract vendor CSS/JS new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', minChunks: function(module) { return module.context && module.context.indexOf('node_modules') !== -1; } }), //Extract html new HtmlWebpackPlugin({ filename: 'index.html', template: SRC_PATH + '/index.html', inject: true, chunksSortMode: 'dependency', minify: !isProduction ? undefined : { removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true } }) ); if(!isProduction) //Development stuff module.exports.plugins.push( // Hot module replacement..DUNNO new webpack.HotModuleReplacementPlugin(), // Use the NoEmitOnErrorsPlugin to skip the emitting // phase whenever there are errors while compiling. // This ensures that no assets are emitted that include errors. new webpack.NoEmitOnErrorsPlugin() ); else //Production module.exports.plugins.push( // Optimize CSS new OptimizeCSSPlugin({ cssProcessorOptions: { safe: true } }), // Minify JS new webpack.optimize.UglifyJsPlugin({ sourceMap: true, compress: { warnings: false } }) ); const ExtractTextPlugin = require('extract-text-webpack-plugin') exports.cssLoaders = function(options) { options = options || {} var cssLoader = { loader: 'css-loader', options: { minimize: process.env.NODE_ENV === 'production', sourceMap: options.sourceMap } } // generate loader string to be used with extract text plugin function generateLoaders(loader, loaderOptions) { var loaders = [cssLoader] if(loader) { loaders.push({ loader: loader + '-loader', options: Object.assign({}, loaderOptions, { sourceMap: options.sourceMap }) }) } // Extract CSS when that option is specified // (which is the case during production build) if(options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader' }) } else { return ['vue-style-loader'].concat(loaders) } } // https://vue-loader.vuejs.org/en/configurations/extract-css.html return { css: generateLoaders(), postcss: generateLoaders(), less: generateLoaders('less'), sass: generateLoaders('sass', { indentedSyntax: true }), scss: generateLoaders('sass'), stylus: generateLoaders('stylus'), styl: generateLoaders('stylus') } } // Generate loaders for standalone style files (outside of .vue) exports.styleLoaders = function(options) { var output = [] var loaders = exports.cssLoaders(options) for(var extension in loaders) { var loader = loaders[extension] output.push({ test: new RegExp('\\.' + extension + '$'), use: loader }) } return output } 配置中缺少什么？（下）

塔克斯

webpack.config.js

const webpack = require('webpack'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin'); const utils = require('./utils'); const path = require('path'); const isProduction = process.env.NODE_ENV === 'production'; const SRC_PATH = path.join(__dirname, 'src'); const DIST_PATH = path.join(__dirname, !isProduction ? 'www-dev' : 'www'); function resolve(dir) { return path.join(__dirname, '../', dir) } module.exports = { devtool: !isProduction ? 'inline-source-map' : undefined, entry: { main: [ SRC_PATH + '/main.less', SRC_PATH + '/main.js', ] }, output: { path: DIST_PATH, publicPath: '', filename: !isProduction ? '[name].js' : '[name].min.js?c=[chunkhash]', sourceMapFilename: !isProduction ? '[name].js.map' : undefined }, module: { rules: utils.styleLoaders({ sourceMap: true, extract: true }) .concat([{ test: /\.vue$/, loader: 'vue-loader', options: { loaders: utils.cssLoaders({ sourceMap: true, extract: true }) }, }, { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }, { test: /\.(woff2?|ttf|eot|otf)$/, loader: 'file-loader', options: { name: path => { if(!/node_modules|bower_components/.test(path)) return 'fonts/[name].[hash].[ext]'; return 'fonts/vendor/' + path .replace(/\\/g, '/') .replace( /((.*(node_modules|bower_components))|fonts|font|assets)\//g, '' ) + '?[hash]'; }, publicPath: './' } }, { test: /\.(bmp|png|jpe?g|gif|svg|ico|ani|cur)$/, loaders: [{ loader: 'file-loader', options: { name: path => { if(!/node_modules|bower_components/.test(path)) return 'images/[name].[hash].[ext]'; return 'images/vendor/' + path .replace(/\\/g, '/') .replace( /((.*(node_modules|bower_components))|images|image|img|assets)\//g, '' ) + '?[hash]'; }, publicPath: './' } }, 'img-loader' ] } ]) }, resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js', '~': resolve('node_modules'), '@': resolve('src') } }, plugins: [], performance: { hints: false } } //Dev & Production plugins module.exports.plugins.push( //Environment new webpack.DefinePlugin({ 'process.env': { NODE_ENV: '"' + (!isProduction ? 'development' : 'production') + '"' } }), //Extract CSS to file new ExtractTextPlugin({ filename: !isProduction ? '[name].css?c=[chunkhash]' : '[name].min.css?c=[chunkhash]' }), //Extract vendor CSS/JS new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', minChunks: function(module) { return module.context && module.context.indexOf('node_modules') !== -1; } }), //Extract html new HtmlWebpackPlugin({ filename: 'index.html', template: SRC_PATH + '/index.html', inject: true, chunksSortMode: 'dependency', minify: !isProduction ? undefined : { removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true } }) ); if(!isProduction) //Development stuff module.exports.plugins.push( // Hot module replacement..DUNNO new webpack.HotModuleReplacementPlugin(), // Use the NoEmitOnErrorsPlugin to skip the emitting // phase whenever there are errors while compiling. // This ensures that no assets are emitted that include errors. new webpack.NoEmitOnErrorsPlugin() ); else //Production module.exports.plugins.push( // Optimize CSS new OptimizeCSSPlugin({ cssProcessorOptions: { safe: true } }), // Minify JS new webpack.optimize.UglifyJsPlugin({ sourceMap: true, compress: { warnings: false } }) ); const ExtractTextPlugin = require('extract-text-webpack-plugin') exports.cssLoaders = function(options) { options = options || {} var cssLoader = { loader: 'css-loader', options: { minimize: process.env.NODE_ENV === 'production', sourceMap: options.sourceMap } } // generate loader string to be used with extract text plugin function generateLoaders(loader, loaderOptions) { var loaders = [cssLoader] if(loader) { loaders.push({ loader: loader + '-loader', options: Object.assign({}, loaderOptions, { sourceMap: options.sourceMap }) }) } // Extract CSS when that option is specified // (which is the case during production build) if(options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader' }) } else { return ['vue-style-loader'].concat(loaders) } } // https://vue-loader.vuejs.org/en/configurations/extract-css.html return { css: generateLoaders(), postcss: generateLoaders(), less: generateLoaders('less'), sass: generateLoaders('sass', { indentedSyntax: true }), scss: generateLoaders('sass'), stylus: generateLoaders('stylus'), styl: generateLoaders('stylus') } } // Generate loaders for standalone style files (outside of .vue) exports.styleLoaders = function(options) { var output = [] var loaders = exports.cssLoaders(options) for(var extension in loaders) { var loader = loaders[extension] output.push({ test: new RegExp('\\.' + extension + '$'), use: loader }) } return output } const webpack=require（'webpack'）； const HtmlWebpackPlugin=require（'html-webpack-plugin'）； const ExtractTextPlugin=require（'extract-text-webpack-plugin'）； const OptimizeCSSPlugin=require（'optimize-css-assets-webpack-plugin'）； const-utils=require（'./utils'）； const path=require（'path'）； const isProduction=process.env.NODE_env==“production”； const SRC_PATH=PATH.join（_dirname，'SRC'）； const DIST_PATH=PATH.join（uu dirname，！isProduction？'www dev'：'www'）； 函数解析（dir）{ 返回path.join（uu dirname，“../”，dir） } module.exports={ devtool:！iProduction？“内联源映射”：未定义， 条目：{ 主要内容：[ SRC_PATH+'/main.less'， SRC_PATH+'/main.js'， ] }, 输出：{ 路径：DIST_path， 公共路径：“”， 文件名：！iProduction？'[name].js':'[name].min.js？c=[chunkhash]'， sourceMapFilename:！isProduction？'[name].js.map'：未定义 }, 模块：{ 规则：utils.styleLoaders（{sourceMap:true，extract:true}） 康卡特先生([{ 测试：/\.vue$/,， 加载程序：“vue加载程序”， 选项：{ 加载程序：utils.cssLoaders({ sourceMap:true， 摘录：真的 }) }, }, { 测试：/\.js$/,， 加载器：“巴别塔加载器”， 排除：/node\u模块/ }, { 测试：/\（woff2？| ttf | eot | otf）$/， 加载器：“文件加载器”， 选项：{ 名称：路径=>{ if（！/node_模块| bower_组件/.test（路径）） 返回'font/[name].[hash].[ext]'； 返回“字体/供应商/”+路径 .替换（/\\/g，“/”） .替换( /（（.*（节点|模块|鲍尔|组件））|字体|资源）\/g，' )+'？[hash]'； }, 公共路径：'./' } }, { 测试：/\（bmp | png | jpe | g | gif | svg | ico | ani | cur）$/， 装载机：[{ 加载器：“文件加载器”， 选项：{ 名称：路径=>{ if（！/node_模块| bower_组件/.test（路径）） 返回'images/[name].[hash].[ext]'； 返回“图像/供应商/”+路径 .替换（/\\/g，“/”） .替换( /（.*（节点|模块|鲍尔|组件）|图像|图像| img |资产）\//g'，' )+'？[hash]'； }, 公共路径：'./' } }, “img装载机” ] } ]) }, 决心：{ 别名：{ “vue$”：“vue/dist/vue.esm.js”， “~”：解析（'node_modules'）， “@”：解析（'src'） } }, 插件：[]， 性能：{ 提示：错误 } } //开发和生产插件 module.exports.plugins.push( //环境 新的webpack.DefinePlugin({ “process.env”：{ 节点_ENV:'“+（！isProduction？'development'：'production'）+'” } }), //将CSS提取到文件 新的ExtractTextPlugin（{filename:！isProduction？'[name].css？c=[chunkhash]'：'[name].min.css？c=[chunkhash]'}）， //提取供应商CSS/JS 新建webpack.optimize.commonChunkPlugin({ 名称：'供应商'， minChunks：函数（模块）{ 返回module.context&&module.context.indexOf（'node_modules'）！=-1； } }), //提取html 新HtmlWebpackPlugin({ 文件名：“index.html”， 模板：SRC_PATH+'/index.html'， 是的， ChunksortMode:“依赖项”， 缩小：！iProduction？未定义：{ removeComments：对， 拼贴空白：对， RemoveAttribute属性：true } }) ); 如果（！i生产） //开发人员 module.exports.plugins.push( //热模块更换..不知道 新建webpack.HotModuleReplacementPlugin（）， //使用NOEMITONERRORSPUGIN跳过发射 //编译时出现错误时的阶段。 //这确保不会发出包含错误的资源。 新webp