webpack 单独打包css文件问题

Question

var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var packCSS = new ExtractTextPlugin('css/style.css'); 

module.exports = {
    entry: [
        'react-hot-loader/patch',
        'webpack-dev-server/client?http://127.0.0.1:3001',
        'webpack/hot/dev-server',
        "./js/src/index.jsx"
    ],
    output: {
        path: path.join(__dirname, 'js/dist'),
        filename: "bundle.js",
        publicPath: '/assets/'
    },
   plugins: [
        new webpack.HotModuleReplacementPlugin(),
        packCSS
    ],
    module: {
        loaders: [
            {
                test: /\.jsx$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['react','es2015']
                }
                // include: path.join(__dirname, 'js/dist')
            },
            {
                test: /\.css$/,
                exclude: /node_modules/,
                // loader:'style!css'
                loader:ExtractTextPlugin.extract(['style','css'])
            },
        ]
    }
}

Answer 1

我参考的是一个vue-demo,觉得他的webpack配的不错，包含有开发和上线配置，github地址。

ExtractTextPlugin = require('extract-text-webpack-plugin');

// 生产环境下分离出 CSS 文件
config.module.loaders.push({
  test: /\.css$/,
  loader: ExtractTextPlugin.extract('style', 'css')
}, {
  test: /\.less$/,
  loader: ExtractTextPlugin.extract('style', 'css!less')
}, {
  test: /\.scss$/,
  loader: ExtractTextPlugin.extract('style', 'css!sass')
});

Answer 2

ExtractTextPlugin没有这么用的吧？查了一下文档也没有这样的用法，plugin应该就只能是放在webpack配置那里作为全局配置的。详情请看这篇文章《webpack多页应用架构系列（五）：听说webpack连less/css也能打包？》

不过我也想找局部配置的方法呢

Answer 3

配置loaders的时候要这样写：

{
    test: /\.css/,
    loader: ExtractTextPlugin.extract(['style','css'])
}