如何在webpack中引入jquery和bootstrap

今天写代码的时候，想使用bootstrap的样式，我首先用npm install bootstrap，然后在首页中引入import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

但是发现这样是不行的，会报错找不到这个MODULE，查资料得知我需要安装css-loader和style-loader，用于把css转换成文件。

能够把资源文件像模块一样管理，这就是webpack的强大之处，虽然也有点麻烦。。

安装上述两个loader，之后在webpack.config.js中loaders字段加上    

  {
        test: /\.css$/,
        loaders: ['style','css']
      },

      { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,  loader: "file" },
      { test: /\.(woff|woff2)$/, loader:"url?prefix=font/&limit=5000" },
      { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" },
      { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml" }

所有的CSS文件用这两个LOADER加载。css中带的一些字体图标等需要用file-loader处理一下，配置文件中也要加上。

至此，就可以在项目中用BOOTSTRAP的样式了。

但是我发现我如果直接引入bootstrap，像import 'bootstrap'这样，里面的样式还是没法用的，很奇怪，求指导。

下面引入一下Jquery,还是先npm install juery

然后在webpack.config.js中的PLUGINS加上

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

这样就可以给全局增加$和jQuery。