首页 > 代码库 > webpack模块加载css文件及图片地址
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解决了问题。
webpack模块加载css文件及图片地址
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。