webpack 3 零基礎入門教程 #15 - 加載和打包 Twitter Bootstrap 框架

時間 2019-11-16

標籤 webpack 零基礎入門教程加載打包 bootstrap 框架欄目 Bootstarp 简体版

原文原文鏈接

這節主要來實踐如何加載和打包 Twitter Bootstrap 框架。javascript

1. 準備工做

先來複制一些 bootstrap 的代碼片段。css

src/index.htmlhtml

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <button type="button" class="btn btn-default" aria-label="Left Align">
    <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
  </button>

  <button type="button" class="btn btn-default btn-lg">
    <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
  </button>

  <!-- Button trigger modal -->
  <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
    Launch demo modal
  </button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="myModalLabel">Modal title</h4>
        </div>
        <div class="modal-body">
          ...
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
複製代碼

注意，本節使用的是 bootstrap 3，由於目前寫這篇文章時，bootstrap 4 還沒出正式版，因此咱們用 bootstrap 3。java

效果以下：jquery

圖標沒顯示出來，css 也沒加載到，js 更是不可用。webpack

2. 安裝 bootstrap-loader

要加載 bootstrap 框架，主要是使用這個這個 loader：bootstrap-loader。git

如今主要經過查看它的官方文檔，來了解如何安裝和使用它。github

安裝。web

$ npm install bootstrap-loader --save-dev
$ npm install resolve-url-loader url-loader --save-dev
複製代碼

3. 使用

接下來，咱們來看如何使用 bootstrap-loader 這個 loader。npm

3.1 建立 .bootstraprc 文件

在項目根目錄下，建立 .bootstraprc 文件，其內容拷貝於下面這個連接的內容。

.bootstraprc-3-default

這個內容是官方提供的，主要存放的是 bootstrap 的配置選項，就是經過它來控制一些 bootstrap 的功能。

3.2 建立 webpack.bootstrap.config.js 文件

而後在項目根目錄下，建立 webpack.bootstrap.config.js 文件，其內容拷貝於下面這個連接的內容。

webpack.bootstrap.config.js

這個內容是官方提供的，主要存放的是關於 bootstrap 的 webpack 配置的內容，它包含生產環境和開發環境的配置。

3.3 引用 boostrap 的 webpack 配置

如今咱們把剛纔下載的 webpack.bootstrap.config.js 文件利用起來。

webpack.config.js

const bootstrapEntryPoints = require('./webpack.bootstrap.config')

var bootstrapConfig = isProd ? bootstrapEntryPoints.prod : bootstrapEntryPoints.dev;

module.exports = {
  entry: {
    "app.bundle": './src/app.js',
    "contact": './src/contact.js',
    "bootstrap": bootstrapConfig
  },
  ...
}
複製代碼

運行一下 npm run dev，發現報了個錯。

字體文件沒處理好。

經過查看 bootstrap-loader 官方的 readme 文檔，加上下面幾行 loader 的配置，可解決問題。

module: {
  loaders: [
    { test: /\.(woff2?|svg)$/, loader: 'url-loader?limit=10000' },
    { test: /\.(ttf|eot)$/, loader: 'file-loader' },
  ],
},
複製代碼

再次運行 npm run dev，發現下面的頁面效果。

字體圖標和 css 都沒問題了，可是 js 沒加載好，點擊按鈕沒有彈出模態框。

查看報錯：

原來是 jquery 沒加載到。

在 webpack.config.js 配置文件的 loader 部分加上下面這行：

{ test:/bootstrap-sass[\/\\]assets[\/\\]javascripts[\/\\]/, loader: 'imports-loader?jQuery=jquery' },
複製代碼

而後在終端上執行下面的命令：

$ npm install --save-dev imports-loader jquery
複製代碼

便可解決問題。

效果：

點擊按鈕後，模態框彈出來了，good!

4. 優化目錄結構

咱們運行一下 npm run prod 命令，沒啥問題，目錄結構是下面這樣的：

dist
├── 448c34a56d699c29117adc64c43affeb.woff2
├── 89889688147bd7575d6327160d64e760.svg
├── app.bundle.f3ffd242134090bbd4b7.js
├── b86262bb1045a2b16a4d9fcf64afc1b1.svg
├── bootstrap.f3ffd242134090bbd4b7.js
├── contact.f3ffd242134090bbd4b7.js
├── contact.html
├── e18bbf611f2a2e43afc071aa2f4e1512.ttf
├── f4769f9bdb7466be65088239c12046d1.eot
├── fa2772327f55d8198301fdb8bcfc8158.woff
├── images
│   ├── glyphicons-halflings-regular.svg
│   └── money-bag.svg
├── index.html
└── style.css
複製代碼

比較亂，若是能把 css，js，字體文件分開成各個目錄就蠻好的。

咱們來改一下配置：

webpack.config.js

// css 文件放到 css 目錄中
new ExtractTextPlugin({
  filename: '[name].css',
  disable: !isProd,
  publicPath: 'css/'
}),

// 字體文件都放到 fonts 目錄中
{ test: /\.(woff2?|svg)$/, loader: 'url-loader?limit=10000&name=[name].[ext]&outputPath=fonts/' },
{ test: /\.(ttf|eot)$/, loader: 'file-loader?name=[name].[ext]&outputPath=fonts/' },
複製代碼

運行 npm run prod 以後，dist 的目錄結構以下：

dist
├── app.bundle.0cc9d9267f555d83ccb0.js
├── bootstrap.0cc9d9267f555d83ccb0.js
├── contact.0cc9d9267f555d83ccb0.js
├── contact.html
├── css
│   ├── app.bundle.css
│   └── bootstrap.css
├── fonts
│   ├── glyphicons-halflings-regular.eot
│   ├── glyphicons-halflings-regular.svg
│   ├── glyphicons-halflings-regular.ttf
│   ├── glyphicons-halflings-regular.woff
│   ├── glyphicons-halflings-regular.woff2
│   └── money-bag.svg
├── images
│   ├── glyphicons-halflings-regular.svg
│   └── money-bag.svg
└── index.html
複製代碼

這樣目錄結構就比剛纔清晰多了。

先說這麼多吧。