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文件及图片地址的更多相关文章
- webpack加载css文件及其配置
webpack加载css文件及其配置 当我们写了几个css文件之后如果想要引用到html中去的话我们最开始的方式就是通过link标签将css文件导入进去,但是如果我们的css文件有很多的话,一个个的导 ...
- asp.net MVC发布iis无法加载css,js和图片
今天真够郁闷的,遇到了在本地能运行的项目到了iis服务器那里就不行了,无法加载css,js和图片,这里说清楚一下先,关于asp.net 的MVC中这样的情况其实不少,但是之前遇到的是在visual s ...
- Webpack模块加载器
一.介绍 Webpack是德国开发者 Tobias Koppers 开发的模块加载器,它能把所有的资源文件(JS.JSX.CSS.CoffeeScript.Less.Sass.Image等)都作为模块 ...
- webpack中加载CSS
webpack强大之处在于可以将CSS当做一个资源模块进行管理和加载 基本使用: 安装webpack的加载插件style-loader和css-loader: npm install style-lo ...
- js动态加载css文件和js文件的方法
今天研究了下js动态加载js文件和css文件的方法. 网上发现一个动态加载的方法.摘抄下来,方便自己以后使用 [code lang="html"] <html xmlns=& ...
- django 加载静态文件(图片,js,css)
昨天写过一个项目通过django上传展示图片,但是今天写项目的时候发现出现了问题,静态文件加载不出来了,尴尬的一笔~ 记录一下静态文件的使用方法,基础~ ----------------------- ...
- Chrome浏览器加载CSS文件TTFB waiting超时的奇葩问题
今天本来调试 requirejs 加载js异常的问题,试了下Chrome浏览器,结果意外发现这个 CSS 加载异常的BUG,非常非常奇怪. 本地测试环境是 wi7x64 安装的 XAMPP 3.2.1 ...
- spring MVC 项目 WEB-INF下的jsp不能加载css文件
一.项目目录 二.解决方法(已解决) 1. jsp文件加入 <link href="<c:url value="/css/main.css" />&qu ...
- jQuery动态加载css文件实现方法
$("<link>").attr({ rel: "stylesheet",type: "text/css",href: &quo ...
随机推荐
- C# List<T> 合并、去重、查找
List<,,,,,}; List<,,,,}; listA.AddRange(listB );//把集合A.B合并 List<int> Result = listA.Unio ...
- Spring学习(二)
1. AOP的思想(如何实现),AOP在哪些地方使用? 相关术语有哪些? AOP是面向切面编程,它是一种编程思想,采取横向抽取机制,取代了传统纵向继承体系重复性代码的方式 应用场景有: 记录日志 监控 ...
- C++开始前篇,深入编译链接(3)
一,COMMON块 什么是COMMON块,这是一种机制,早期的Fortran没有动态分配空间的机制,程序员必须事先声明它所需要的临时使用空间的大小.Fortran把这种空间叫做COMMON块,当不同的 ...
- TO BUY
// book 人月神话 // hardware 乐视.凯酷一生黑 HHKB 白无刻 Filco 奶酪绿 G600 // Book 重构 改善既有代码的设计 java与模式 人月神话(40周年中文纪念 ...
- not in 和 not EXISTS 的区别
1.in和exists in是把外表和内表作hash连接,而exists是对外表作loop循环,每次loop循环再对内表进行查询,一直以来认为exists比in效率高的说法是不准确的.如果查询的两个表 ...
- JSON对象格式美化
JSON.stringify(obh, null, "\t"); 这段代码就可以对某个js对象美化输出
- 将 xunit.runner.dnx 的 xml 输出转换为 Nunit 格式
由于目前 DNX 缺乏 XSLT 的转换能力,因此只能使用变通方法.具体参考这个链接 主要内容复制过来是: From @eriklarko on July 14, 2015 7:38 As a wor ...
- Java 之 软件的生命周期
1.寻找商机: a.项目:有明确的需求提供方 b.产品:没有需求提供方,由市场决定 2.可行性分析: a.国家法律法规 b.资金 c.人员技术组成 3.投标 4.需求的搜集与分析: a.参与人员:需求 ...
- iOS---FMDB数据升级
本人在这里重要强调一下!!! 看这里,看这里,看这里,重要的事说三遍. 本人在项目开发中,由于需求问题,不得不对已经建立好的数据库进行修改(添加字段),我就很随意的直接添加了对一个的字段,运行一下,数 ...
- weibform中Application、ViewState对象和分页
Application: 全局公共变量组 存放位置:服务器 特点:所有访问用户都是访问同一个变量,但只要服务器不停机,变量一直存在于服务器的内存中,不要使用循环大量的创建Application对象,可 ...