Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/node.js/41.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 使用Webpack 5(Webpack新手)的正确设置是什么_Javascript_Node.js_Webpack 5 - Fatal编程技术网

Javascript 使用Webpack 5(Webpack新手)的正确设置是什么

Javascript 使用Webpack 5(Webpack新手)的正确设置是什么,javascript,node.js,webpack-5,Javascript,Node.js,Webpack 5,我正在使用Powershell脚本: creaete.ps1 Remove-Item -path bin\build -ErrorAction SilentlyContinue -Force -Recurse; Remove-Item -path public\build -ErrorAction SilentlyContinue -Force -Recurse; webpack --watch #webpack-serve --watch --mode=development --displ

我正在使用Powershell脚本: creaete.ps1

Remove-Item -path bin\build -ErrorAction SilentlyContinue -Force -Recurse;
Remove-Item -path public\build -ErrorAction SilentlyContinue -Force -Recurse;

webpack --watch
#webpack-serve --watch --mode=development --display-modules --env.development 

# "bin/logs/webpack.development.txt"
我发现以下错误:

PS C:\Users\mjackson.ZENEX\Documents\GitHub\Zenex> ./create
internal/modules/cjs/loader.js:883
  throw err;
  ^

Error: Cannot find module 'C:\Users\mjackson.ZENEX\AppData\Roaming\npm\node_modules\webpack\bin\webpack.js'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
    at Function.Module._load (internal/modules/cjs/loader.js:725:27)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12)
    at internal/main/run_main_module.js:17:47 {
  code: 'MODULE_NOT_FOUND',
  requireStack: []
}
PS C:\Users\mjackson.ZENEX\Documents\GitHub\Zenex>
my package.json:

{
  "name": "zenexint.com",
  "version": "4.0.0",
  "private": true,
  "main": "bin/build/server.bundle.js",
  "description": "ZenexInt.com",
  "scripts": {
    "watch": "webpack -d -w --env.development",
    "build": "webpack --config webpack.config.js"
  },
  "author": "michaelmickler <michael.mickler@yahoo.com>",
  "devDependencies": {
    "@types/node": "^14.14.20",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "@types/react-router": "^5.1.10",
    "@webpack-cli/generators": "^2.0.0",
    "cli": "^1.0.1",
    "source-map-loader": "^2.0.0",
    "ts-loader": "^8.0.14",
    "typescript": "^4.1.3",
    "webpack": "^5.35.0",
    "webpack-cli": "^4.6.0",
    "webpack-dev-server": "^3.11.2"
  },
  "dependencies": {
    "antd": "^4.10.0",
    "axios": "^0.21.1",
    "bcryptjs": "^2.4.3",
    "body-parser": "^1.19.0",
    "chokidar": "^3.5.1",
    "client-sessions": "^0.8.0",
    "cookie-parser": "^1.4.5",
    "express": "^4.17.1",
    "jsonwebtoken": "^8.5.1",
    "lodash": "^4.17.21",
    "mongodb": "^3.6.3",
    "mongoose": "^5.11.10",
    "nodemailer": "^6.4.17",
    "nodemailer-smtp-transport": "^2.7.4",
    "pug": "^3.0.2",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-google-recaptcha": "^2.1.0",
    "react-magnifier": "^3.0.4",
    "react-redux": "^7.2.2",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "redux": "^4.0.5",
    "redux-thunk": "^2.3.0"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/michaelmickler/Zenex.git"
  },
  "keywords": [],
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/michaelmickler/Zenex/issues"
  },
  "homepage": "https://github.com/michaelmickler/Zenex#readme"
}
我试过做一个:
npm安装-g用于网页包和网页包cli
我还删除了全局版本并在本地安装

我知道这是很快的事情,但我已经试了三天找到正确的组合


非常感谢您提供的任何帮助

使用npm运行:
npm安装
->
npm运行构建
我打开了一罐新的蠕虫。
const fs = require("fs");
const path = require("path");
const webpack = require('webpack');

const globalConfig = env => ({
    resolve: { extensions: [",", ".ts", ".tsx", ".js"] },
    module: {
        rules: [
            { test: /\.tsx?$/, exclude: /node_modules/, loader: 'ts-loader' },
            { test: /\.js$/, loader: "source-map-loader" },
        ]
    },
    plugins: [new webpack.optimize.ModuleConcatenationPlugin()],
    devtool: env.production ? 'none' : 'source-map',
});

const nodeConfig = env => ({
    target: 'node',
    node: {
        console: false,
        global: false,
        process: false,
        Buffer: false,
        __filename: false,
        __dirname: false 
    },
    externals: fs.readdirSync("node_modules").reduce(function (acc, mod) {
        if (mod === ".bin") { return acc; }
        acc[mod] = "commonjs " + mod;
        return acc;
    }, {}),
});

module.exports = env => [{
    ...globalConfig(env),
    entry: { client: './src/client/index.tsx', },
    output: {
        path: path.join(__dirname, 'public', 'build'),
        publicPath: "/build/",
        chunkFilename: "[name]." + (env.production ? "[contenthash]." : "") + "bundle.js",
        filename: "[name].bundle.js"
    },
}, {
    ...globalConfig(env),
    ...nodeConfig(env),
    entry: { server: './src/server/index.tsx', },
    output: {
        path: path.join(__dirname, 'bin', 'build'),
        filename: '[name].bundle.js',
    },
}];