webpack4 高手之路 第四天

共计 623 个字符，预计需要花费 2 分钟才能阅读完成。

配置文件中设置引入 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 就成功啦！