为了账号安全,请及时绑定邮箱和手机立即绑定

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

标签:
Html/CSS

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

① 我们只打包了一个JS文件,多个文件该如何打包?
② CSS样式该如何打包?
③ 每次写完代码想要看运行结果都需要手动输命令打包,反而降低了开发效率

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

一、JS模块化

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

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

https://img1.sycdn.imooc.com//5d5a9b3000019f0603970429.png

并写入以下代码:

// module.jsvar text = 'Hello Webpack!';module.exports = {   // CommonJS规范中模块输出语法
    text: text
};

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

// index.jsvar module = require('./module.js');   // CommonJS规范中模块引入语法alert(module.text);   // 打包后同样输出“Hello Webpack!”

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

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

改写后的package.json如下:

{  "name": "webpackdemo",  "version": "1.0.0",  "description": "",  "main": "index.js",  "scripts": {    "test": "echo \"Error: no test specified\" && exit 1",    "start": "webpack"   
  },  "author": "",  "license": "ISC",  "devDependencies": {    "webpack": "^4.5.0",    "webpack-cli": "^2.0.14"
  }
}

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

二、打包CSS样式

1. loader简介

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

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

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

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

2. 安装loader

输入命令npm i -D css-loader style-loader同时安装这两个loader,安装结束后再在webpack.config.js文件中配置相应的loader,具体配置如下:

// webpack.config.jsmodule.exports = {
    entry: './src/scripts/index.js',   // 打包入口
    output: {   
        path: __dirname + '/dist',   // 输出路径
        filename: 'scripts/index.js'    //  输出文件名
    },    module: {
        rules: [  
            {
                test: /\.css$/,   // 正则表达式,表示.css后缀的文件
                use: ['style-loader','css-loader']   // 针对css文件使用的loader,注意有先后顺序,数组项越靠后越先执行
            }
        ]
    }
};

3. 开始打包

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

/* style.css */html{ background: #f00;}

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

// index.jsvar module = require('./module.js');require('../css/style.css');   // 引入css样式alert(module.text);

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

三、自动化打包

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

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

答案当然是可以的,我们只需在webpack.config.js中添加watch: true就好。

module.exports = {
    entry: './src/scripts/index.js',
    output: {
        path: __dirname + '/dist',
        filename: 'scripts/index.js'
    },    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader','css-loader']
            }
        ]
    },
    watch: true   // 监听修改自动打包};

本文重点总结

① 打包多个文件为一个文件,必须使用模块化开发方式
② 先后使用css-loader和style-loader可以打包CSS样式并添加至页面
③ 想要自动化打包,只需在webpack.config.js文件中添加watch: true



作者:前端王睿
链接:https://www.jianshu.com/p/6b0b80eb3e2e


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消