标签:封装 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解决了问题。
标签:封装 comm plugins jquery pac 检查 请求 handle 用户
原文地址:http://www.cnblogs.com/zhu-xingyu/p/6107010.html