我正在使用Elixir/Phoenix的Webpack。我最近从Webpack 4升级到Webpack 5。
我认为一切都很好，除了现在由于某种原因，当我运行测试时，dist和main.js总是在项目根dist/main.js处创建。这个文件大部分是空的：

/*
 * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
 * This devtool is neither made for production nor for readable output files.
 * It uses "eval()" calls to create a separate source file in the browser devtools.
 * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
 * or disable the default devtool with "devtool: false".
 * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
 */
/******/ (() => { // webpackBootstrap
/******/    "use strict";
/******/    
/******/    
/******/ })()
;

字符串
在我的mix.exs中，我有以下代码。

defp compile_assets(_) do
    Mix.shell().cmd("./assets/node_modules/webpack/bin/webpack.js --mode development",
      quiet: false
    )
  end

型
我的webpack.config包括：

devtool: 'eval-source-map',
    entry: {
      'app': glob.sync('./vendor/**/*.js').concat(['./js/app.js']),
      'marketing': glob.sync('./vendor/**/*.js').concat(['./js/marketing.js']),
      'admin': glob.sync('./vendor/**/*.js').concat(['./js/admin.js']),
    },
    output: {
      filename: '[name].js',
      path: path.resolve(__dirname, '../priv/static/js')
    },

型
当我在IEX中运行这个时，我得到：

iex(1)> Mix.shell().cmd("./assets/node_modules/webpack/bin/webpack.js --mode development", quiet: false)
asset main.js 662 bytes [emitted] (name: main)

ERROR in main
Module not found: Error: Can't resolve './src' in '/Users/me/development/apps/my_app'
resolve './src' in '/Users/me/development/apps/my_app'
  No description file found in /Users/me/development/apps/my_app or above
  No description file found in /Users/me/development/apps/my_app or above
  no extension
    /Users/me/development/apps/my_app/src doesn't exist
  .js
    /Users/me/development/apps/my_app/src.js doesn't exist
  .json
    /Users/me/development/apps/my_app/src.json doesn't exist
  .wasm
    /Users/me/development/apps/my_app/src.wasm doesn't exist
  as directory
    /Users/me/development/apps/my_app/src doesn't exist

webpack 5.50.0 compiled with 1 error in 50 ms
1

型
既然我已经指定了条目，我想应该没问题。任何帮助都将不胜感激。
更新：显示整个webpack.js.js

const path = require('path');
const glob = require('glob');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const CopyWebpackPlugin = require('copy-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader');
const webpack = require('webpack')
const Dotenv = require('dotenv-webpack');

module.exports = (webpackEnv, webpackOptions) => {

  const platform = process.env.PLATFORM
  if (platform == undefined) {
    throw "process.env.PLATFORM is undefined!"
  }
  dotEnvFile = `.env.${platform}`
  const mode = platform === 'production' ? 'production' : 'development';
  const minimize = platform === 'production' ? true : false;
  const cache = platform === 'production' ? false : { type: 'filesystem' };
  const vueProdDevtools = platform === 'production' ? false : true;

  return {
    cache: cache,
    mode: mode,
    optimization: {
      minimize: minimize,
      minimizer: [
        new TerserPlugin({
          parallel: true
        }),
        new CssMinimizerPlugin()
      ]
    },
    entry: {
      'app': glob.sync('./vendor/**/*.js').concat(['./js/app.js']),
      'marketing': glob.sync('./vendor/**/*.js').concat(['./js/marketing.js']),
      'admin': glob.sync('./vendor/**/*.js').concat(['./js/admin.js']),
    },
    output: {
      filename: '[name].js',
      path: path.resolve(__dirname, '../priv/static/js')
    },
    module: {
      rules: [
        {
          test: /\.vue$/,
          use: [
            {
              loader: 'vue-loader',
              options: {
                compilerOptions: {
                  compatConfig: {
                    MODE: 2
                  }
                }
              }
            }
          ]
        },      {
          test: /\.js$/,
          exclude: /node_modules/,
          use: [
            {
              loader: 'babel-loader'
            }
          ]
        },
        {
          test: /\.css$/,
          use: [
            MiniCssExtractPlugin.loader,
            'css-loader',
            'postcss-loader'
          ]
        },
        {
          test: /\.scss$/,
          use: [
            'vue-style-loader',
            'css-loader',
            'sass-loader'
          ]
        }
      ]
    },
    plugins: [
      new Dotenv({
        path: path.resolve(__dirname, '..', dotEnvFile)
      }),
      new MiniCssExtractPlugin({ filename: '../css/[name].css' }),
      new CopyWebpackPlugin({patterns:[{ from: 'static/', to: '../' }]}),
      new VueLoaderPlugin(),
      new webpack.DefinePlugin({
        __VUE_PROD_DEVTOOLS__: vueProdDevtools
      })
    ],
    resolve: {
      alias: {
        vue: '@vue/compat'
      },
      extensions: [ '*', '.js', '.vue', '.json' ],
    },
  }
};

