webpack4 高手之路 第四天

摘要： 配置檔案中設定引入css檔案 之前講過在引用css檔案的時候可以引入style-loader和css=loader，諸如這樣： require("style-loader!css-loader!./src/css/style.css") 現在提供一種更常用和更便捷的...

配置檔案中設定引入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就成功啦！