webpack支持css文件加载并打包,只需安装相应加载器并在配置文件中配置 。
加载的css文件内容会与该模块里的js内容混合封装,这样做的好处是一个js文件包含了所有的css与js内容,有效减少了http请求次数,显著提高了页面响应性能的用户体验。
加载css文件时,如果css里含有图片的引用地址,编译时webpack会将图片资源处理并输出到设置的publicPath参数位置,该参数可以是以页面为基准的相对地址,也可以是以根目录为基准的绝对地址。url-laoder会在这个地址下兴建一个image文件夹用来存放处理过后的图片。
//入口文件输出配置
output: {
path: './js',
filename: '[name].js',
publicPath:"/js/"
}, //插件项
plugins: [commonsPlugin,new webpack.ProvidePlugin({
$ : "jquery",
/*React:"react",
ReactDOM:"react-dom",*/
}),/*new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.min.js')*/
], module: {
//加载器配置
loaders: [
{ test: /\.css$/, loader: 'style-loader!css-loader' },
{ test: /\.(js|jsx)$/, loader: 'jsx-loader?harmony' },
{ test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
{ test: /\.(png|jpg)$/, loader: 'url-loader?limit=25000&name=images/[hash:8].[name].[ext]'},
{ test: /\.(hbs|html)$/, loader: "handlebars"}, ]
},
如果你在编译时报错,可是你检查确实安装好了各种加载器,编译时依然报错,友情提醒这时候你应该去重新安装下file-loader,我就曾在图片地址解析时莫名报错,查了许久,重装file-loader解决了问题。