型
更新2：
根据将文件名转换为函数的建议，我将其更新为：

output: {
      filename: (pathData, assetInfo) => {
        console.log("******** pathData:", pathData)
        console.log("******** assetInfo:", assetInfo)

        return '[name].js'
      },
      path: path.resolve(__dirname, '../priv/static/js')
    }

型
有趣的是当我跑的时候

mix phx.server

型
输出为：

******** pathData: {
  hash: '449eeaf77670741a6887',
  runtime: 'app',
  chunk: Chunk {
    id: 'app',
    ids: [ 'app' ],
    debugId: 1000,
    name: 'app',
    idNameHints: SortableSet [Set] {
      _sortFn: undefined,
      _lastActiveSortFn: Symbol(not sorted),
      _cache: undefined,
      _cacheOrderIndependent: undefined
    },
    preventIntegration: false,
    filenameTemplate: undefined,
    _groups: SortableSet [Set] {
      [Entrypoint],
      _sortFn: [Function: compareChunkGroupsByIndex],
      _lastActiveSortFn: Symbol(not sorted),
      _cache: undefined,
      _cacheOrderIndependent: undefined
    },
    runtime: 'app',
    files: SetDeprecatedArray [Set] { '../css/app.css' },
    auxiliaryFiles: Set {},
    rendered: false,
    hash: '09da590258e85092531ee1a26f184db4',
    contentHash: [Object: null prototype] {
      'css/mini-extract': '4500f8bd1df6d9d548c3',
      javascript: 'a1a060a5ddfcebc58653'
    },
    renderedHash: '09da590258e85092531e',
    chunkReason: undefined,
    extraAsync: false
  },
  contentHashType: 'javascript'
}
******** assetInfo: {}
******** pathData: {
  hash: '449eeaf77670741a6887',
  runtime: 'marketing',
  chunk: Chunk {
    id: 'marketing',
    ids: [ 'marketing' ],
    debugId: 1001,
    name: 'marketing',
    idNameHints: SortableSet [Set] {
      _sortFn: undefined,
      _lastActiveSortFn: Symbol(not sorted),
      _cache: undefined,
      _cacheOrderIndependent: undefined
    },
    preventIntegration: false,
    filenameTemplate: undefined,
    _groups: SortableSet [Set] {
      [Entrypoint],
      _sortFn: [Function: compareChunkGroupsByIndex],
      _lastActiveSortFn: Symbol(not sorted),
      _cache: undefined,
      _cacheOrderIndependent: undefined
    },
    runtime: 'marketing',
    files: SetDeprecatedArray [Set] { '../css/marketing.css' },
    auxiliaryFiles: Set {},
    rendered: false,
    hash: 'e11f89b04d9e2d62877069c780bfd99c',
    contentHash: [Object: null prototype] {
      'css/mini-extract': '1218451d2cf9d01e4c35',
      javascript: '0bf8255fc0482a761bba'
    },
    renderedHash: 'e11f89b04d9e2d628770',
    chunkReason: undefined,
    extraAsync: false
  },
  contentHashType: 'javascript'
}
******** assetInfo: {}
******** pathData: {
  hash: '449eeaf77670741a6887',
  runtime: 'admin',
  chunk: Chunk {
    id: 'admin',
    ids: [ 'admin' ],
    debugId: 1002,
    name: 'admin',
    idNameHints: SortableSet [Set] {
      _sortFn: undefined,
      _lastActiveSortFn: Symbol(not sorted),
      _cache: undefined,
      _cacheOrderIndependent: undefined
    },
    preventIntegration: false,
    filenameTemplate: undefined,
    _groups: SortableSet [Set] {
      [Entrypoint],
      _sortFn: [Function: compareChunkGroupsByIndex],
      _lastActiveSortFn: Symbol(not sorted),
      _cache: undefined,
      _cacheOrderIndependent: undefined
    },
    runtime: 'admin',
    files: SetDeprecatedArray [Set] { '../css/admin.css' },
    auxiliaryFiles: Set {},
    rendered: false,
    hash: '6a55d7e6d1cc37be6087e1c464285cc2',
    contentHash: [Object: null prototype] {
      'css/mini-extract': '613df220ea4099b5fbf5',
      javascript: '90a7803cefe86244fd07'
    },
    renderedHash: '6a55d7e6d1cc37be6087',
    chunkReason: undefined,
    extraAsync: false
  },
  contentHashType: 'javascript'
}
******** assetInfo: {}

