==很久之前，刚接触node与npm的时候，就梦想着什么时候能用它来导入依赖库，由于之前也是实践经验比较少，所以这一块比较少地进行总结，今天按照webpack官方文档，实现了webpack导入bootstrap@4.0.0 beta2==

梳理思路

首先，我们要知道bootstrap具体需要哪些文件，以及这些文件的依赖关系

  • 样式文件：bootstrap.css
  • 依赖文件：jquery（4.0.0版本加入了popper）
  • JS集成插件：bootstrap.js

    开始操作

    第一步，bootstrap.css很好导入，只要在entry内直接
1
import 'bootstrap/dist/css/bootstrap.css'

在webpack.config.js内配置 css-loader和 style-loader

1
2
3
4
5
6
7
8
9
rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]

第二步，导入依赖库

webpack很人性化地提供了ProvidePlugin插件，用法如下：

1
2
3
4
5
6
7
8
9
10
11
new webpack.ProvidePlugin({
  identifier: 'module1',
  // ...
})

like this

new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
})

webpack官方解释:
任何时候，当 identifier 被当作未赋值的变量时，module 就会自动被加载，并且 identifier 会被这个 module 输出的内容所赋值。（模块的 property 用于支持命名导出(named export)）。
就是你可以在任何地方都使用定义好的标识符$和jQuery.
有点像是requirejs里的shim用法，后者还是需要自定义好shim的依赖，相比之下webpack还是更加人性化的。
这里popper插件我使用npm install然后写在webpack中没有作用，看了bootstrap的GitHub issue后官方人员推荐使用dist/js/bootstrap.bundle.js文件，因为4.0以上的bundle已经将popper集成进去。

第三步，引入bootstrap.bundle.js

entry文件中

1
import 'bootstrap/dist/js/bootstrap.bundle.js'

webpack

PS：这里不知道为什么bootstrap不把jquery库集成进来，不然的话让用户每次都要先导入jquery。bootstrap的集成JS插件其实也是jquery的extend插件，实在是搞不明白为什么不集成jquery进来…