最近在配置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"]})
            }
        ]
    }

不足之處，懇請大神指正。我會立馬改正。