最近在配置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"]})
}
]
}
不足之处，恳请大神指正。我会立马改正。
