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就成功啦！