webpack:ExtractTextPlugin输出空文件

时间:2016-12-01 20:37:51

标签: javascript webpack less

我正在使用所有我的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*/

0 个答案:

没有答案