webpack模块加载css文件及图片地址

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解决了问题。