Webpack 將兩個 CSS 文件和一個 SCSS 文件連接成一個 CSS 文件

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應該是將像node_modules一樣解析的目錄名稱數組（即：遍歷目錄樹並查找node_modules文件夾）。 不要將實際路徑放入此數組中。 這是我在 webpack 配置中看到的最常見的錯誤之一。 由於 npm 是最突出的包管理器，您通常不需要設置此選項，因為它已經默認為node_modules 。

• 命名塊myProjectLunchMenusAdmin引用了 CSS 文件，但您沒有為.css擴展名激活 css-loader。 這基本上就是Module parse failed錯誤想要表達的意思。

• 命名塊myProjectLunchMenusAdmin引用 glob 模式node_modules/quill/dist/*.css 。 Webpack 不理解 glob 模式。 在您的情況下，它嘗試包含一個實際名為*.css的文件，這是Module not found錯誤試圖告訴您的內容。 你只需要向 webpack 傳遞一個文件，webpack 就會找出依賴關系圖。 例如：如果文件main.css導入some-other-file.css ，它也會包含該文件，依此類推。 通過這樣做，webpack 將只包含實際需要的文件，因為它們在您的程序中被引用。 （順便說一句： node_modules/node_modules看起來不正確）

• 對ExtractTextPlugin的第一個參數使用相對路徑可能無效。 我不知道這是否真的有效。 您應該只提供一個文件名，webpack 會將提取和統一的 CSS 發送到指定output.path具有該名稱的文件中。 output.path通常是一個沒有子目錄的平面文件夾。 如果您之后需要移動捆綁的文件，您應該將其與您的 webpack 構建分開。 這只是另一個構建步驟。

• 只要您通過 npm 安裝加載器（我強烈推薦），就不需要修改resolveLoader.root 。

我試圖修復給定的配置。 由於我不知道您的項目，因此不能保證這會起作用。

'use strict';

let webpack = require('webpack');

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

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

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

module.exports = {
    resolve: {
        alias: {
            rootReducers: path.join(__dirname, '../../../../../themes/myProject-base/lib/myProject-core/register/myProject-redux-base/base-reducers'),
            rootActions: path.join(__dirname, '../../../../../themes/myProject-base/lib/myProject-core/register/myProject-redux-base/base-actions'),
            rootUtils: path.join(__dirname, '../../../../../themes/myProject-base/lib/myProject-core/register/myProject-redux-base/base-utils'),
            lunchMenusReducers: path.join(__dirname, 'src/lunch-menus-common-js/reducers/lunch-menus-reducers'),
            lunchMenusActions: path.join(__dirname, 'src/lunch-menus-common-js/actions/lunch-menus-actions'),
            lunchMenusConfigureStore: path.join(__dirname, 'src/lunch-menus-common-js/configureStore')
        }
    },
    entry: {
        backend: path.join(__dirname, 'src/components/index.js'),
        widgetfrontend: path.join(__dirname, '../../../includes/widget/public-js/scripts/main.js'),
        widgetbackend: path.join(__dirname, '../../../includes/widget/js/scripts/main.js'),
        myProjectLunchMenusAdmin: [
            path.join(__dirname, '../../scss/myProject-lunch-menus-admin.scss'),
            path.join(nodeModulesPath, 'react-datepicker/dist/react-datepicker.min.css'),
            path.join(nodeModulesPath, 'quill/dist/quill.base.css'),
            path.join(nodeModulesPath, 'quill/dist/quill.snow.css')
        ]
    },
    output: {
        path: path.resolve(__dirname, '..'),
        filename: '[name].js',
        devtoolLineToLine: true
    },
    plugins: [
        extractCSS,
        definePlugin
    ].concat(isDev ? [

    ] : [
        new webpack.optimize.UglifyJsPlugin({minimize: true})
    ]),
    module: {
        loaders: [
            {
                test: /(src|myProject-base|widget)\/.+.jsx?$/,
                exclude: /node_modules/,
                loader: 'babel',
                query: {
                    presets: [
                        require.resolve('babel-preset-es2015'),
                        require.resolve('babel-preset-react'),
                        require.resolve('babel-preset-stage-0')
                    ]
                }
            },
            {
                test: /\.css$/i,
                loader: extractCSS.extract(['css'])
            },
            {
                test: /\.scss$/i,
                loader: extractCSS.extract(['css','sass'])
            },
            {
                test: /\.jpe?g$|\.gif$|\.png$|\.svg$|\.woff$|\.ttf$/,
                loader: 'file'
            }
        ]
    }
}