Bootrstap CSS可以工作，但不能用我自己的CSS，webpack-dev-server没问题

Question

因此，我最近开始使用webpack，虽然在使用webpack-dev-server时同样可以正常工作，但在准备将应用程序投入生产时，似乎无法沿侧面引导程序加载css文件。

  

这是生成的捆绑/最小化代码。

dist
├── assessments
│   ├── assessments.49c57a8e18e307fef8e3.css
│   ├── assessments.49c57a8e18e307fef8e3.css.map
│   ├── assessments.e688fcd85832e9959b1f.js
│   ├── assessments.e688fcd85832e9959b1f.js.map
│   └── assessments.html
├── dashboard
│   ├── dashboard.49c57a8e18e307fef8e3.css
│   ├── dashboard.49c57a8e18e307fef8e3.css.map
│   ├── dashboard.e3528b8b0abcafd7a449.js
│   ├── dashboard.e3528b8b0abcafd7a449.js.map
│   └── dashboard.html
├── images
│   ├── assessment.png
│   ├── c1.png
│   ├── c2.jpg
│   ├── c3.jpg
│   ├── d1.png
│   ├── d10.png
│   ├── d2.png
│   ├── d3.png
│   ├── d4.png
│   ├── d5.png
│   ├── d6.png
│   ├── d7.png
│   ├── d8.png
│   ├── d9.png
│   ├── ms_icon.png
│   └── splash_logo.jpg
├── login
│   ├── login.f7fc9c91a9fc5623f223.js
│   ├── login.f7fc9c91a9fc5623f223.js.map
│   └── login.html
├── node_modules
│   └── bootstrap
│       └── fonts
│           ├── glyphicons-halflings-regular.eot
│           ├── glyphicons-halflings-regular.svg
│           ├── glyphicons-halflings-regular.ttf
│           ├── glyphicons-halflings-regular.woff
│           └── glyphicons-halflings-regular.woff2
└── vendors
    ├── vendors.49c57a8e18e307fef8e3.css
    ├── vendors.49c57a8e18e307fef8e3.css.map
    ├── vendors.e253cf7740980782aac5.js
    └── vendors.e253cf7740980782aac5.js.map

  

src文件的目录结构，即 html / js / css 代码。我无法加载sitecommon/starsstyle.css。

src
.
├── api
│   ├── baseUrl.js
│   └── starsApi.js
├── assessments
│   ├── app.js
│   └── assessments.html
├── dashboard
│   ├── app.js
│   └── dashboard.html
├── images
│   ├── assessment.png
│   ├── c1.png
│   ├── c2.jpg
│   ├── c3.jpg
│   ├── d1.png
│   ├── d10.png
│   ├── d2.png
│   ├── d3.png
│   ├── d4.png
│   ├── d5.png
│   ├── d6.png
│   ├── d7.png
│   ├── d8.png
│   ├── d9.png
│   ├── ms_icon.png
│   └── splash_logo.jpg
├── login
│   ├── app.js
│   └── login.html
├── sitecommon
│   ├── site.js
│   └── starsstyle.css
└── vendors
    └── vendors.js

  

assessments \ app.js

import '../sitecommon/starsstyle.css'
import 'bootstrap-select/dist/css/bootstrap-select.min.css'
import 'bootstrap-select/dist/js/bootstrap-select.min.js'
import '../sitecommon/site.js'

  

dashboard \ app.js

import '../sitecommon/starsstyle.css'

  

login \ app.js

import '../sitecommon/site.js'

  

生产webpack文件。

const path = require('path')
const webpack = require('webpack')
const WebpackMd5Hash = require('webpack-md5-hash')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const StatsGraphPlugin = require('./StatsGraphPlugin');

module.exports = {
  mode: 'production',
  devtool: 'source-map',
  entry: {
    login: './src/login/app.js',
    dashboard: './src/dashboard/app.js',
    assessments: './src/assessments/app.js',
    vendors: './src/vendors/vendors.js'
  },
  target: 'web',
  output: {
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/',
    filename: '[name]/[name].[chunkhash].js'
  },
  plugins: [

    new CopyWebpackPlugin([
      {
        from: './src/images/',
        to: 'images/',
        force: true
      },
      {
        from: './node_modules/bootstrap/fonts/',
        to: 'node_modules/bootstrap/fonts/',
        force: true
      }
    ]),

    new MiniCssExtractPlugin({
      filename: '[name]/[name].[hash].css',
      chunkFilename: '[name]/[id].[hash].css'
    }),

    new WebpackMd5Hash(),

    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    }),

    new HtmlWebpackPlugin({
      filename: 'dashboard/dashboard.html',
      template: './src/dashboard/dashboard.html',
      minify:
      {
        removeComments: true,
        collapseWhitespace: true,
        removeRedundantAttributes: true,
        useShortDoctype: true,
        removeEmptyAttributes: true,
        removeStyleLinkTypeAttributes: true,
        keepClosingSlash: true,
        minifyJS: true,
        minifyCSS: true,
        minifyURLs: true
      },
      inject: true
    }),

    new HtmlWebpackPlugin({
      filename: 'assessments/assessments.html',
      template: './src/assessments/assessments.html',
      minify:
      {
        removeComments: true,
        collapseWhitespace: true,
        removeRedundantAttributes: true,
        useShortDoctype: true,
        removeEmptyAttributes: true,
        removeStyleLinkTypeAttributes: true,
        keepClosingSlash: true,
        minifyJS: true,
        minifyCSS: true,
        minifyURLs: true
      },
      inject: true
    }),

    new HtmlWebpackPlugin({
      filename: 'login/login.html',
      template: './src/login/login.html',
      minify:
      {
        removeComments: true,
        collapseWhitespace: true,
        removeRedundantAttributes: true,
        useShortDoctype: true,
        removeEmptyAttributes: true,
        removeStyleLinkTypeAttributes: true,
        keepClosingSlash: true,
        minifyJS: true,
        minifyCSS: true,
        minifyURLs: true
      },
      inject: true
    }),

    new StatsGraphPlugin()

  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, { loader: 'css-loader' }]
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2)$/,
        use: {
          loader: 'file-loader',
          options: {
            name: 'node_modules/bootstrap/fonts/[name].[ext]'
          }
        }
      },
      {
        test: /\.(png|jpg)$/,
        use: {
          loader: 'file-loader',
          options: {
            name: 'images/[name].[ext]'
          }
        }
      }
    ]
  }
}

  

starstyles.css

body
{
    margin-top: 70px;
}

.well {
    border-color: coral;
}