时间戳

首页 > 解决方案 > webpack 多编译器无法编译第二个入口点

webpack - webpack 多编译器无法编译第二个入口点

问题描述

我们在 Visual Studio C# 项目中使用 webpack 来捆绑脚本和样式。这些完成的包 css 和 js 文件最后必须位于不同的文件夹中。为此，我想使用 webpack 的多编译器。

如果我单独运行配置，它会按预期工作，它会在文件夹中创建一个 styles.css 并在Content/Styles/dist文件夹中创建一个 scripts.js Content/Scripts/dist。一旦我想使用多编译器运行这两个配置，就不再创建 scripts.js。

缩短的webpack.config.js样子是这样的：

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const FixStyleOnlyEntriesPlugin = require('webpack-fix-style-only-entries');

const buildStyles = {
  name: 'buildStyles',
  entry: {
    styles: './Content/Styles/src/styles.scss'
  },
  output: {
    path: path.resolve(__dirname, 'Content/Styles/dist'),
    filename: '[name].js'
  }
};

const buildScripts = {
  name: 'buildScripts',
  entry: {
    scripts: './Content/Scripts/src/scripts.js'
  },
  output: {
    path: path.resolve(__dirname, 'Content/Scripts/dist'),
    filename: '[name].js',
    globalObject: 'this'
  }
};

const config = {
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /(node_modules)/,
        use: [
          {
            loader: 'babel-loader',
            options: { presets: ['@babel/preset-env'] }
          }
        ]
      },
      {
        test: /\.s?css$/,
        use: [ MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader' ]
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: [
          {
            loader: 'file-loader',
            options: { name: 'fonts/[name].[ext]' }
          }
        ]
      },
      {
        test: /\.png$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              name: 'images/[name].[ext]',
              mimetype: 'image/png'
            }
          }
        ]
      },
      {
        test: /\.svg$/,
        use: [
          {
            loader: 'file-loader',
            options: { name: 'images/[name].[ext]' }
          }
        ]
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new MiniCssExtractPlugin(),
    new FixStyleOnlyEntriesPlugin(),
  ]
}

module.exports = [{ ...config, ...buildStyles }, { ...config, ...buildScripts }];

运行后webpack --config webpack.config.js --mode development我们得到了这个：

> Executing task: npm run dev <
> @projectname@0.0.1 dev C:\Development\PATH
> webpack --config webpack.config.js --mode development

webpack-fix-style-only-entries: removing js from style only module: styles.js
webpack-fix-style-only-entries: removing js from style only module: scripts.js
Hash: a0893d6852ba01de1de9fcbdbd61d1adcdf456cc
Version: webpack 4.44.1
Child buildStyles:
    Hash: a0893d6852ba01de1de9
    Time: 1834ms
    Built at: 2020-10-16 11:14:15
                                   Asset       Size  Chunks             Chunk Names
                 fonts/OpenSans-Bold.ttf    102 KiB          [emitted]  
                 >MANY MORE<                XXX KiB          [emitted]  
                              styles.css    164 KiB  styles  [emitted]  styles
    Entrypoint styles = styles.css
    [./Content/Styles/src/styles.scss] 39 bytes {styles} [built]
        + 2 hidden modules
    Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!node_modules/sass-loader/dist/cjs.js!Content/Styles/src/styles.scss:
        Entrypoint mini-css-extract-plugin = *
        [./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./Content/Styles/src/styles.scss] 784 bytes {mini-css-extract-plugin} [built]
            + 30 hidden modules
Child buildScripts:
    Hash: fcbdbd61d1adcdf456cc
    Time: 2253ms
    Built at: 2020-10-16 11:14:15
    !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
    Entrypoint scripts =
    !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
    [./Content/Scripts/src/scripts.js] 358 bytes {scripts} [built]
    [./Content/Scripts/src/utilities/dom-observer.js] 3.72 KiB {scripts} [built]
    [./Content/Scripts/src/utilities/dom-ready.js] 662 bytes {scripts} [built]
    >MANY MORE<
    [./Content/Scripts/src/vendors/polyfill.js] 2.86 KiB {scripts} [built]
    [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {scripts} [built]
        + 382 hidden modules

带有感叹号的标记位置实际上应该包含以下内容：

    Built at: 2020-10-16 11:14:15
    Entrypoint scripts = scripts.js

看起来它不再识别多编译模式下的 scripts.js。我是否先运行 buildStyles 然后再运行 buildScripts 并不重要，反之亦然。我犯了什么错误？我希望有人可以帮助我解决这个问题。

此致

标签： webpackbuildcompilationwebpack-4

解决方案

根据 clean-webpack-plugin 的使用文档，在 webpack 4+ 中使用默认配置时，它总是会清除整个输出目录。

webpack 的 output.path 目录中的所有文件都将被删除一次，但目录本身不会。如果使用 webpack 4+ 的默认配置，<PROJECT_DIR>/dist/ 下的所有内容都将被删除。使用 cleanOnceBeforeBuildPatterns 覆盖此行为。

您应该能够cleanOnceBeforeBuildPatterns在 webpack 配置中添加该选项，以确保文件只被删除一次。尝试：

{
    ...,
    plugins: [
        new CleanWebpackPlugin({
            cleanOnceBeforeBuildPatterns: [],
        }),
        ...
    ],
    ...
}

推荐阅读