我正在使用所有我的css / less文件并使用extract-text-webpack-plugin捆绑它们然后在我的网页上使用它但是由于某种原因它能够捆绑bootstrap,材料设计标志性字体和其他几个供应商减少文件到输出文件。但是当我尝试使用自定义的较少文件时,输出为空。不知道发生了什么,提前谢谢。
webpack.config.js
'use strict';
const webpack = require('webpack');
const path = require('path');
const merge = require('webpack-merge');
const validate = require('webpack-validator');
const plugins = require('./plugins');
const PATHS = {
app: path.resolve(__dirname, 'public', 'js', 'main.js'),
build: path.resolve(__dirname, 'public', 'build'),
style: [
path.resolve(__dirname, 'public/less/variables.less')
]
};
const common = {
entry: {
app: PATHS.app,
style: PATHS.style,
vendor: [
....
]
},
output: {
path: PATHS.build,
filename: '[name].js'
},
target: 'web',
module: {
loaders: [
{test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff'},
{test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'},
{test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file'},
{test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'},
{test: /\.json$/, loader: 'json' },
{test: /\.(jpe?g|png|gif|svg)$/i, loader: 'url?limit=10000!img?progressive=true' },
{test: /(\.tpl|\.html)$/, loader: 'underscore-template-loader' }
]
},
plugins: [
// This context resolves warning from loading ./locales for moment.js
new webpack.ContextReplacementPlugin(/\.\/locale$/, 'empty-module', false, /js$/),
// ProvidePlugin loads dependencies into global scope
new webpack.ProvidePlugin({
....
}),
// CommonsChunkPlugin bundles all vendor modules
new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js')
],
resolve: {
// Alias maps modules being used with different names to node_modules
alias: {
....
}
}
}
var config;
// Detect how npm is run and branch based on that
switch(process.env.npm_lifecycle_event) {
case 'build:dev':
config = merge(
plugins.clean(PATHS.build),
common,
plugins.extractCSS(PATHS.style),
{ devtool: 'source-map' }
);
break;
default:
config = merge(
plugins.clean(PATHS.build),
common,
plugins.extractCSS(PATHS.style),
{ devtool: 'eval-source-map' }
);
}
module.exports = validate(config);
plugins.js
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
exports.extractCSS = function(paths) {
return {
module: {
loaders: [
{test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader'), include: paths},
{test: /\.less$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader!less-loader'), include: paths}
]
},
plugins: [
new ExtractTextPlugin('[name].css')
]
};
}
variables.less
//
// Variables
// --------------------------------------------------
//== Colors
//
//## Gray and brand colors for use across Bootstrap.
@tone-brighter: #fafbfc; //#fcfcfc;
@tone-bright: #f0f3f5; //#f5f5f5;
@tone-bright-alt: #edf0f2; //#f2f2f2;
@gray-darker: lighten(#040505, 20%); //lighten(#000, 20%);
@gray-dark: lighten(#040505, 40%); //lighten(#000, 40%);
@gray: lighten(#040505, 60%); //lighten(#000, 60%);
@gray-light: lighten(#040505, 80%); //lighten(#000, 80%);
@gray-lighter: lighten(#040505, 90%); //lighten(#000, 90%);
@border-darker: #dadfe3; //#e3e3e3;
@border-lighter: #e6eaed; //#ededed;
// Brand colors
// -------------------------
@brand-default: #ecf0f1;
@brand-inverse: #95a5a6;
@brand-primary: #3498db;
@brand-success: #2ecc71;
@brand-warning: #f1c40f;
@brand-danger: #e74c3c;
@brand-info: #3bbfb4;
@brand-brown: #c0392b;
@brand-indigo: #7863bc;
@brand-violet: #9b59b6;
@brand-orange: #e67e22;
@brand-midnightblue: #34495e;
@brand-sky: #82c4e6;
@brand-magenta: #e73c68;
@brand-purple: #e044ab;
@brand-green: #37bf8d;
@brand-grape: #7a869c;
@brand-toyo: #556b8d;
@brand-alizarin: #e36d4f;
@brand-blue: #5394c9;
style.css输出文件
/*# sourceMappingURL=style.css.map*/