webpack 2 css 通过条目加载导致问题 [英] webpack 2 css loading through entry causing issue

问题描述

我正在尝试使用 webpack.config.js 中的入口点加载一些 css.我正在使用 ExtractTextPlugin 但似乎我在提取的 css 文件中得到了垃圾

I'm trying to load some css using the entry point in webpack.config.js. I'm using the ExtractTextPlugin but it seems that I get junk in the extracted css file

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 文件中得到了额外的信息

I'm not sure why I'm getting the extra information in my .css file

如果我使用以下内容，则一切正常

If I use the following then everything functions correctly

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

有人对此有任何想法吗?

Does anyone have any thoughts on this?

更新(可能已修复)

看起来不像我的入口点名称，我将其更改为以下内容，它似乎有效:

Looks like it doesn't like my entry point name, I changed it to to the following and it seems to work:

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

推荐答案

我不认为 webpack 旨在与 css 文件一起用作入口点.

I don't think webpack is meant to be used with css files as entry points.

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

You definitely don't need them if you are using the Extract Text Plugin. The Extract Text Plugin will gather all the css files that are imported/required in your js files and put them in a separate css file that you can link to in your html.

在一个js文件中:

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

或

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

这篇关于webpack 2 css 通过条目加载导致问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！