webpack 2 css 通过条目加载导致问题

Posted 2023-03-13

【中文标题】webpack 2 css 通过条目加载导致问题

【英文标题】：webpack 2 css loading through entry causing issue

【发布时间】：2017-06-20 11:22:03

【问题描述】：

我正在尝试使用 webpack.config.js 中的入口点加载一些 CSS。我正在使用 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)        
    ]

但以下会产生这个：

bodypadding-top:50px;padding-bottom:20px.body-contentpadding-left:15px;padding-right:15pxinput,select,textareamax-width:280px.carousel-caption pfont-size:20px;line-height:1.4.btn-bracketed:beforedisplay:inline-block;content:"[";padding-right:.5em.btn-bracketed:afterdisplay:inline-block;content:"]";padding-left:.5em.carousel-inner .item img[src$=".svg"]width:100%@media screen and (max-width:767px).carousel-captiondisplay:none.validation-summary-errors h5margin-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';

有人对此有什么想法吗？

更新（可能已修复）

看起来它不喜欢我的入口点名称，我将其更改为以下名称，它似乎可以工作：

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

【参考方案1】：

我不认为 webpack 打算将 css 文件用作入口点。

如果您使用的是提取文本插件，则绝对不需要它们。提取文本插件将收集所有在您的 js 文件中导入/需要的 css 文件，并将它们放在一个单独的 css 文件中，您可以在 html 中链接到该文件。

在一个js文件中：

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

或

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

【讨论】：

哦，是的，我也可以这样做，但我想看看如何在不必将它们导入我的 js 文件中的情况下做到这一点