今天写代码的时候,想使用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。