Webpack轻松入门(二)——CSS打包

上一节讲到如何使用Webpack实现最基础的打包功能,但是发现以下几个比较突出的问题:

① 我们只打包了一个JS文件,多个文件该如何打包?

② CSS样式该如何打包?

③ 每次写完代码想要看运行结果都需要手动输命令打包,反而降低了开发效率

没关系,本文就是为解决这些问题而来的。继续上节实例,开始吧!

一、JS模块化

使用Webpack成功打包多个JS文件最核心的一点就是使用模块化的开发方式,而Webpack支持CommonJS和ES6两种模块化规范,其中有关CommonJS的语法可以看我之前的一篇文章→JavaScript模块化编程规范。本文也将以CommonJS规范来讲解Webpack中的JS模块化。

我们在scripts目录下添加一个module.js文件,目录结构如下:

并写入以下代码:

然后在index.js中引入module.js文件:

由于我们在上一节中已经对Webpack的打包入口和输出路径进行了基本配置,所以我们只需同样执行命令即可将两个JS文件进行打包输出到dist目录。

小贴士:有时输入的命令比较长,我们可以将其写入package.json文件的属性中。

改写后的package.json如下:

接着我们只需执行命令即可(或直接输入)。

二、打包CSS样式

1. loader简介

由于Webpack打包入口目前只配置了一个index.js文件,那么其他需要被打包的文件都必须通过模块化方式引入该文件才行,而默认情况下,引入的文件必须是js文件(如上面添加的module.js)。

那么其他文件类型该如何进行打包呢?

这时我们就要用到Webpack中所提供的各种loader,它就是专门用于处理除JS文件之外的其他格式文件的编译、提取、合并、打包等工作的。

其中CSS文件的打包需要用到css-loaderstyle-loader两个loader,css-loader只是用于加载css文件(并没有添加到页面),而style-loader则是将打包后的css代码以\标签形式添加到页面头部。

2. 安装loader

3. 开始打包

在css目录下新建一个style.css文件,并写入样式:

然后在index.js中引入该文件:

最后输入命令,打包完成后打开index.html页面后,你会发现除了弹出之前的“Hello Webpack!”外,页面背景颜色也变为红色,说明样式也已经打包成功。

三、自动化打包

通过上面的讲解你会发现,虽然我们已经将命令改成了,然而实际操作上还是得每次手动输入命令打包,不开心。

我们能不能像以前不用Webpack时那样,写完了直接刷新页面就能看到效果呢?

本文重点总结

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180618G00BEN00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券