如何配置 WordPress 和 Webpack 為 Css 和 JS 創建單獨的構建文件夾

Question

我在我的 WordPress 兒童主題中使用來自@wordpress/scripts的 Webpack。 默認情況下，output 文件在build文件夾中生成。 但是，我想更改 output 路徑。 我想將我編譯的 js 和 CSS 文件分離到構建文件夾內的不同子文件夾中，例如build/css和build/js 。 我怎樣才能做到這一點？ 這是我正在使用的 Webpack 配置：

webpack.config.js

/**
 * External Dependencies
 */
const path = require( 'path' );
const FixStyleOnlyEntriesPlugin = require( 'webpack-fix-style-only-entries' );
const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );

/**
 * WordPress Dependencies
 */
const defaultConfig = require( '@wordpress/scripts/config/webpack.config.js' );

module.exports = {
    ...defaultConfig,
    ...{
        entry: {
            main: path.resolve( process.cwd(), 'src/scss', 'main.scss' ),
            app: path.resolve( process.cwd(), 'src/js', 'app.js' ),
        },
    },
    plugins: [ new FixStyleOnlyEntriesPlugin(), new MiniCssExtractPlugin() ],
};

Answer 1

在 Webpack 中設置多個輸出

您可以通過兩種方式實現這一目標：

1.使用multi-compiler這個例子來自webpack repository from github: https://github.com/webpack/webpack/blob/main/examples/multi-compiler/webpack.config.js

var path = require("path");
var webpack = require("../../");

module.exports = [
    {
        name: "mobile",
        // mode: "development || "production",
        entry: "./example",
        output: {
            path: path.join(__dirname, "dist"),
            filename: "mobile.js"
        },
        plugins: [
            new webpack.DefinePlugin({
                ENV: JSON.stringify("mobile")
            })
        ]
    },

    {
        name: "desktop",
        // mode: "development || "production",
        entry: "./example",
        output: {
            path: path.join(__dirname, "dist"),
            filename: "desktop.js"
        },
        plugins: [
            new webpack.DefinePlugin({
                ENV: JSON.stringify("desktop")
            })
        ]
    }
];

2.使用入口描述符

這個是使用和測試過的。 下面檢查您的 webconfig.js 應該如何配置：

/**
 * External Dependencies
 */
const path = require( 'path' );
const FixStyleOnlyEntriesPlugin = require( 'webpack-fix-style-only-entries' );
const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );

/**
 * WordPress Dependencies
 */
const defaultConfig = require( '@wordpress/scripts/config/webpack.config.js' );


module.exports = {
  ...defaultConfig,
  ...{
    entry: {
      'css/main': path.resolve( process.cwd(), 'src/scss', 'main.scss' ),
      'js/app': path.resolve( process.cwd(), 'src/js', 'app.js' ),
    },
    output: {
      filename: '[name].js',
      path: path.resolve(__dirname, 'build')
    },
  }
  plugins: [
    ...defaultConfig.plugins,
    new FixStyleOnlyEntriesPlugin(),
    new MiniCssExtractPlugin() 
  ],
}

注意 1：當您在 output 中使用path: resolve( process.cwd(), 'build' )時， build文件夾將成為您的根文件夾。

注意 2：另請注意我為您的附加插件擴展插件的方式。

請關注此線程以獲得更多解釋： How to create multiple output paths in Webpack config