打包器 | Webpack

学习如何使用 Webpack 2 在您的项目中引入 Bootstrap。

安装 Bootstrap

安装引导作为一个使用NPM的Node.js模块。

导入JavaScript

进口引导JavaScript通常将这一行添加到应用程序的入口点%28index.js或app.js29%：

import 'bootstrap';

或者，你可以单独导入插件视需要：

import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/dropdown';
...

Bootstrap 依赖于 jQuery 和 Popper，如果有需要的话，您可以使用 NPM 安装它们。但它们必须在 WebPack 中明确依赖关系。将下列代码添加到您的 webpack 配置文件中的plugins模块：

  plugins: [
    ...
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery',
        Popper: ['popper.js', 'default'],
        // In case you imported plugins individually, you must also require them here:
        Util: "exports-loader?Util!bootstrap/js/dist/util",
        Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown",
        ...
      })
    ...
  ]

注意如果你选择单独导入插件，您还必须安装出口-装载机

进口样式

导入预编译SASS

要充分发挥Bootstrap的潜力并根据您的需要定制它，请使用源文件作为项目捆绑过程的一部分。

首先，创建自己的_custom.scss并使用它覆盖内置自定义变量然后，使用主Sass文件导入自定义变量，然后是Bootstrap：

@import "custom";
@import "~bootstrap/scss/bootstrap";

要编译Bootstrap，请确保安装和使用所需的加载器：Sass-装载机，，，后置装载机带着自动复位器.在设置最少的情况下，您的WebPack配置应该包括此规则或类似的内容：

  ...
  {
    test: /\.(scss)$/,
    use: [{
      loader: 'style-loader', // inject CSS to page
    }, {
      loader: 'css-loader', // translates CSS into CommonJS modules
    }, {
      loader: 'postcss-loader', // Run post css actions
      options: {
        plugins: function () { // post css plugins, can be exported to postcss.config.js
          return [
            require('precss'),
            require('autoprefixer')
          ];
        }
      }
    }, {
      loader: 'sass-loader' // compiles SASS to CSS
    }]
  },
  ...

导入编译后的CSS

或者，您也可以通过简单地将这一行添加到项目的入口点来使用Bootstrap的现成的css：

import 'bootstrap/dist/css/bootstrap.min.css';

在这种情况下，您可以使用现有的规则css没有任何特殊的修改WebPack配置。