webpack 单独打包css文件问题

问题描述

问 题

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'])
            },
        ]
    }
}

解决方案

我参考的是一个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')
});

这篇关于webpack 单独打包css文件问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！