webpack 2 css загрузка через запись, вызывающая проблему

Question

Я пытаюсь загрузить некоторый css, используя точку входа в webpack.config.js. Я использую ExtractTextPlugin но мне кажется, что я получаю мусор в извлеченном CSS файл

var path = require('path'); 
var CopyWebpackPlugin = require('copy-webpack-plugin'); 
var ExtractTextPlugin = require("extract-text-webpack-plugin"); 


var paths = { 
    // Source Directory Paths 
    nodeModules: './node_modules/', 
    scripts: 'Scripts/', 
    styles: 'Styles/', 
    tests: 'Tests/', 

    // Destination Directory Paths 
    wwwroot: './wwwroot/', 
    css: './css/', 
    fonts: './fonts/', 
    img: './img/', 
    js: './js/' 
}; 


// webpack.config.js 
module.exports = { 
    entry: { 
     'js/site.min.js': './assets/scripts/site.js', 
     'css/site.min.css': ['./assets/styles/site.css'] 
     //'css/bootstrap.min.css': './node_modules/bootstrap/dist/css/bootstrap.min.css'//, 
     //'css/bootstrap.min.css.map': './node_modules/bootstrap/dist/css/bootstrap.min.css.map' 
    }, 
    output: { 
     filename: '[name]', 
     path: './wwwroot/' 
    }, 
    devtool: "source-map", 
    module: { 
     rules: [ 
      { 
       test: /\.js$/, 
       exclude: [/node_modules/], 
       loader: 'babel-loader', 
       options: { 
        presets: [ 
         ['es2015', { modules: false }] 
        ] 
       } 
      },    
      { 
       test: /\.css$/, 
       loader: ExtractTextPlugin.extract({ 
        loader: 'css-loader?importLoaders=1&sourceMap', 
       }) 
      }, 
      { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" }, 
      { test: /\.(woff|woff2)$/, loader: "url?prefix=font/&limit=5000" }, 
      { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" }, 
      { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml" }, 
      { test: /\.png$/, loader: "url-loader?limit=100000" }, 
      { test: /\.jpg$/, loader: "file-loader" } 
     ] 
    }, 
    externals: { jquery: "jQuery" }, 
    plugins: [ 
     new CopyWebpackPlugin([ 
      { from: 'node_modules/bootstrap/dist/css/bootstrap.css', to: paths.css }, 
      { from: 'node_modules/bootstrap/dist/css/bootstrap.css.map', to: paths.css }, 
      { from: 'node_modules/bootstrap/dist/css/bootstrap.min.css', to: paths.css }, 
      { from: 'node_modules/bootstrap/dist/css/bootstrap.min.css.map', to: paths.css }, 
      { from: 'node_modules/jquery/dist/jquery.js', to: paths.js }, 
      { from: 'node_modules/jquery/dist/jquery.min.js', to: paths.js }, 
      { from: 'node_modules/jquery/dist/jquery.min.map', to: paths.js }, 
      { from: 'node_modules/bootstrap/dist/js/bootstrap.js', to: paths.js }, 
      { from: 'node_modules/bootstrap/dist/js/bootstrap.min.js', to: paths.js }, 
      { from: 'node_modules/bootstrap/dist/fonts', to: paths.fonts } 
     ]), 

     new ExtractTextPlugin({filename: paths.css + 'site.min.css', allChunks: true})   
    ] 
} 

но после этого производит:

body{padding-top:50px;padding-bottom:20px}.body-content{padding-left:15px;padding-right:15px}input,select,textarea{max-width:280px}.carousel-caption p{font-size:20px;line-height:1.4}.btn-bracketed:before{display:inline-block;content:"[";padding-right:.5em}.btn-bracketed:after{display:inline-block;content:"]";padding-left:.5em}.carousel-inner .item img[src$=".svg"]{width:100%}@media screen and (max-width:767px){.carousel-caption{display:none}}.validation-summary-errors h5{margin-top:0} 
/*# sourceMappingURL=site.min.css.map*/e, 
/******/   exports: {} 
/******/  }; 
/******/ 
/******/  // Execute the module function 
/******/  modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 
/******/ 
/******/  // Flag the module as loaded 
/******/  module.l = true; 
/******/ 
/******/  // Return the exports of the module 
/******/  return module.exports; 
/******/ } 
/******/ 
/******/ 
/******/ // expose the modules object (__webpack_modules__) 
/******/ __webpack_require__.m = modules; 
/******/ 
/******/ // expose the module cache 
/******/ __webpack_require__.c = installedModules; 
/******/ 
/******/ // identity function for calling harmony imports with the correct context 
/******/ __webpack_require__.i = function(value) { return value; }; 
/******/ 
/******/ // define getter function for harmony exports 
/******/ __webpack_require__.d = function(exports, name, getter) { 
/******/  if(!__webpack_require__.o(exports, name)) { 
/******/   Object.defineProperty(exports, name, { 
/******/    configurable: false, 
/******/    enumerable: true, 
/******/    get: getter 
/******/   }); 
/******/  } 
/******/ }; 
/******/ 
/******/ // getDefaultExport function for compatibility with non-harmony modules 
/******/ __webpack_require__.n = function(module) { 
/******/  var getter = module && module.__esModule ? 
/******/   function getDefault() { return module['default']; } : 
/******/   function getModuleExports() { return module; }; 
/******/  __webpack_require__.d(getter, 'a', getter); 
/******/  return getter; 
/******/ }; 
/******/ 
/******/ // Object.prototype.hasOwnProperty.call 
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; 
/******/ 
/******/ // __webpack_public_path__ 
/******/ __webpack_require__.p = ""; 
/******/ 
/******/ // Load entry module and return exports 
/******/ return __webpack_require__(__webpack_require__.s = 2); 
/******/ }) 
/************************************************************************/ 
/******/ ([ 
/* 0 */ 
/***/ (function(module, exports) { 

// removed by extract-text-webpack-plugin 

/***/ }), 
/* 1 */, 
/* 2 */ 
/***/ (function(module, exports, __webpack_require__) { 

module.exports = __webpack_require__(0); 


/***/ }) 
/******/ ]); 
/*# sourceMappingURL=site.min.css.map*/ 

Я не знаю, почему я получаю дополнительную информацию в моем .css файл

Если я использую следующие тогда все функции правильно

import styles from '../styles/site.css'; 

У кого-нибудь есть мысли по этому поводу?

UPDATE (ВОЗМОЖНО FIXED)

Похоже, ему не нравится мое имя точки входа, я изменил его на следующее и это похоже на работу:

'site': ['./assets/styles/site.css'] 

Answer 1

Я не» t думаю, что веб-пакет предназначен для использования с файлами css в качестве точек входа.

Вы, безусловно, не нуждаетесь в них, если используете текстовый плагин Extract. Текстовый плагин Extract собирает все файлы css, которые импортируются/требуются в ваших js-файлах и помещают их в отдельный файл css, с которым вы можете ссылаться в своем html.

В JS файл:

import './path/to/styles.css'; 

или

require('./path/to/styles.css');