Question

我很难让webpack在这里做我想做的事。基本上，我正在尝试输入两个CSS文件和一个SCSS文件，并从中输出一个CSS文件。

到目前为止我的代码是：

'use strict';

var webpack = require('webpack');

var webpackDir = __dirname;

let path = require('path');
let nodeModulesPath = path.join(webpackDir, 'node_modules');

//Process the SCSS
var ExtractTextPlugin = require('extract-text-webpack-plugin');
let extractCSS = new ExtractTextPlugin('../css/[name].css',{allChunks: true});

function isDev() {

    var isDev = true;

    if (process.env.NODE_ENV === 'production') {

        isDev = false;
    }

    return isDev;
}

var definePlugin = new webpack.DefinePlugin({
    __DEV__: isDev()
});

module.exports = {
    resolve: {
        modulesDirectories: [webpackDir + '/node_modules'],
        alias: {
            rootReducers: path.join(webpackDir, '../../../../../themes/myProject-base/lib/myProject-core/register/myProject-redux-base/base-reducers'),
            rootActions: path.join(webpackDir, '../../../../../themes/myProject-base/lib/myProject-core/register/myProject-redux-base/base-actions'),
            rootUtils: path.join(webpackDir, '../../../../../themes/myProject-base/lib/myProject-core/register/myProject-redux-base/base-utils'),
            lunchMenusReducers: path.join(webpackDir, '/src/lunch-menus-common-js/reducers/lunch-menus-reducers'),
            lunchMenusActions: path.join(webpackDir, '/src/lunch-menus-common-js/actions/lunch-menus-actions'),
            lunchMenusConfigureStore: path.join(webpackDir, '/src/lunch-menus-common-js/configureStore')
        }
    },
    resolveLoader: {
        root: nodeModulesPath
    },
    entry: {
        backend: path.resolve(webpackDir + '/src/components/index.js'),
        widgetfrontend: path.join(webpackDir, '../../../includes/widget/public-js/scripts/main.js'),
        widgetbackend: path.join(webpackDir, '../../../includes/widget/js/scripts/main.js'),
        myProjectLunchMenusAdmin: [
            path.join(webpackDir, '../../scss/myProject-lunch-menus-admin.scss'),
            path.join(nodeModulesPath + 'react-datepicker/dist/react-datepicker.min.css'),
            path.join(nodeModulesPath + 'node_modules/quill/dist/*.css')
        ]
    },
    output: {
        path: path.resolve(webpackDir + '/../'),
        filename: '[name].js',
        devtoolLineToLine: true
    },
    plugins: isDev() !== true ? [
        extractCSS,
        new webpack.optimize.UglifyJsPlugin({minimize: true}),
        definePlugin
    ] : [
        extractCSS,
        definePlugin
    ],
    module: {
        loaders: [
            {
                test: /(src|myProject-base|widget)\/.+.jsx?$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: [
                        require.resolve('babel-preset-es2015'),
                        require.resolve('babel-preset-react'),
                        require.resolve('babel-preset-stage-0')
                    ]
                }
            },
            {
                test: /\.scss$/i,
                loader: extractCSS.extract(['css','sass'])
            },
            {
                test: /\.jpe?g$|\.gif$|\.png$|\.svg$|\.woff$|\.ttf$/,
                exclude: /node_modules/,
                loader: 'file'
            }
        ]
    }
}

焦点区域是myProjectLunchMenusAdmin - 因为它没有接收CSS + SCSS文件并输出一个CSS文件。

我得到的错误是：

ERROR in multi myProjectLunchMenusAdmin
Module not found: Error: Cannot resolve 'file' or 'directory' /Users/joneslloyd/Documents/MAMP/myProjectv2/wp-content/plugins/myProject-lunch-menus/admin/js/scripts/node_modules/node_modules/quill/dist/*.css in /Users/joneslloyd/Documents/MAMP/myProjectv2/wp-content/plugins/myProject-lunch-menus/admin/js/scripts
 @ multi myProjectLunchMenusAdmin

ERROR in ./~/react-datepicker/dist/react-datepicker.min.css
Module parse failed: /Users/joneslloyd/Documents/MAMP/myProjectv2/wp-content/plugins/myProject-lunch-menus/admin/js/scripts/node_modules/react-datepicker/dist/react-datepicker.min.css Line 1: Unexpected token .
You may need an appropriate loader to handle this file type.

在这个阶段，即使指针/建议也非常有用！

Answer 1

此配置存在几个问题。

modulesDirectories应该是一个目录 names 的数组，它将像node_modules一样被解析（即：遍历目录树并查找{{1}文件夹）。 不要在此数组中放置实际路径。这是我在webpack配置中看到的最常见的错误之一。由于npm是最突出的包管理器，因此您通常不需要设置此选项，因为它已默认为node_modules。
指定的块node_modules引用CSS文件，但您没有激活myProjectLunchMenusAdmin扩展名的css-loader。这基本上是.css错误试图说的。
命名块Module parse failed引用glob模式myProjectLunchMenusAdmin。 Webpack不了解glob模式。在您的情况下，它会尝试包含一个实际名为node_modules/quill/dist/*.css的文件，这是*.css错误试图告诉的内容。您只需要传递webpack一个文件，webpack就会找出依赖图。例如：如果文件Module not found导入main.css，它也会包含该文件，依此类推。通过这样做，webpack将只包含实际需要的文件，因为它们在您的程序中被引用。（顺便说一句：some-other-file.css看起来不正确）
使用node_modules/node_modules的第一个参数的相对路径可能无效。我不知道这是否真的有效。您应该只提供一个文件名，webpack会将提取的统一CSS发送到指定ExtractTextPlugin中具有该名称的文件中。 output.path通常是没有子目录的平面文件夹。如果您之后需要移动捆绑的文件，则应将其与webpack构建分开。这只是另一个构建步骤。
output.path不需要修改，只要你通过npm安装你的装载机（我强烈推荐）。

我试图修复给定的配置。由于我不了解您的项目，因此无法保证这将有效。

resolveLoader.root

Webpack将两个CSS文件和一个SCSS文件连接成一个CSS文件

1 个答案: