Javascript ./node_modules/bootstrap loader/no-op.js中出错

我在我的应用程序中使用Webpack，我在其中创建了我的入口点 我试图在我的项目网页中使用sass css引导类型脚本作为资源来运行index.ts，但我遇到了这些错误，（引导加载程序）：

./node_modules/bootstrap loader/no-op.js中出错 （./node_modules/bootstrap loader/lib/bootstrap.scripts.loader.js？{“bootstrapVersion”：3，“UseCustomiconntpath”：false，“extractStyles”：false，“styleLoaders”：[“样式加载器”、“css加载器”、“sass加载器”]，“样式”：[“混合”、“规范化”、“打印”、“字形图标”、“符号化” cafolding、type、code、grid、tables、forms、button、component animation、dropdowns、button group、input group、navs、navbar、breadcrumbs、pagination、pager、labels、badges、jumbotron、thumbnails、alerts、progress bar、media、list group、panels、wells、responsive embed、close、modals、tooltip、povers、carousel，“实用程序”，“响应实用程序”]，“脚本”：[“转换”，“警报”，“按钮”，“旋转木马”，“折叠”，“下拉”，“模态”，“工具提示”，“弹出窗口”，“滚动间谍”，“选项卡”，“粘贴”]，“配置文件路径”：“/projects/bootstrapwebpack/node_模块/bootstrap加载程序/.bootstraprc-3-default”，“引导路径”：“/projects/bootstrapwebpack/node_模块/bootstrap sass”，“bootstrapPrelPath”：“./bootstrap sass”}！。/node_modules/bootstrap loader/no-op.js）

在我的config.js中，我有：

const path = require('path');
const webpack = require('webpack');
module.exports = {
entry:  [ 'bootstrap-loader', './src/index.ts',],
module: {
  rules:[
    {
      test: /\.css$/,
       use: [
        'style-loader',
        'css-loader'
            ],
    },
    {
      test: /\.js$/,
            exclude: /(node_modules|bower_components)/,
            use: {
            loader: 'babel-loader',
            options: {
              presets: ['env']
              }
            }
      },
      {
        test: /\.(gif|png|jpe?g|svg)$/i,
        use: [
         'file-loader',
          {
            loader: 'image-webpack-loader',
            options: {
            },
          },
        ],
      },
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      },
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
        exclude: /node_modules/
      },
      // Boooootstrap
      { 
        test: /bootstrap-sass\/assets\/javascripts\//, 
        loader: 'imports-loader?jQuery=jquery' 
      },
      { 
        test: /\.(woff2?|svg)$/, loader: 'url-loader?limit=10000' 
      },
      { 
        test: /\.(ttf|eot)$/, loader: 'file-loader' 
      },
    ],
    }, 
output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
    }
};

{
  "name": "test",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "dev": "webpack --mode development --watch ",
    "build": "webpack --progress -p --watch "
  },
  "dependencies": {
    "autoprefixer": "^9.0.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "bootstrap": "^4.1.2",
    "bootstrap-loader": "^3.0.0",
    "bootstrap-sass": "^3.3.7",
    "css-loader": "^1.0.0",
    "exports-loader": "^0.7.0",
    "file-loader": "^1.1.11",
    "image-webpack-loader": "^4.3.1",
    "jquery": "^3.3.1",
    "mini-css-extract-plugin": "^0.4.1",
    "node-sass": "^4.9.2",
    "popper.js": "^1.14.3",
    "postcss-loader": "^2.1.6",
    "resolve-url-loader": "^2.3.0",
    "sass-loader": "^7.0.3",
    "style-loader": "^0.21.0",
    "ts-loader": "^4.4.2",
    "typescript": "^2.9.2",
    "url-loader": "^1.0.1",
    "webpack": "^4.16.0",
    "webpack-cli": "^3.0.8"
  }
}

目前我正试图在我的package.json中使用以下几行：

const path = require('path');
const webpack = require('webpack');
module.exports = {
entry:  [ 'bootstrap-loader', './src/index.ts',],
module: {
  rules:[
    {
      test: /\.css$/,
       use: [
        'style-loader',
        'css-loader'
            ],
    },
    {
      test: /\.js$/,
            exclude: /(node_modules|bower_components)/,
            use: {
            loader: 'babel-loader',
            options: {
              presets: ['env']
              }
            }
      },
      {
        test: /\.(gif|png|jpe?g|svg)$/i,
        use: [
         'file-loader',
          {
            loader: 'image-webpack-loader',
            options: {
            },
          },
        ],
      },
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      },
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
        exclude: /node_modules/
      },
      // Boooootstrap
      { 
        test: /bootstrap-sass\/assets\/javascripts\//, 
        loader: 'imports-loader?jQuery=jquery' 
      },
      { 
        test: /\.(woff2?|svg)$/, loader: 'url-loader?limit=10000' 
      },
      { 
        test: /\.(ttf|eot)$/, loader: 'file-loader' 
      },
    ],
    }, 
output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
    }
};

{
  "name": "test",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "dev": "webpack --mode development --watch ",
    "build": "webpack --progress -p --watch "
  },
  "dependencies": {
    "autoprefixer": "^9.0.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "bootstrap": "^4.1.2",
    "bootstrap-loader": "^3.0.0",
    "bootstrap-sass": "^3.3.7",
    "css-loader": "^1.0.0",
    "exports-loader": "^0.7.0",
    "file-loader": "^1.1.11",
    "image-webpack-loader": "^4.3.1",
    "jquery": "^3.3.1",
    "mini-css-extract-plugin": "^0.4.1",
    "node-sass": "^4.9.2",
    "popper.js": "^1.14.3",
    "postcss-loader": "^2.1.6",
    "resolve-url-loader": "^2.3.0",
    "sass-loader": "^7.0.3",
    "style-loader": "^0.21.0",
    "ts-loader": "^4.4.2",
    "typescript": "^2.9.2",
    "url-loader": "^1.0.1",
    "webpack": "^4.16.0",
    "webpack-cli": "^3.0.8"
  }
}

---

我昨天也有同样的问题。 尝试添加

/src/index.ts

   require 'bootstrap/dist/css/bootstrap.min.css';
   require 'bootstrap/dist/js/bootstrap.min.js';

---

为什么你把“引导加载程序”放在你的主条目之前？我试图把我的主条目放在“引导加载程序”之前，但是没有发生任何事情！！为什么你的依赖项中有postcss加载程序？你从来没有使用过它我有postcss，因为我使用的是sass加载程序，但是在我更改了它并删除了sass文件之后，我忘了将它从依赖项中删除ndencies:）。是的，它对我有效，但我必须使用require not import，因为我的主要条目是Index.ts而不是.js（y）。@HafidBensmail这毫无意义。如果手动导入文件，那么加载程序的用途是什么？