如何在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。



阅读更多
换一批

没有更多推荐了,返回首页