Javascript 使用Webpack 5(Webpack新手)的正确设置是什么
我正在使用Powershell脚本: creaete.ps1Javascript 使用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
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',
},
}];