课前准备:
webpack最重要的四个核心概念:入口(entry)、输出(output)、加载器(loaders)、插件(plugins)。
上一节我们搭建了一个简易的webpack工程,实现了本地启动项目的功能,了解了入口(entry)、输出(output)的基本使用方法,本节我们将一起探讨加载器loaders的使用方法。
在webpack的世界里,每个文件都是一个模块,比如:.css、.js、.html、.less、.scss、.jpg等,对于不同的模块,需要使用不同的加载器(loaders)来处理。通过安装不同的加载器可以对各种后缀的文件进行处理,比如写一些css样式,就要使用到style-loader、css-loader。
通过npm安装:npm install css-loader --save-dev
npm install style-loader --save-dev
或者合并来写npm install --save-dev css-loader style-loader
安装完成以后,在webpack.config.js内进行配置loaders,增加对.css文件处理:var config = {
//entry output省略
module: {
rules: [
{
test: /\.css$/, //检测以.css为后缀的文件
use: ['style-loader', 'css-loader'] //使用相应的loaders对文件进行处理,注意顺序
}
]
}
};
module.exports = config;
在module.rules属性里可以指定一系列的loaders,每一个loader都必须包含一个test和use选项。上面的配置文件意思就是说:当webpack编译过程中遇到require()或者import语句导入一个以.css为后缀的文件时,先通过css-loader转换,再通过style-loader转换,然后继续打包。use选项的值可以是数组或者字符串,特别要注意的是,如果是数组,那么它的编译顺序就是从后往前。
在根目录下新建style.css,代码如下:#app {
color: red;
font-size: 20px;
}
在index.js中引入style.css,代码如下:import './style.css';
setTimeout(() => {
document.getElementById('app').innerHTML = 'Hello Webpack And Vue!';
}, 5000);
重新执行npn run dev命令,启动成功以后发现页面已经出现了我们想要的效果:div#app内的字体颜色为红色,字体大小为20px。
打开Chrome控制台,检查页面元素发现:
index.html
css是通过javascript动态创建
总结:
(1)webpack四个核心思想:入口(entry)、出口(output)、加载器(loaders)、插件(plugins)。
(2)loaders是在webpack.config.js内的module.rules(数组类型)属性上配置的。
(3)每一个loader都要一个test选项和use选项,其中test通过一个正则表达式来判断不同后缀的文件,use使用一个字符串或者数组进行该后缀文件的处理方式——处理.css文件使用到了css-loader和style-loader,特别要注意的是如果use使用数组,那么loader的执行方式是从后往前。
(4)js文件引入css文件,可以使用require()或import方法。