型
所以，我看到它为每个入口点运行一次（有道理）。然而，当在IEX中时，我这样做：

Interactive Elixir (1.12.2) - press Ctrl+C to exit (type h() ENTER for help)
iex(1)> Mix.shell().cmd("./assets/node_modules/webpack/bin/webpack.js --mode development", quiet: false)
asset main.js 662 bytes [compared for emit] (name: main)

ERROR in main
Module not found: Error: Can't resolve './src' in '/Users/me/development/apps/my_app'
resolve './src' in '/Users/me/development/apps/my_app'
  No description file found in /Users/me/development/apps/my_app or above
  No description file found in /Users/me/development/apps/my_app or above
  no extension
    /Users/me/development/apps/my_app/src doesn't exist
  .js
    /Users/me/development/apps/my_app/src.js doesn't exist
  .json
    /Users/me/development/apps/my_app/src.json doesn't exist
  .wasm
    /Users/me/development/apps/my_app/src.wasm doesn't exist
  as directory
    /Users/me/development/apps/my_app/src doesn't exist

webpack 5.51.1 compiled with 1 error in 47 ms
1

型
所以console.log命令没有在IEx中打印出来。这可能是相关的吗？可能是测试代码正在运行的命令，IEx中的命令，正在运行一个“不同的”webpack命令？它可能找不到webpack.config？

1条答案

按热度按时间

u1ehiz5o1#

创建dist/main.js的原因是，当webpack运行时，它无法找到webpack.js.js，因此dist/main.js是默认行为。
当我将filename更新为一个函数时，我发现了这一点。在其中，我调用了console.log("test")，并期望在IEx中看到它。控制台日志从未打印出来。
然后我运行了常规的mix phx.server，并得到了新的输出。
在dev.exs中有：

watchers: [
      node: [
        "node_modules/webpack/bin/webpack.js",
        "--mode",
        "development",
        "--progress",
        "--watch",
        "--watch-options-stdin",
        cd: Path.expand("../assets", __DIR__)
      ]
    ]

字符串
这一切看起来都像预期的那样，但使用了不同的实现（它使用cd: Path.expand，但我现在才注意到这一点）。
那么，为什么一个不工作，而另一个很好？
当仔细观察

型
我决定看看我是从哪里得到这个的（这是从Wallaby文档）
我回到文档，注意到它已经改变了。
这是变化：https://github.com/elixir-wallaby/wallaby/commit/834bdb726228349f800837e470a0c77cd2f4a6bd
现在代码应该是：

defp compile_assets(_) do
    Mix.shell().cmd("cd assets && ./node_modules/.bin/webpack --mode development",
      quiet: true
    )

型
我不知道为什么我们需要cd到资产，而不是我们以前的，但现在它工作了。

赞(0）回复(0）举报 12个月前

如何在升级到Webpack 5后阻止webpack创建dist/main.js？

1条答案

相关问题

热门标签

最新问答