码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2016-11-27 22:28:46      阅读:300      评论:0      收藏:0      [点我收藏+]

标签:封装   comm   plugins   jquery   pac   检查   请求   handle   用户   

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

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

标签:封装   comm   plugins   jquery   pac   检查   请求   handle   用户   

原文地址:http://www.cnblogs.com/zhu-xingyu/p/6107010.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!