我试图在
angular 2 project中使用
bootstrap-loader.Webpack编译输出错误：
ERROR in ./~/bootstrap-webpack/index.js Module not found: Error: Can't resolve './bootstrap-styles' in 'd:\web\angular2-webpack-starter\node_modules\bootstrap-webpack' @ ./~/bootstrap-webpack/index.js 1:0-66 @ ./src/vendor.browser.ts @ multi vendor ERROR in ./~/bootstrap-webpack/index.js Module not found: Error: Can't resolve './bootstrap-scripts' in 'd:\web\angular2-webpack-starter\node_modules\bootstrap-webpack' @ ./~/bootstrap-webpack/index.js 2:0-52 @ ./src/vendor.browser.ts @ multi vendor
重现步骤：
>克隆https://github.com/AngularClass/angular2-webpack-starter
> npm安装
> npm install bootstrap-webpack –save
> npm install less-loader less –save-dev
> add line：require(“bootstrap-webpack”);到src / vendor.browser.ts
>从bootstrap-webpack文档中添加一些规则到config / webpack.common.js：
> npm开始
bootstrap-webpack documentation的规则：
// bootstrap-webpack has access to the jQuery object
{ test: /bootstrap\/js\//,loader: 'imports?jQuery=jquery' },// Needed for the css-loader when [bootstrap-webpack](https://github.com/bline/bootstrap-webpack)
// loads bootstrap's css.
{ test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,loader: "url?limit=10000&mimetype=application/font-woff" },{ test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,loader: "url?limit=10000&mimetype=application/octet-stream" },{ test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,loader: "file" },{ test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,loader: "url?limit=10000&mimetype=image/svg+xml" }
解决方法
我得到它的工作,不得不安装几个加载器(bootstrap-webpack似乎并不依赖于它们),因为url-loader和文件加载器必须在这里安装确切的版本并且必须使用webpack 1(其中一个包)取决于它)：
//packages.json
{
"dependencies": {
"bootstrap-webpack": "^0.0.5","jquery": "^3.1.1",},"main": "js/entry.js","devDependencies": {
"babel-core": "^6.22.1","babel-loader": "^6.2.10","babel-preset-es2015": "^6.22.0","bootstrap": "^3.3.7","css-loader": "^0.26.1","exports-loader": "^0.6.3","extract-text-webpack-plugin": "^1.0.1","file-loader": "0.8.1","imports-loader": "^0.7.0","less": "^2.7.2","less-loader": "^2.2.3","style-loader": "^0.13.1","url-loader": "0.5.5","webpack": "1"
}
}
// webpack.config.js
module: {
loaders: [
{test: /\.jsx?$/,loader: 'babel-loader',exclude: /(node_modules|bower_components)/,query: {presets: ['es2015']}},{test: /\.css$/,loader: 'css-loader'},{test: /\.(woff|woff2)$/,loader: 'url-loader?limit=10000'},{test: /\.ttf$/,loader: 'file-loader'},{test: /\.eot$/,{test: /\.svg$/,loader: 'file-loader'}
]
}
然后添加require(“bootstrap-webpack”);并运行webpack,不知何故,它的工作原理！
