上一节讲到如何使用Webpack实现最基础的打包功能,但是发现以下几个比较突出的问题:
① 我们只打包了一个JS文件,多个文件该如何打包?
② CSS样式该如何打包?
③ 每次写完代码想要看运行结果都需要手动输命令打包,反而降低了开发效率
没关系,本文就是为解决这些问题而来的。继续上节实例,开始吧!
一、JS模块化
使用Webpack成功打包多个JS文件最核心的一点就是使用模块化的开发方式,而Webpack支持CommonJS和ES6两种模块化规范,其中有关CommonJS的语法可以看我之前的一篇文章→JavaScript模块化编程规范。本文也将以CommonJS规范来讲解Webpack中的JS模块化。
我们在scripts目录下添加一个module.js文件,目录结构如下:
并写入以下代码:
// module.js
var text = 'Hello Webpack!';
module.exports = { // CommonJS规范中模块输出语法
text: text
};
然后在index.js中引入module.js文件:
// index.js
var 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-loader和style-loader两个loader,css-loader只是用于加载css文件(并没有添加到页面),而style-loader则是将打包后的css代码以