最近在配置webpack独立打包css文件的时候遇到一些问题。拿出来跟大家分享一下。

关于webpack的具体介绍可以去官网看看，我这里就不具体介绍了：

官网
还有这篇文章用来入门很不错：

之前写样式的时候采用了sass，采用的是用ruby的方式来编译的。感觉好low。于是自己琢磨了一下，能不能用webpack来编译打包。于是自己就配置了webpack.config.js以下为具体代码。

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

module.exports = {
    entry:{
        "basic":"./src/entry/basic.js",
        "head":"./src/entry/head.js",
        "foot":"./src/entry/foot.js"
    },
    output: {
        path: path.join(__dirname, 'dist'),
        filename: "js/[name].bundle.js"
    },
    plugins: [
        new webpack.optimize.UglifyJsPlugin({
            compressor: {
                warnings: false,
            },
        }),
        new webpack.optimize.OccurrenceOrderPlugin(),
        new ExtractTextPlugin("css/[name].css")
    ],
    module: {
        loaders: [
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract({fallback: "style-loader",use: "css-loader"})
            },
            {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract({fallback:"style-loader",use:["css-loader","sass-loader"]})
            }
        ]
    }

}

这段配置复制出来改下路径能立即使用，已经测试过了。

这段配置其实很简单，主要就是用webpack的loader来编译css、scss文件。并且把css文件独立出来。起初遇到了一个问题。困扰了我好久。于是拿出来跟大家分享下。想把css文件独立出来就要用到webpack的一个插件extract-text-webpack-plugin

1，在项目目录下安装该插件

"npm install extract-text-webpack-plugin --save-dev"。

2，在配置文件中进行修改（注意了问题来了）起初我的loader配置是这样的

module: {
        loaders: [  
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract("style-loader", "css-loader")
            },
            {
                test: /\.less$/,
                loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader")
            }
        ]
    },

初看没有错啊，跟官网上的demo是一样的。然后我webpack运行就提示我这个错误

image.png

后来经过资料查阅，估计是webpack版本问题（我用的是2.6.0）采用这个插件的时候要用上面的写法。即

 module: {
        loaders: [
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract({fallback: "style-loader",use: "css-loader"})
            },
            {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract({fallback:"style-loader",use:["css-loader","sass-loader"]})
            }
        ]
    }

不足之处，恳请大神指正。我会立马改正。