• 1. 准备工作
  • 2. 安装 bootstrap-loader
  • 3. 使用
    • 3.1 创建 .bootstraprc 文件
    • 3.2 创建 webpack.bootstrap.config.js 文件
    • 3.3 引用 boostrap 的 webpack 配置
  • 4. 优化目录结构

    这节主要来实践如何加载和打包 Twitter Bootstrap 框架。

    1. 准备工作

    先来复制一些 bootstrap 的代码片断。

    src/index.html

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <title></title>
    6. </head>
    7. <body>
    8.   <button type="button" class="btn btn-default" aria-label="Left Align">
    9.     <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
    10.   </button>
    12.   <button type="button" class="btn btn-default btn-lg">
    13.     <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
    14.   </button>
    16.   <!-- Button trigger modal -->
    17.   <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
    18.     Launch demo modal
    19.   </button>
    21.   <!-- Modal -->
    22.   <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    23.     <div class="modal-dialog" role="document">
    24.       <div class="modal-content">
    25.         <div class="modal-header">
    26.           <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    27.           <h4 class="modal-title" id="myModalLabel">Modal title</h4>
    28.         </div>
    29.         <div class="modal-body">
    30.           ...
    31.         </div>
    32.         <div class="modal-footer">
    33.           <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    34.           <button type="button" class="btn btn-primary">Save changes</button>
    35.         </div>
    36.       </div>
    37.     </div>
    38.   </div>
    39. </body>
    40. </html>

    注意，本节使用的是 bootstrap 3，因为目前写这篇文章时，bootstrap 4 还没出正式版，所以我们用 bootstrap 3。

    效果如下：

    15. 加载和打包 Twitter Bootstrap 框架 - 图1

    图标没显示出来，css 也没加载到，js 更是不可用。

    2. 安装 bootstrap-loader

    要加载 bootstrap 框架，主要是使用这个这个 loader：bootstrap-loader。

    现在主要通过查看它的官方文档，来了解如何安装和使用它。

    安装。

    1. $ npm install bootstrap-loader --save-dev
    2. $ npm install resolve-url-loader url-loader --save-dev

    3. 使用

    接下来，我们来看如何使用 bootstrap-loader 这个 loader。

    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

    1. const bootstrapEntryPoints = require('./webpack.bootstrap.config')
    3. var bootstrapConfig = isProd ? bootstrapEntryPoints.prod : bootstrapEntryPoints.dev;
    5. module.exports = {
    6.   entry: {
    7.     "app.bundle": './src/app.js',
    8.     "contact": './src/contact.js',
    9.     "bootstrap": bootstrapConfig
    10.   },
    11.   ...
    12. }

    运行一下 npm run dev，发现报了个错。

    15. 加载和打包 Twitter Bootstrap 框架 - 图2

    字体文件没处理好。

    通过查看 bootstrap-loader 官方的 readme 文档，加上下面几行 loader 的配置，可解决问题。

    1. module: {
    2.   loaders: [
    3.     { test: /\.(woff2?|svg)$/, loader: 'url-loader?limit=10000' },
    4.     { test: /\.(ttf|eot)$/, loader: 'file-loader' },
    5.   ],
    6. },

    再次运行 npm run dev，发现下面的页面效果。

    15. 加载和打包 Twitter Bootstrap 框架 - 图3

    字体图标和 css 都没问题了，但是 js 没加载好，点击按钮没有弹出模态框。

    查看报错：

    15. 加载和打包 Twitter Bootstrap 框架 - 图4

    原来是 jquery 没加载到。

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

    1. { test:/bootstrap-sass[\/\\]assets[\/\\]javascripts[\/\\]/, loader: 'imports-loader?jQuery=jquery' },

    然后在终端上执行下面的命令：

    1. $ npm install --save-dev imports-loader jquery

    即可解决问题。

    效果：

    15. 加载和打包 Twitter Bootstrap 框架 - 图5

    点击按钮后，模态框弹出来了，good!

    4. 优化目录结构

    我们运行一下 npm run prod 命令，没啥问题，目录结构是下面这样的：

    1. dist
    2. ├── 448c34a56d699c29117adc64c43affeb.woff2
    3. ├── 89889688147bd7575d6327160d64e760.svg
    4. ├── app.bundle.f3ffd242134090bbd4b7.js
    5. ├── b86262bb1045a2b16a4d9fcf64afc1b1.svg
    6. ├── bootstrap.f3ffd242134090bbd4b7.js
    7. ├── contact.f3ffd242134090bbd4b7.js
    8. ├── contact.html
    9. ├── e18bbf611f2a2e43afc071aa2f4e1512.ttf
    10. ├── f4769f9bdb7466be65088239c12046d1.eot
    11. ├── fa2772327f55d8198301fdb8bcfc8158.woff
    12. ├── images
    13. │   ├── glyphicons-halflings-regular.svg
    14. │   └── money-bag.svg
    15. ├── index.html
    16. └── style.css

    比较乱，如果能把 css，js，字体文件分开成各个目录就蛮好的。

    我们来改一下配置：

    webpack.config.js

    1. // css 文件放到 css 目录中
    2. new ExtractTextPlugin({
    3.   filename: '[name].css',
    4.   disable: !isProd,
    5.   publicPath: 'css/'
    6. }),
    8. // 字体文件都放到 fonts 目录中
    9. { test: /\.(woff2?|svg)$/, loader: 'url-loader?limit=10000&name=[name].[ext]&outputPath=fonts/' },
    10. { test: /\.(ttf|eot)$/, loader: 'file-loader?name=[name].[ext]&outputPath=fonts/' },

    运行 npm run prod 之后，dist 的目录结构如下：

    1. dist
    2. ├── app.bundle.0cc9d9267f555d83ccb0.js
    3. ├── bootstrap.0cc9d9267f555d83ccb0.js
    4. ├── contact.0cc9d9267f555d83ccb0.js
    5. ├── contact.html
    6. ├── css
    7. │   ├── app.bundle.css
    8. │   └── bootstrap.css
    9. ├── fonts
    10. │   ├── glyphicons-halflings-regular.eot
    11. │   ├── glyphicons-halflings-regular.svg
    12. │   ├── glyphicons-halflings-regular.ttf
    13. │   ├── glyphicons-halflings-regular.woff
    14. │   ├── glyphicons-halflings-regular.woff2
    15. │   └── money-bag.svg
    16. ├── images
    17. │   ├── glyphicons-halflings-regular.svg
    18. │   └── money-bag.svg
    19. └── index.html

    这样目录结构就比刚才清晰多了。

    先说这么多吧。