webpack4 高手之路 第四天

配置文件中设置引入css文件
之前讲过在引用css文件的时候可以引入style-loader和css=loader,诸如这样:
require(“style-loader!css-loader!./src/css/style.css”)
现在提供一种更常用和更便捷的方法。

同样先在项目文件夹下安装style-loader和css=loader模块npm install style-loader css-loader –save-dev

配置文件webpack.config.js如下:
module: { //module选项用来处理对应的模块
rules: [
{
test: /\.css$/, //用正则匹配所有的css文件
use: [‘style-loader’,’css-loader’] //使用style-loader,css-loader模块
}
]
}

这样就已经可以正常打包css文件了。

## 引用其他js文件和css文件 ##

创建基本目录如下:

在a.js和b.js文件中编写测试代码,如下:

编写css文件测试代码,如下:

在main.js中引用a.js、b.js和style.css文件

最后,npm run dev开始打包文件

index.html中引入main.js文件,在浏览器中打开调试台<script src=”dist/js/bundle.js” type=”text/javascript” charset=”utf-8″></script>

这样,一个小demo就成功啦!

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理