angular – Webpack bootstrap-loader错误：无法解析’./bootstr

发布时间：2020-12-17 17:17:30 所属栏目：安全来源：网络整理

导读：我试图在 angular 2 project中使用 bootstrap-loader.Webpack编译输出错误： ERROR in ./~/bootstrap-webpack/index.jsModule not found: Error: Can't resolve './bootstrap-styles' in 'd:webangular2-webpack-starternode_modulesbootstrap-webpack'

我试图在 angular 2 project中使用 bootstrap-loader.Webpack编译输出错误：

ERROR in ./~/bootstrap-webpack/index.js
Module not found: Error: Can't resolve './bootstrap-styles' in 'd:webangular2-webpack-starternode_modulesbootstrap-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:webangular2-webpack-starternode_modulesbootstrap-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,不知何故,它的工作原理！

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!