Webpack 引入Bootstrap 3的方法

依赖的引入：

cnpm i -D webpack webpack-cli
cnpm i -D file-loader url-loader style-loader css-loader expose-loader
cnpm i -S bootstrap@3 jquery@3

附上package.json 依赖片段

  "dependencies": {
    "bootstrap": "^3.4.1",
    "jquery": "^3.4.0"
  },
  "devDependencies": {
    "css-loader": "^2.1.1",
    "expose-loader": "^0.7.5",
    "file-loader": "^3.0.1",
    "style-loader": "^0.23.1",
    "url-loader": "^1.1.2",
    "webpack": "^4.30.0",
    "webpack-cli": "^3.3.0"
  }

webpack.config.js文件的配置如下：

const path = require('path')
module.exports={
    mode:'development',
    entry:'./src/index.js',
    output:{
        filename: 'bundle.js',
        path:path.resolve(__dirname,'dist')
    },
    module:{
        rules:[
        {test:/\.css$/,use:['style-loader','css-loader']},
        {
            test: /\.(png|svg|jpg|jpeg|gif)$/,
            loader: 'url-loader',
            options: {
                limit: 12000
            }
        },
        {test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, use: ['url-loader']},
        {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, use: ['url-loader']},
        {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, use: ['url-loader']},
        {
            test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
            use: ['url-loader']
        }
    ]}
}

入口文件/src/index.js

import 'expose-loader?$!jquery'
import 'expose-loader?jQuery!jquery'
import 'bootstrap/dist/js/bootstrap.js'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap/dist/css/bootstrap-theme.css'

入口网页 /dist/index.html

  
    test