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
            }
          }
        ]
      }

再次打包后，图片会以文件情势展现出来：

​