我有一个问题,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"
}
}