上一节我们学习了webpack的安装和编译,这一节我们来一起学习webpack的加载器和配置文件。

  要想让网页看起来绚丽多彩,那么css就是必不可少的一份子。如果想要在应用中增加一个css文件,那么webpack能不能处理呢?答案当然是可以。但是由于webpack只能本地处理JavaScript,因此我们需要css-loader来处理css文件,我们还需要style-loader在css文件中应用样式。

  ps:css-loader会遍历css文件,找到url()表达式然后进行处理。style-loader会把原来的css代码插入到页面中的一个style标签中。

  接下来,我们就来看一看如何使用css-loader和style-loader。

一、安装css-loader和style-loader

npm install css-loader style-loader

ps:需要本地安装,即安装到执行命令所在文件夹,因此不能带上-g。安装成功后,将会创建包含css-loader和style-loader的node_modules文件夹。

二、使用案例(依赖于第一节中的文件)

1. 新建style.css文件。

body {
background: yellow;
}

2. 更新entry.js。

+ require("!style!css!./style.css");
document.write(require("./content.js"));

4.重新编译然后刷新浏览器,将会看到页面增加了黄色背景。
ps:在经过loader加载器的处理之后,会将原文件转换成为一个JavaScript module。

5.如果不想写这么长的require("!style!css!./style.css"),我们可以为loader绑定文件扩展。成功后,就可以使用require("./style.css")来引用css文件。
  首先我们更新entry.js。

  + require("./style.css");
document.write(require("./content.js"));

接下来执行命令

webpack ./entry.js bundle.js --module-bind 'css=style!css'

执行成功后,会看到同样的结果(部分环境需要使用双引号,若执行失败,可尝试将单引号替换成双引号)。

三、应用配置文件

1. 在命令后追加参数的方式显然过于麻烦,所以我们可以把配置都写到config文件中。创建webpack.config.js文件。

  module.exports = {
entry: "./entry.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [
{ test: /\.css$/, loader: "style!css" }
]
}
};

现在我们只需要执行webpack命令。执行后,webpack会尝试去在当前目录下查找webpack.config.js文件,并根据文件内容进行具体处理。

四、 美化命令行输出

编译可能会随着项目的增长而花费很长的时间。所以我们想要去查看编译的进度,或者给命令行增加一些颜色。
可以使用这个命令

webpack --progress --colors

五、监视模式

我们不想每次改变文件内容之后都去手动编译,可以使用

webpack --progress --colors --watch

webpack在编译中会缓存未改变的modules和输出文件。
在使用监视模式时,webpack会将文件监视器安装到编译过程中使用的所有文件。一旦检测到了任何改变,就会自动进行编译。当开启缓存时,webpack会将每个module保持在内存中,
对于没有改变的module进行重用。

六、开发服务器

开发服务器有利于提高本地开发的效率。
首先安装modules:

npm install webpack-dev-server -g

然后执行命令:

webpack-dev-server --progress --colors

执行完成后,将会在本地的8080端口上绑定一个很小的express服务。当bundle.js编译完成后,它将会自动更新浏览器页面,可以尝试使用浏览器打开
http://localhost:8080/webpack-dev-server/bundle查看执行结果。
ps:开发服务器使用webpack的监视模式,它还防止webpack将生成的文件发送到磁盘。相反,它保留并提供从内存生成的文件。

七、小结

到此为止,webpack的入门教程就算了告一段落了,接下来会带来进阶教程,敬请期待。 

