标签: webpack-cli

我收到此错误

错误：webpack.optimize.CommonsChunkPlugin已删除，请config.optimization.splitChunks改用。

new webpack.optimize.CommonsChunkPlugin({
  filename: DEBUG ? 'bundle.js' : 'bundle.min.js',
  name: "vendor"
})

我正在尝试运行命令：

npx webpack

它告诉我它需要 webpack-cli 并询问是否应该安装它，我说“是”。然后它给了我：

PS C:\_ljdev\webpack demo> npx webpack
npx: installed 321 in 11.89s
One CLI for webpack must be installed. These are recommended choices, delivered as separate packages:
 - webpack-cli (https://github.com/webpack/webpack-cli)
   The original webpack full-featured CLI.
We will use "npm" to install the CLI via "npm install -D".
Do you want to install 'webpack-cli' (yes/no): yes
Installing 'webpack-cli' (running 'npm install -D webpack-cli')...
npm WARN webpack-cli@3.2.3 requires a peer of webpack@4.x.x but none is installed. You must …

我将 webpack 5 和 @ngtools/webpack 一起使用来构建 angular 应用程序。当我运行时webpack --mode development出现以下错误：

Error: NormalModuleFactory.beforeResolve is no longer a waterfall hook, but a bailing hook instead. Do not return the passed object, but modify it instead. Returning false will ignore the request and results in no module created.
    at /home/alecoder/Projects/JS/ap/node_modules/webpack/lib/NormalModuleFactory.js:543:11
    at eval (eval at create (/home/alecoder/Projects/JS/ap/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:12:1)
(node:17432) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a …

我正在将 webpack 从 v4 升级到 v5。

我已经开始升级 webpack-cli，如doc中所述。

所以当我跑步时npx webpack --version我得到

webpack 4.46.0
webpack-cli 4.5.0

现在我尝试运行以下命令：npx webpack --display-error-details。v4 的 webpack cli 的文档说这个选项是可用的。

但我得到Error: Unknown option '--display-error-details'

我缺少什么？

这是使用 Docker。它在使用时有效wsl2，但在使用时hyper-v我遇到了问题。

我正在尝试运行mix watch -- --watch-options-poll=3000，mix --production但每次运行时都会遇到以下问题。

[webpack-cli] [错误：EEXIST：文件已存在，打开 '/var/www/html/public/website/images/e-side.png'] { errno：-17，
代码：'EEXIST'，系统调用： '打开'，路径：'/var/www/html/public/website/images/e-side.png' }

webpack.mix.js

const mix = require('laravel-mix');
const oldMix = require('laravel-mix');
const path = require('path');
const glob = require('glob');
const PurgeCSSPlugin = require('purgecss-webpack-plugin');

//-- Website Mix --
mix.babelConfig({
   plugins: ['@babel/plugin-syntax-dynamic-import', '@babel/plugin-proposal-class-properties', '@babel/plugin-proposal-optional-chaining'],
});

mix.webpackConfig({
    watchOptions: {
        ignored: /node_modules/
    },
    stats: {
        warnings: false,
    },
    output: {
        chunkFilename: 'website/js/chunks/[chunkhash].js',//replace with your path
    },
    resolve: {
        alias: {
            '@fonts': path.resolve(__dirname, 'resources/website/styles/fonts'), …

我正在尝试将 webpack 用于我的 Web 开发项目，但不知道如何使用 writeToDisk 选项。

这是我的 webpack.config.development.js 文件：

const { merge } = require('webpack-merge')
const path = require('path')

const config = require('./webpack.config')

module.exports = merge(config, {
  mode: 'development',

  devtool: 'inline-source-map',

  devServer: {
    writeToDisk: true
  },

  output: {
    path: path.resolve(__dirname, 'public')
  }
})

当我运行时的结果npm start如下：

C:\Users\natha\OneDrive\Documents\web\floema>npm start

> floema@1.0.0 start
> npm run development


> floema@1.0.0 development
> webpack serve --progress --config webpack.config.development.js

C:\Users\natha\OneDrive\Documents\web\floema\app C:\Users\natha\OneDrive\Documents\web\floema\assets C:\Users\natha\OneDrive\Documents\web\floema\styles
1% setup initialize[webpack-cli] Invalid options object. Dev Server has been initialized …

无法运行构建 [webpack-cli] TypeError: cli.isValidationError is not a function at Command。(/Users/lokesh/Documents/projects/newminnow/minnow-app/node_modules/@webpack-cli/serve/lib/index.js:96:25) npm ERR！代码生命周期

  "name": "appp",
  "version": "1.0.0",
  "license": "UNLICENSED",
  "main": "index.js",
  "scripts": {
    "start": "webpack serve --config webpack.dev.js",
    "build": "webpack  --config webpack.prod.js",
    "lint": "eslint --fix src/js/** --ext .js --ext .jsx",
    "report": "npm run build --withReport true"
  },
  "dependencies": {
    "node-sass": "4.14.1",
    "path": "0.12.7",
    "prop-types": "15.7.2",
    "query-string": "6.13.7",
    "react": "17.0.1",
    "react-cookie": "4.0.3",
    "react-dom": "17.0.1",
    "react-ga": "3.3.0",
    "react-redux": "7.2.2",
    "react-router-dom": "5.2.0",
    "react-stripe-elements": "6.1.2",
    "redux": "4.0.5",
    "redux-thunk": "2.3.0",
    "sass-loader": "10.1.0",
    "style-loader": "2.0.0",
    "url-loader": "4.1.1", …

我有一个带有 JVM 和 JS 的 Kotlin 多平台项目。当执行jsRungradle任务启动webpack服务器时，失败并出现以下错误：

Waiting for changes to input files of tasks... (ctrl-d then enter to exit)
[webpack-cli] TypeError: cli.isMultipleCompiler is not a function
[webpack-cli] TypeError: cli.isMultipleCompiler is not a function
    at Command.<anonymous> (C:\MyProject\build\js\node_modules\@webpack-cli\serve\lib\index.js:146:35)
    at async Promise.all (index 1)
    at async Command.<anonymous> (C:\MyProject\build\js\node_modules\webpack-cli\lib\webpack-cli.js:1687:7)

编译成功，我可以通过 Ktor 为该项目提供服务，问题似乎是 webpack 开发服务器。

kotlin gradle 插件生成的似乎package.json使用webpack-cli 4.9.0.

{
  "name": "MyProject-client",
  "version": "1.0.0",
  "main": "kotlin/MyProject-client.js",
  "devDependencies": {
    "sass-loader": "13.0.0",
    "sass": "1.53.0",
    "style-loader": "3.3.1",
    "css-loader": "6.7.1",
    "resolve-url-loader": "5.0.0", …

我有一台带有 M1 芯片的 Mac，我想知道该错误是否与此有关，因为在我的旧电脑上没有问题。

 % npm run dev           

> dev
> encore dev

Running webpack ...

[webpack-cli] Error: spawn Unknown system error -86
    at ChildProcess.spawn (node:internal/child_process:420:11)
    at spawn (node:child_process:757:9)
    at Object.execFile (node:child_process:348:17)
    at module.exports.fileCommandJson (/Users/Desktop/quest/wild-series/node_modules/node-notifier/lib/utils.js:88:13)
    at NotificationCenter.notifyRaw (/Users/Desktop/quest/wild-series/node_modules/node-notifier/notifiers/notificationcenter.js:81:11)
    at WebpackNotifierPlugin.compilationDone (/Users/Desktop/quest/wild-series/node_modules/webpack-notifier/index.js:129:14)
    at Hook.eval [as callAsync] (eval at create (/Users/Desktop/quest/wild-series/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:18:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/Desktop/quest/wild-series/node_modules/tapable/lib/Hook.js:18:14)
    at /Users//Desktop/quest/wild-series/node_modules/webpack/lib/Compiler.js:498:23
    at Compiler.emitRecords (/Users/Desktop/quest/wild-series/node_modules/webpack/lib/Compiler.js:919:5) {
  errno: -86,
  code: 'Unknown system error -86',
  syscall: 'spawn'
}

我尝试过使用纱线和 npm ..

我Vue 3.0.5使用Webpack 5.21.2和创建了一个应用程序Webpack CLI 4.5.0。我构建了一个全局组件my-component.js：

import SecondComponent from './second-component.vue';
app.component('global-component', {
  template: `
    <div>
      <h1>Hi!</h1>
      <second-component></second-component>
    </div>
  `,
 components: {
   SecondComponent
 }
})

导入的second-component.vue：

<template>
  <div>
    <div>{{someData}}</div>
    <third-component :name="helloWorld"></third-component>
  </div>
</template>

<script>
import ThirdComponent from './third-component.vue';
export default {
 name: 'second-component',
 components: {
   ThirdComponent 
 },
 data: function () {
   return {
     someData: 'Just some data!',
     helloWorld: 'Hello World!',
   }
  }
}
</script>

第三个组件third-component.vue：

<template>
  <div>
    <div>{{name}}</div>
  </div>
</template> …

我一直在网上关注本教程：https://www.youtube.com/watch?v =TOb1c39m64A 。

大约 10 分钟后，我们将首次启动 webpack 开发服务器。我这样做，当我访问： http://localhost:8080/ 我收到一个白色网页，其中只有文本Cannot GET /。

这些是迄今为止我安装的唯一软件包：

"devDependencies": { "webpack": "^5.52.0", "webpack-cli": "^4.8.0", "webpack-dev-server": "^4.1.0" }

我有一个名为“start”的脚本webpack serve，它运行成功并显示：

<i> [webpack-dev-server] Project is running at: <i> [webpack-dev-server] Loopback: http://localhost:8080/

根据教程，我没有 webpack 配置，但是我在其他编码项目中搞乱了其他 webpack 内容，其中之一是否可以使用我的 8080 端口？我主要在 Firefox 中工作，但这个问题在所有浏览器中都存在。

我还查看了我的主机文件并添加了一行，如果您认为它可以帮助我将其粘贴到这里。

按照这里的要求是我的 package.json （其中大部分已经在上面发布）：

{ "private": true, "scripts": { "start": "webpack serve", "watch": "webpack --watch", "build": "webpack" }, "devDependencies": { "webpack": "^5.52.0", "webpack-cli": "^4.8.0", "webpack-dev-server": "^4.1.0" } }