我来帮你搞定这个问题！我们可以通过统一配置Webpack的loader规则来移除JS文件中的内联loader，同时梳理混乱的配置。以下是分步优化方案：

第一步：重构Webpack的Module Rules #

Webpack 3推荐使用module.rules来配置loader（而非混用loaders和rules），我们需要添加完整的SCSS和CSS处理链，同时整合Bootstrap的SCSS路径：

const webpack = require('webpack');
const path = require('path');
const envFile = require('node-env-file');
require('babel-polyfill');

process.env.NODE_ENV = process.env.NODE_ENV || 'development';
try {
  envFile(path.join(__dirname, 'config/' + process.env.NODE_ENV + '.env'))
} catch (e) { }

module.exports = {
  entry: [
    'script-loader!jquery/dist/jquery.min.js',
    'babel-polyfill',
    'whatwg-fetch',
    './app/app.jsx',
  ],
  externals: {
    jQuery: 'jQuery'
  },
  plugins: [
    new webpack.ProvidePlugin({
      '$': 'jQuery',
      'jQuery': 'jQuery',
      'window.jQuery': 'jquery',
      Popper: ['popper.js', 'default'],
    }),
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
    // 仅在生产环境启用Uglify（可选优化）
    ...(process.env.NODE_ENV === 'production' ? [
      new webpack.optimize.UglifyJsPlugin({ compressor: { warnings: false } })
    ] : []),
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify(process.env.NODE_ENV),
        API_KEY: JSON.stringify(process.env.API_KEY),
        API_DOMAIN: JSON.stringify(process.env.API_DOMAIN),
        API_FILE_DOMAIN: JSON.stringify(process.env.API_FILE_DOMAIN),
      }
    }),
  ],
  output: {
    path: path.join(__dirname, 'public'),
    filename: 'bundle.js',
    publicPath: '/'
  },
  resolve: {
    modules: [
      __dirname,
      'node_modules',
      './app/api',
      './app/constants',
    ],
    alias: {
      applicationStyles: 'app/styles/app.scss'
    },
    extensions: ['.js', '.jsx']
  },
  devServer: {
    contentBase: path.join(__dirname, 'public'), // 指定静态文件目录
    historyApiFallback: true, // 更简洁的SPA路由 fallback
    publicPath: '/'
  },
  module: {
    rules: [
      // JS/JSX处理
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        use: 'babel-loader'
      },
      // SCSS文件处理链：style-loader -> css-loader -> sass-loader
      {
        test: /\.scss$/,
        use: [
          'style-loader', // 将CSS注入到DOM
          'css-loader', // 解析CSS中的import和url
          {
            loader: 'sass-loader',
            options: {
              // 让Sass能找到Bootstrap的SCSS源文件
              includePaths: [path.resolve(__dirname, './node_modules/bootstrap/scss')]
            }
          }
        ]
      },
      // 纯CSS文件处理（比如react-table的css）
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  },
  devtool: process.env.NODE_ENV === 'production' ? undefined : 'eval-source-map'
};

这里做了几个关键优化： #

• 移除了旧的loaders配置，统一使用rules规范
• 给SCSS配置了完整的loader链：style-loader负责把样式注入DOM，css-loader解析CSS模块，sass-loader编译SCSS
• 为sass-loader添加了Bootstrap SCSS的路径，这样你在自己的SCSS里可以直接@import "bootstrap";
• 优化了UglifyJsPlugin的启用逻辑，只在生产环境压缩代码
• 修正了devServer的配置，添加contentBase指向静态文件目录，简化historyApiFallback

第二步：修改App.jsx中的导入语句 #

现在可以完全移除内联loader，直接导入样式文件：

import 'bootstrap'; // 加载Bootstrap的JS
import styles from 'applicationStyles'; // 加载自定义SCSS
import 'react-table/react-table.css'; // 加载第三方CSS

第三步：验证依赖是否齐全 #

确保你已经安装了所有需要的loader：

npm install --save-dev style-loader css-loader sass-loader node-sass

（node-sass是sass-loader的依赖，必须单独安装）

这样配置后，Webpack会自动处理所有.scss和.css文件，你再也不用在JS里写冗长的内联loader啦！

内容的提问来源于stack exchange，提问作者Blackstone4