webpack入门教程之初识loader(二)的更多相关文章

  1. 前端组件化Polymer入门教程(1)——初识&&安装

    前端组件化Polymer入门教程目录: 前端组件化Polymer入门教程(1)--初识&&安装 前端组件化Polymer入门教程(2)--快速入门 前端组件化Polymer入门教程(3 ...

  2. D3.js的v5版本入门教程(第十二章)—— D3.js中各种精美的图形

    D3.js的v5版本入门教程(第十二章) D3中提供了各种制作常见图形的函数,在d3的v3版本中叫布局,通过d3.layout.xxx,来新建,但是到了v5,新建一个d3中基本的图形的方式变了(我也并 ...

  3. Webpack 入门教程

    Webpack 是一个前端资源加载/打包工具.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源. 本章节基于 Webpack3.0 测试通过. 从图中我们可以看出,W ...

  4. webpack入门教程

    注:本文内容比较基础,供初学者快速入门参考. 更多详细信息请参考官方文档. 本文同步发布于我的博客,欢迎关注^_^ 1. 安装 npm install -g webpack 2. 基本使用 假设项目文 ...

  5. [转]Webpack 入门教程

    本文转自:http://www.runoob.com/w3cnote/webpack-tutorial.html Webpack 是一个前端资源加载/打包工具.它将根据模块的依赖关系进行静态分析,然后 ...

  6. WebGL入门教程(一)-初识webgl

    一.WebGL和传统网页的区别: 普通网页组成成分:HTML.JavaScript: WebGL网页组成成分:HTML5.JavaScript和GLSL ES(着色器语言 OpenGL ES): 二. ...

  7. webpack入门教程--3

    webpack打包还可以使用配置文件,我们先创建一个叫做webpack.config.js的文件.这里需要注意一下,这个JS文件的名字不是我们胡乱写的,也是不能更改的,因为webpack 命令执行后, ...

  8. webpack入门教程--2

    这次是创建第二个JS文件. 我们还是在app文件夹中创建一个叫做book2.js的JS文件,并在其中输入以下代码: module.exports = "It works from book2 ...

  9. 前端项目自动化构建工具——Webpack入门教程

    参考资料:https://www.webpackjs.com/(中文文档)   https://www.webpackjs.com/(官方文档) 首先有必要说明一下,本文侧重讲解webpack基本配置 ...

随机推荐

  1. 微信小程序体验(2):驴妈妈景区门票即买即游

    驴妈妈因为出色的运营能力,被腾讯选为首批小程序内测单位.驴妈妈的技术开发团队在很短的时间内完成了开发任务,并积极参与到张小龙团队的内测问题反馈.驴妈妈认为,移动互联网时代,微信是巨大的流量入口,也是旅 ...

  2. 04.LoT.UI 前后台通用框架分解系列之——轻巧的弹出框

    LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui LoT.UI开源地址如下:https://github.com/du ...

  3. 玩转spring boot——MVC应用

    如何快速搭建一个MCV程序? 参照spring官方例子:https://spring.io/guides/gs/serving-web-content/ 一.spring mvc结合thymeleaf ...

  4. "NHibernate.Exceptions.GenericADOException: could not load an entity" 解决方案

     今天,测试一个项目的时候,抛出了这个莫名其妙的异常,然后就开始了一天的调试之旅... 花了很长时间,没有从代码找出任何问题... 那么到底哪里出问题呢? 根据下面那段长长的错误日志: -- ::, ...

  5. 程序员必须要知道的Hadoop的一些事实

    程序员必须要知道的Hadoop的一些事实.现如今,Apache Hadoop已经无人不知无人不晓.当年雅虎搜索工程师Doug Cutting开发出这个用以创建分布式计算机环境的开源软...... 1: ...

  6. c++ pair 使用

    1. 包含头文件: #include <utility> 2. pair 的操作: pair<T1,T2> p; pair<T1,T2> p(v1,v2); pai ...

  7. 设计模式C#合集--抽象工厂模式

    抽象工厂,名字就告诉你是抽象的了.上代码. public interface BMW { public void Drive(); } public class BMW730 : BMW { publ ...

  8. 易用BPM时代,软件开发者缘何选择H3?

    近年来,企业级软件开发市场暗流汹涌,呈现出多种态势.软件开发团队规模趋于小型化,工作方式趋于快捷化,超过半数的软件开发者在工作中会选择使用易用的软件开发工具.随着流程管理越来越受到企业的重视,流程开发 ...

  9. BPM配置故事之案例5-必填与水印文本

    物资申请表改好了,但是没过两天老李又找来了. 老李:这个表格每次都是各个部门发给我们,再由我们采购部来填,太影响效率了,以后要让他们自己填. 小明:那就让他们填呗,他们有权限啊. 老李:可是他们说不会 ...

  10. 【swift】BlockOperation和GCD实用代码块

    //BlockOperation // // ViewController.swift import UIKit class ViewController: UIViewController { @I ...