标签: webpack

我目前正在使用 next@11.1.2 和 webpack v5，并在修复 mp3 加载方面卡住了几个小时。我尝试了 stack 和 GitHub 上的其他几个解决方案。他们都不为我工作。

Type error: Cannot find module 'public/sounds/bighit.mp3' or its corresponding type declarations.

  14 | 
  15 | // Assets
> 16 | import sound_bighit from "public/sounds/bighit.mp3"
     |                          ^
info  - Checking validity of types .%       

这是我最后的 webpack 配置：

const path = require('path')
const SRC = path.resolve(__dirname, 'public/sounds/')

module.exports = {
    webpack: (config, { }) => {

        config.module.rules.push({
            test: /\.mp3$/,
            incluse: SRC,
            use: {
                loader: 'file-loader',
                options: {
                    name: '[name].[contenthash].[ext]',
                    outputPath: 'public/sounds/', …

我是 Office 插件开发的新手，但在我们的组织中有一个项目。安装 package.json 文件中提到的所有依赖项后，当我尝试运行“npm run dev-server”时，出现以下错误：

c:\\git\\sample-project\\ui-addin>npm run dev-server\n\n> ui-addin@1.0.0 dev-server c:\\git\\sample-project\\ui-addin\n> webpack-dev-server --mode development\n\nYou already have trusted access to https://localhost.\nCertificate: C:\\Users\\Manish.Kumar\\.office-addin-dev-certs\\localhost.crt\nKey: C:\\Users\\Manish.Kumar\\.office-addin-dev-certs\\localhost.key\ni \xef\xbd\xa2wds\xef\xbd\xa3: Project is running at https://127.0.0.1:3000/\ni \xef\xbd\xa2wds\xef\xbd\xa3: webpack output is served from /\ni \xef\xbd\xa2wds\xef\xbd\xa3: Content not from webpack is served from c:\\git\\sample-project\\ui-addin\n(node:19272) UnhandledPromiseRejectionWarning: TypeError: The 'compilation' argument must be an instance of Compilation\nat Function.getCompilationHooks (c:\\git\\sample-project\\ui-addin\\node_modules\\custom-functions-metadata-plugin\\node_modules\\webpack\\lib\\NormalModule.js:207:10)\nat c:\\git\\sample-project\\ui-addin\\node_modules\\custom-functions-metadata-plugin\\lib\\customfunctionsplugin.js:41:36\nat SyncHook.eval [as call] (eval at create (c:\\git\\sample-project\\ui-addin\\node_modules\\webpack\\node_modules\\tapable\\lib\\HookCodeFactory.js:19:10), <anonymous>:7:1)\nat SyncHook.lazyCompileHook (c:\\git\\sample-project\\ui-addin\\node_modules\\webpack\\node_modules\\tapable\\lib\\Hook.js:154:20)\nat Compiler.newCompilation (c:\\git\\sample-project\\ui-addin\\node_modules\\webpack\\lib\\Compiler.js:631:26)\nat c:\\git\\sample-project\\ui-addin\\node_modules\\webpack\\lib\\Compiler.js:667:29\nat eval (eval at create (c:\\git\\sample-project\\ui-addin\\node_modules\\webpack\\node_modules\\tapable\\lib\\HookCodeFactory.js:33:10), <anonymous>:14:1)\nat …

我已经从 SVGR Playground 页面自动转换了 SVG React 组件，并将其放入我的项目中（以及安装 @svgr/webpack 并按照指示设置配置） - 尝试加载页面时，出现以下错误过来：

./img/PlaneIcon
Module parse failed: Unexpected token (2:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| const PlaneIcon = (props) => (
>   <svg
|     width={687.135}
|     height={687.135}

Import trace for requested module:
./pages/world.js

我尝试寻找解决方案，但大多数事情似乎都集中在如何加载 .svg 文件（这似乎也是 next.config.js 文件正在处理的内容） - 我没有看到任何迹象表明内联 svg jsx 甚至应该需要一个 webpack 加载器，尽管我在使用 next + React 方面还很陌生，所以我可能只是误解 - 任何帮助将不胜感激。

SVG 组件：

const …

我一直用mini-css-extract-pluginCSS来优化。今天我发现了一个新项目，css-minimizer-webpack-plugin从这里看，这个项目似乎做了同样的事情mini-css-extract-plugin。

优点是什么css-minimizer-webpack-plugin？我读了谷歌的文档和文章，似乎没有人在谈论它？我应该用css-minimizer-webpack-plugin来替换mini-css-extract-plugin吗？

我在这个网站上看到过其他类似的问题，但没有一个对我来说有令人满意的解决方案。我没有任何 webpack.config.js 文件，因为我们从 Angular 获取默认配置。请参阅下面相应的图片，以便更好地了解我的问题。

我的项目中的其他配置：

包.json

  "cypress-cucumber-preprocessor": {
"nonGlobalStepDefinitions": true,
"json": {
  "enabled": true
},
"stepDefinitions": "**/cypress/e2e/**/*.js",
"step_definitions": "**/cypress/e2e/**/*.js"
},

赛普拉斯.config.ts

import { defineConfig } from 'cypress'
export default defineConfig({
e2e: {
// We've imported your old cypress plugins here.
// You may want to clean this up later by importing these.
setupNodeEvents(on, config) {
  return require('./cypress/plugins/index.js')(on, config)
},
specPattern: '**/e2e/**/*.feature',
"supportFile": false,
chromeWebSecurity: false
},
})

更新 1： 您好@Wirtuald，感谢您回复我。我开始在一个相当复杂的角度项目中遇到这个问题。因此，我从头开始创建了一个基本项目，但仍然遇到同样的问题。接下来，我向大家介绍一下这个新项目的全部信息：

• 我没有“插件”文件夹

• package.json 上的版本：

    "devDependencies": {
    "@badeball/cypress-cucumber-preprocessor": "^11.2.0", …

  Run Code Online (Sandbox Code Playgroud)

运行时收到此警告npm dev：

<w> [webpack.cache.PackFileCacheStrategy] Restoring pack from /Users/pdeva/code/monorepo/web/app/.next/cache/webpack/client-development.pack failed: TypeError: Cannot read properties of undefined (reading 'hasStartTime')
<w> [webpack.cache.PackFileCacheStrategy] Restoring pack from /Users/pdeva/code/monorepo/web/app/.next/cache/webpack/server-development.pack failed: TypeError: Cannot read properties of undefined (reading 'hasStartTime')

这是完整的输出：

npm run dev

> app@0.1.0 dev
> next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Loaded env from /Users/pdeva/code/monorepo/web/app/.env.local
warn  - You have enabled experimental feature (appDir) in next.config.js.
warn  - Experimental features are not covered by semver, and may cause …

我有一个项目，有 3 个 html 文件，即index.html、about.html 和resource.html。

它有两个 css 文件：style.css 和 style1.css。它有两个 javascript 文件：script.js 和 script1.js。Index.html 使用 style.css 和 script.js。about.html 使用 style1.css 和 script1.js。resources.js 还使用 style1.css 和 script1.js。我想尝试初始化一个 NPM 项目，但它需要一个入口点。我该怎么办？

我想使用 webpack 来捆绑我的项目，为此我需要使用 NPM。这个项目完全是普通的。

我有一个React Redux应用程序。我添加了实现作为CSS框架，但实现需要jquery。所以我安装了Jquery并通过npm将其添加到我的项目中。如果我这样导入jQuery

import $ from 'jquery';

没有抛出任何错误，并且无法使用它。但仅在该组件上。所以我添加了wepback插件，这样我就可以在我的react应用程序中调用$了。但是，当我按照webpacks 网站上的说明进行操作时，出现以下错误。

Line 13:  '$' is not defined 

对这是为什么有什么想法？

app.js

import React  from 'react';
import '../styles/index.css';
import Header from './header/Header';

class App extends React.Component {
    constructor(props){
        super(props);
        console.log('Application ready');
    }
    componentWillMount(){
        $('ul.tabs').tabs();
    }
    render = () => (
        <div>
            <Header />
            <div>
                {this.props.children}
            </div>
        </div>
    )
}
export default App;

webpack.config.dev.js

    alias: {

  // Support React Native Web
  // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
  'react-native': 'react-native-web',
  jquery: "jquery/src/jquery" // What i added 
  // $: "jquery/src/jquery" 
},

jQuery在node_modules文件夹中，从npm安装开始，我没有将其添加到任何其他位置。

我是Vuejs的新手。我正在一个项目中，我必须在Vue组件中显示图像。在我的组件中，我正在显示如下图像：

<img src="./../../images/back-arrow.png">

然后建成后不显示。当我检查我的代码时，它显示了不同的地址，如下所示：

<img src="/js/back-arrow.png?c4a414352d997e4618088074e1da917a">

我的文件夹结构是：

• 资产
  • 组件
    • VueTemplate.vue //这是我展示图片的地方
  • 图片
    • back-arrow.png
  • js // npm运行构建位置

我不知道为什么会改变，有人可以帮我吗？TIA

我的webpack配置：

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './admin/assets/main.js',
  output: {
    path: path.resolve(__dirname, 'admin/js'),
    publicPath: '/js/',
    filename: 'graphs-lite-admin.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ],
      },
      {
        test: /\.scss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader'
        ],
      },
      {
        test: /\.sass$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader?indentedSyntax'
        ],
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: …

在 angular.json 中设置“sourceMap”时，“ng build --prod 95% 发出 index-html-webpack-plugin”（Angular 版本 7）中停止问题的解决方案：true

谢谢！

我是 NodeJS 和 webpack 的新手。

我正在关注 webpack 的教程，何时必须创建 webpack.config.js 并运行webpack -c webpack.config.js它返回：

webpack -c webpack.config.js

/home/arma/bin/nodejs/webpack.config.js:15
        root: path.join(__diranme, './src'),
                        ^
ReferenceError: __diranme is not defined
    at Object.<anonymous> (/home/arma/bin/nodejs/webpack.config.js:15:25)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Module.require (module.js:364:17)
    at require (module.js:380:17)
    at module.exports (/usr/lib/node_modules/webpack/bin/convert-argv.js:80:13)
    at Object.<anonymous> (/usr/lib/node_modules/webpack/bin/webpack.js:39:40)
    at Module._compile (module.js:456:26)

我的 webpack.config.js：

var path = require('path');

module.exports = {
    context: __dirname,
    entry: [
        './src/index.js',
    ],
    output: {
        path: path.join(__dirname, 'build'),
        filename: 'output.js',
        publicPath: …

有人可以帮助我解决这个问题：我正在尝试在 laravel 项目中执行 npm run 生产（也使用 webpack）并在位置 132 处获取 SyntaxError: Unexpected token / in JSON （以及如何使用 vscode 捕获它们）。就像尝试转换为 JSON 时出错但我找不到它一样。感谢您的帮助 这是 github 存储库

https://github.com/hevzy86/vur

cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

F:\Projects\js\vue\vue-appEp19\node_modules\webpack-cli\bin\cli.js:93
                                throw err;
                                ^

SyntaxError: Unexpected token / in JSON at position 132
    at JSON.parse (<anonymous>)
    at BabelConfig.fetchBabelRc (F:\Projects\js\vue\vue-appEp19\node_modules\laravel-mix\src\BabelConfig.js:30:41)
    at Function.generate (F:\Projects\js\vue\vue-appEp19\node_modules\laravel-mix\src\BabelConfig.js:14:35)
    at Object.babel (F:\Projects\js\vue\vue-appEp19\node_modules\laravel-mix\src\config.js:121:45)
    at JavaScript.webpackRules (F:\Projects\js\vue\vue-appEp19\node_modules\laravel-mix\src\components\JavaScript.js:76:41)
    at ComponentFactory.applyRules (F:\Projects\js\vue\vue-appEp19\node_modules\laravel-mix\src\components\ComponentFactory.js:155:23)
    at Mix.listen.rules (F:\Projects\js\vue\vue-appEp19\node_modules\laravel-mix\src\components\ComponentFactory.js:66:48)
    at events.(anonymous function).forEach.handler (F:\Projects\js\vue\vue-appEp19\node_modules\laravel-mix\src\Dispatcher.js:34:47)
    at Array.forEach (<anonymous>)
    at Dispatcher.fire (F:\Projects\js\vue\vue-appEp19\node_modules\laravel-mix\src\Dispatcher.js:34:28)
    at Mix.dispatch (F:\Projects\js\vue\vue-appEp19\node_modules\laravel-mix\src\Mix.js:119:25)
    at WebpackConfig.buildRules (F:\Projects\js\vue\vue-appEp19\node_modules\laravel-mix\src\builder\WebpackConfig.js:83:13) …

尝试使用离子设置 auth0 时遇到问题。

但是，我认为它与它无关，它更像是一个加密 js / 配置问题。

这是我得到的错误：

main.7c4444f936ddaf5620f8.bundle.js:formatted:15919 ERROR Error:

Uncaught (in promise): TypeError: r.randomBytes is not a function

TypeError: r.randomBytes is not a function at n.generateProofKey (main.7c4444f936ddaf5620f8.bundle.js:formatted:844)

下面是我的加密 js 文件：

import * as crypto from 'crypto-js';

function base64UrlSafeEncode(string) {
  return string.toString('base64')
      .replace(/+/g, '-')
      .replace(/\//g, '_')
      .replace(/=/g, '');
}

function sha256(buffer) {
  return crypto.createHash('sha256').update(buffer).digest();
}

exports.generateProofKey = function generateProofKey() {
  var codeVerifier = base64UrlSafeEncode(crypto.randomBytes(32)); 
  var codeChallenge = base64UrlSafeEncode(sha256(codeVerifier)); 
  return { codeVerifier: codeVerifier, codeChallenge: codeChallenge };
};

exports.generateState = function …