傳送門：

webpack4系列教程（一）：初識webpack

webpack4系列教程（二）：建立專案，打包第一個JS檔案

webpack4系列教程（三）：自動生成專案中的HTML檔案

 1. Loader的使用

之前的博文已經介紹了Loader的概念以及用法，webpack 可以使用 loader 來預處理檔案，這允許你打包除 JavaScript 之外的任何靜態資源， 甚至允許你直接在 JavaScript 模組中 import CSS檔案。

在 src 目錄下新建 components 資料夾，新建 modal 元件：

編寫程式碼：

<!--modal.ejs-->

<div class="modal-parent">
    <div class="modal-header">
        <h3 class="modal-title"><%= title %></h3>
    </div>
    <div class="modal-body">
        <%= content %>
    </div>
    <div class="modal-footer">
        <%= footer %>
    </div>
</div>
 

// modal.js
import template from './modal.ejs'

export default function modal () {
  return {
    name: 'modal',
    template: template
  }
}

修改 main.js：

import Modal from './components/modal/modal'

const App = function () {
  let div = document.createElement('div')
  div.setAttribute('id', 'app')
  document.body.appendChild(div)
  let dom = document.getElementById('app')
  let modal = new Modal()
  dom.innerHTML = modal.template({
    title: '標題',
    content: '內容',
    footer: '底部'
  })
}

const app = new App()
 

 此時執行 npm run build 會報錯 ：

webpack 無法解析 .ejs 檔案，因此我們需要安裝對應的 loader：

npm i ejs-loader -D

 並修改 webpack.config.js 新增 module 屬性：

module: {
    rules: [
      {
        test: /\.ejs$/,
        use: ['ejs-loader']
      }
    ]
  }

再次執行 npm run build 就不會報錯了，開啟 dist/index.html ：

可以看到我們的 modal 元件已經成功渲染出來了。 

2. 處理專案中的CSS檔案

在 modal.css 中加入樣式程式碼：

.modal-parent{
    width: 500px;
    height: auto;
    border: 1px solid #ddd;
    border-radius: 10px;
}
.modal-title{
    font-size: 20px;
    text-align: center;
    padding: 10px;
    margin: 0;
}
.modal-body{
    border: 1px solid #ddd;
    border-left: 0;
    border-right: 0;
    padding: 10px;
}
.modal-footer{
    padding: 10px;
}

安裝 css-loader 和 style-loader：

npm i css-loader style-loader -D

 修改webpack.config.js 中的 module.rules ，新增css-loader 和 style-loader：

module: {
    rules: [
      {
        test: /\.ejs$/,
        use: ['ejs-loader']
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  },

在 modal.js 中引入 modal.css：

import './modal.css'

再次執行 npm run build ，開啟 dist/index.html：

CSS樣式已經通過 style 標籤新增到頁面上了；

3. 處理專案中的圖片 

在src目錄下建立 assets/img ，放入兩張圖片

給 modal 新增一個背景圖的樣式：

.modal-body{
    border: 1px solid #ddd;
    border-left: 0;
    border-right: 0;
    padding: 10px;
    background: url("../../assets/img/bg.jpg");
    color: #fff;
    height: 500px;
}

由於webpack無法處理圖片資源，所以也要安裝對應的 loader

npm install --save-dev url-loader file-loader

在 webpack.config.js 中新增 loader 

rules: [
      {
        test: /\.ejs$/,
        use: ['ejs-loader']
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.(jpg|jpeg|png|gif|svg)$/,
        use: 'url-loader'
      }
    ]

打包程式碼之後，在瀏覽器開啟 dist/index.html ，可見圖片已經顯示出來了：

仔細檢視這張圖片可以發現，它是通過 DataURL 加載出來的：

下面更改 url-loader 的配置，limit表示在檔案大小低於指定值時，返回一個DataURL

{
        test: /\.(jpg|jpeg|png|gif|svg)$/,
        use:  [
          {
            loader: 'url-loader',
            options: {
              name: '[name]-[hash:5].[ext]',
              limit: 1024
            }
          }
        ]
      }

再次打包後，圖片會以檔案形式展示出來：

                                                                                                                                         本人才疏學淺，不當之處歡迎批評指正。