Question

我尝试使用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})        
    ]
}

但是以下产生了这个：

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';

有没有人对此有任何想法？

更新（可能已修订）

看起来它不喜欢我的入口点名称，我将其更改为以下内容并且似乎有效：

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

Answer 1

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

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

在js文件中：

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

或

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

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

1 个答案: