webpack3提取vue css,Webpack没有从供应商vue组件中将CSS提取到文件中

我有一个问题，webpack没有从 vendor VUE组件中提取CSS .

所有这些样式标签仅来自 vendor Vue组件 . 从Javascript加载页面后插入

我的vue组件中的其他样式，我的LESS文件， non-vue 供应商包中的样式被正确拆分为 main.css 和 vendor.css

配置中缺少什么？ (底部)

感谢名单

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

}

})

);

utils.js

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

}

package.json

{

"name": "vue-test",

"description": "A Vue.js project",

"version": "1.0.0",

"author": "",

"private": true,

"scripts": {

"start": "cross-env NODE_ENV=development webpack-dev-server --hot --config=webpack.dev.config.js",

"build": "cross-env NODE_ENV=development webpack --config=webpack.config.js --progress --hide-modules",

"watch": "npm run build -- --watch",

"release": "cross-env NODE_ENV=production webpack --config=webpack.config.js --progress --hide-modules"

},

"dependencies": {

"axios": "^0.16.2",

"font-awesome": "^4.7.0",

"material-design-icons": "^3.0.1",

"velocity-animate": "^1.5.0",

"vue": "^2.4.1",

"vue-directive-tooltip": "^1.2.3",

"vue-image-lightbox": "^5.5.3",

"vue-images": "^1.0.10",

"vue-js-modal": "^1.2.2",

"vue-lazyload": "^1.0.6",

"vue-router": "^2.7.0",

"vue-select": "^2.2.0",

"vue-touch": "^2.0.0-beta.4",

"vue2-dropzone": "^2.3.5",

"vuejs-datepicker": "^0.9.4",

"vuetify": "^0.13.1",

"vuex": "^2.3.1",

"vuex-router-sync": "^4.2.0"

},

"devDependencies": {

"babel-core": "^6.0.0",

"babel-loader": "^6.0.0",

"babel-preset-env": "^1.5.1",

"babel-preset-stage-2": "^6.24.1",

"bulma": "^0.4.3",

"cross-env": "^3.0.0",

"css-loader": "^0.25.0",

"cssnano": "^3.10.0",

"extract-text-webpack-plugin": "^2.1.2",

"file-loader": "^0.9.0",

"html-webpack-plugin": "^2.29.0",

"img-loader": "^2.0.0",

"less": "^2.7.2",

"less-loader": "^4.0.4",

"node-sass": "^4.5.0",

"optimize-css-assets-webpack-plugin": "^2.0.0",

"sass-loader": "^5.0.1",

"vue-loader": "^13.0.2",

"vue-template-compiler": "^2.3.3",

"webpack": "^2.6.1",

"webpack-dev-server": "^2.4.5"

}

}