模块化加载 上一节进行了一个简单的模块化加载，复杂点

新建一个js文件 名为 world.js 依旧在根目录下

在hello.js中引入world.js 模块化加载，world.js是一个模块 引入的方式是commonJS(require)在Node经常使用这种方法

再次打包 打包完成 箭头所指打包了两个文件

打开打包后的文件 hello.bundle.js

webpack用自己的方式引入了模块 模块1是hello.js 模块0是world.js

除了js还可以添加图片、css模块等 例如添加css模块

依旧在根目录下建立一个.css文件 例如test.css

css中写一些CSS代码

在hello.js 用require 引入css

重新运行打包

会发现报错  报错的原因是没有css加载的loader 所以我们必须得下载css加载的loader模块 它的作用是 可以在js中打包css模块

通过npm下载css-loader

下载完成

修改引用的css方式

重新打包

会发现打包成功

在打包后的js中可以看到

然后把我们的打包文件引入页面  看看效果 首先根目录下 建一个test.html

打开test.html js有效果 css没有效果  因为我们设置了 它的背景色是红色

会发现我们的页面中样式没有引入

而引入css需要另一个模块 style-loader 依旧npm下载

下载成功后 修改引入的css

再次打包 打包成功

刷新页面 查看页面

成功了

这里的css-loader的作用是让css可以打包 style-loader作用是页面创建style标签 加入打包的css

webpack第一节(3)的更多相关文章

  1. webpack第一节(1)

    跟着慕课网的老师做了下笔记 webpack是一个前端打包工具 它可以优化网页.例如 页面模块化加载.图片优化.css.js压缩等等. 模块化加载也就是懒加载,按需加载,以前的模式是所以得css写在一起 ...

  2. webpack第一节(2)

    安装webpack在文件夹中 安装完成如图所示 牛刀小试 在webpack-test根目录下新建一个hello.js (不新建在node-modules文件夹下面的目的是,该文件夹是webpack的依 ...

  3. webpack第一节(4)

    每次修改了代码都需要重新手动打包,这样很麻烦,不符合webpack的初衷,我们查看webpack帮助看看有没有可以自动运行的方法 输入 webpack -help 可以发现有个 --watch方法 它 ...

  4. Ext JS学习第十六天 事件机制event（一） DotNet进阶系列(持续更新) 第一节：.Net版基于WebSocket的聊天室样例 第十五节：深入理解async和await的作用及各种适用场景和用法 第十五节：深入理解async和await的作用及各种适用场景和用法 前端自动化准备和详细配置(NVM、NPM/CNPM、NodeJs、NRM、WebPack、Gulp/Grunt、G

    code&monkey   Ext JS学习第十六天 事件机制event(一) 此文用来记录学习笔记: 休息了好几天,从今天开始继续保持更新,鞭策自己学习 今天我们来说一说什么是事件,对于事件 ...

  5. android内部培训视频_第一节

    声明:本视频为公司内部做android培训时录制的,无任何商业目的.同时鉴于水平有限,可能不符合您的需求,放在这里的目的是提供给公司同事下载,作为培训的一个记录,也作为一个系列教程的自我督促完成的理由 ...

  6. 我的第一节Android课

    我的第一节安卓课程,今天非比寻常的一天,我开始了我程序猿之路的第一节安卓课程,安卓课程只是我的一个兴趣班,我的本专业是java开发,因为喜欢做一个属于自己的一个手机APP,就选多个一样技能,毕竟十八般 ...

  7. 第四章 跨平台图像显示库——SDL 第一节 与SDL第一次亲密接触

    http://blog.csdn.net/visioncat/article/details/1596576 GCC for Win32 开发环境介绍(5) 第四章 跨平台图像显示库——SDL 第一节 ...

  8. Centos7 Openstack - (第一节)基本环境配置

    Centos7 install Openstack - (第一节)基本环境配置 我的blog地址:http://www.cnblogs.com/caoguo 根据openstack官方文档配置 官方文 ...

  9. seajs第一节，seajs基本使用

    什么是seajs,它是干什么使用的,可以去网上搜索一下, 官网:http://seajs.org/docs/ 基本使用seajs <!DOCTYPE html> <html> ...

随机推荐

  1. SSH配置与修改

    ssh文件路径:/etc/ssh/ ssh的日志文件:/var/log/secure 端口修改:./sshd_config 服务启停: service sshd start/stop/restart ...

  2. python3用pygame实现播放音乐文件

    import pygameimport time #导入音乐文件file = r'C:\1.wav'pygame.mixer.init()track = pygame.mixer.music.load ...

  3. nuget cli 打包发包

    微软官网打包说明:https://docs.microsoft.com/zh-cn/nuget/quickstart/create-and-publish-a-package-using-visual ...

  4. make编写教程（一）

    1. make规则 如果工程没有被编译过,则所有的c文件都要编译和链接 如果工程的某几个c文件被修改,那么只编译被修改的文件,并链接目标程序 如果工程的头文件被修改,需要编译引用了此头文件的c文件,并 ...

  5. mybatis的Date类型。

    在写select的时候,里面的查询语句.where后面如果jdbcType=DATE没有写的话是 这个形式的. <select id="selectPhoto" parame ...

  6. window 任务管理器

    用的是win10 系统,一般window都差不多. 1.查看进程: 2.查看端口:性能 --> 打开资源资源监视器 --> 网络 --> 侦听端口 3.查看磁盘活动(查看文件被哪个进 ...

  7. [CSP-S模拟测试]:壕游戏（费用流）

    题目传送门(内部题18) 输入格式 第一行包括四个数$n,m,k,s$表示有$n$个剧情点,$m$个关卡,要玩$k$次游戏,$s$个完结点接下来一行包含$s$个数,代表$s$个完结点的编号.接下来$m ...

  8. vue绑定属性、绑定class及绑定style

    1.绑定属性  v-bind 或者 : 例如:<img :src="pic_src" /> <template> <div id="app& ...

  9. 重温HTML和CSS3

    重温Web前端基础 本篇幅中着重文字,只是记录一些自己的见解,巩固下自身基础 网页结构是什么? 结构层 html 导航,列表,段文字,图片,链接,表示层 css 颜色,大小,位置,行为层 JavaSc ...

  10. ASP.NET免费发送邮件|

    因为之前有做过邮件发送的项目,最近也看一些朋友问起这个的做法,现在拿来给大家查看下.因为那时候是公司的服务器配置的.所以后来自己便在网上找到了一个可以任何个人都是可以使用的邮件发送.小弟新手,高手看到 ...