在命令行中，当我尝试使用以下命令执行“npm run dev”时，Web包抛出以下错误：
"dev": "npm-run-all -p devFast buildWatch",
"devFast": "webpack serve",
"buildWatch": "webpack --watch",
"build": "webpack",
错误：
PS C:\\wamp64\\www\\workshop_01\\wp-content\\themes\\workshop_01> npm run dev
> [email protected] dev C:\\wamp64\\www\\workshop_01\\wp-content\\themes\\workshop_01
> npm-run-all -p devFast buildWatch
> [email protected] devFast C:\\wamp64\\www\\workshop_01\\wp-content\\themes\\workshop_01
> webpack serve
> [email protected] buildWatch C:\\wamp64\\www\\workshop_01\\wp-content\\themes\\workshop_01
> webpack --watch
[webpack-cli] Failed to load \'C:\\wamp64\\www\\workshop_01\\wp-content\\themes\\workshop_01\\webpack.config.js\' config
[webpack-cli] TypeError: ManifestPlugin is not a constructor
at Object.<anonymous> (C:\\wamp64\\www\\workshop_01\\wp-content\\themes\\workshop_01\\webpack.config.js:124:115)
at Module._compile (C:\\wamp64\\www\\workshop_01\\wp-content\\themes\\workshop_01\\node_modules\\v8-compile-cache\\v8-compile-cache.js:192:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1097:10)
at Module.load (internal/modules/cjs/loader.js:933:32)
at Function.Module._load (internal/modules/cjs/loader.js:774:14)
at Module.require (internal/modules/cjs/loader.js:957:19)
at require (C:\\wamp64\\www\\workshop_01\\wp-content\\themes\\workshop_01\\node_modules\\v8-compile-cache\\v8-compile-cache.js:159:20)
at WebpackCLI.tryRequireThenImport (C:\\wamp64\\www\\workshop_01\\wp-content\\themes\\workshop_01\\node_modules\\webpack-cli\\lib\\webpack-cli.js:32:22)
at loadConfig (C:\\wamp64\\www\\workshop_01\\wp-content\\themes\\workshop_01\\node_modules\\webpack-cli\\lib\\webpack-cli.js:1536:38)
at WebpackCLI.resolveConfig (C:\\wamp64\\www\\workshop_01\\wp-content\\themes\\workshop_01\\node_modules\\webpack-cli\\lib\\webpack-cli.js:1639:44)
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] buildWatch: `webpack --watch`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] buildWatch script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\\Users\\BudWiser\\AppData\\Roaming\\npm-cache\\_logs\\2021-06-13T09_23_22_025Z-debug.log
ERROR: "buildWatch" exited with 2.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev: `npm-run-all -p devFast buildWatch`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
包装。json
{
"name": "workshop_01",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "npm-run-all -p devFast buildWatch",
"devFast": "webpack serve",
"buildWatch": "webpack --watch",
"build": "webpack",
"test": "echo \\"Error: no test specified\\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"@babel/core": "^7.14.5",
"@babel/preset-env": "^7.14.5",
"@babel/preset-react": "^7.14.5",
"@glidejs/glide": "^3.4.1",
"autoprefixer": "^10.2.6",
"axios": "^0.21.1",
"babel-loader": "^8.2.2",
"clean-webpack-plugin": "^4.0.0-alpha.0",
"css-loader": "^5.2.6",
"cssnano": "^5.0.6",
"fs-extra": "^10.0.0",
"jquery": "^3.6.0",
"mini-css-extract-plugin": "^1.6.0",
"normalize.css": "^8.0.1",
"npm-run-all": "^4.1.5",
"postcss-color-function": "^4.1.0",
"postcss-hexrgba": "^2.0.1",
"postcss-import": "^14.0.2",
"postcss-loader": "^6.1.0",
"postcss-mixins": "^8.1.0",
"postcss-nested": "^5.0.5",
"postcss-simple-vars": "^6.0.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"style-loader": "^2.0.0",
"webpack": "^5.38.1",
"webpack-cli": "^4.7.2",
"webpack-dev-server": "^3.11.2",
"webpack-manifest-plugin": "^3.1.1"
}
}
网页包。配置。js公司
/*
SUPER IMPORTANT: This config assumes your theme folder is named
exactly \'fictional-university-theme\' and that you have a folder
inside it named \'bundled-assets\' - If you\'d like to adapt this
config to work with your own custom folder structure and names
be sure to adjust the publicPath value on line #116. You do NOT
need to update any of the other publicPath settings in this file,
only the one on line #116.
*/
const currentTask = process.env.npm_lifecycle_event
const path = require("path")
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const { CleanWebpackPlugin } = require("clean-webpack-plugin")
const ManifestPlugin = require("webpack-manifest-plugin")
const fse = require("fs-extra")
const postCSSPlugins = [require("postcss-import"), require("postcss-mixins"), require("postcss-simple-vars"), require("postcss-nested"), require("postcss-hexrgba"), require("postcss-color-function"), require("autoprefixer")]
class RunAfterCompile {
apply(compiler) {
compiler.hooks.done.tap("Update functions.php", function () {
// update functions php here
const manifest = fse.readJsonSync("./bundled-assets/manifest.json")
fse.readFile("./functions.php", "utf8", function (err, data) {
if (err) {
console.log(err)
}
const scriptsRegEx = new RegExp("/bundled-assets/scripts.+?\'", "g")
const vendorsRegEx = new RegExp("/bundled-assets/vendors.+?\'", "g")
const cssRegEx = new RegExp("/bundled-assets/styles.+?\'", "g")
let result = data.replace(scriptsRegEx, `/bundled-assets/${manifest["scripts.js"]}\'`).replace(vendorsRegEx, `/bundled-assets/${manifest["vendors~scripts.js"]}\'`).replace(cssRegEx, `/bundled-assets/${manifest["scripts.css"]}\'`)
fse.writeFile("./functions.php", result, "utf8", function (err) {
if (err) return console.log(err)
})
})
})
}
}
let cssConfig = {
test: /\\.css$/i,
use: ["css-loader?url=false", { loader: "postcss-loader", options: { plugins: postCSSPlugins } }]
}
let config = {
entry: {
scripts: "./js/scripts.js"
},
plugins: [],
module: {
rules: [
cssConfig,
{
test: /\\.js$/,
exclude: /(node_modules)/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-react", ["@babel/preset-env", { targets: { node: "12" } }]]
}
}
}
]
}
}
if (currentTask == "devFast") {
config.devtool = "source-map"
cssConfig.use.unshift("style-loader")
config.output = {
filename: "bundled.js",
publicPath: "http://localhost:3000/"
}
config.devServer = {
before: function (app, server) {
/*
If you want the browser to also perform a traditional refresh
after a save to a JS file you can modify the line directly
below this comment to look like this instead. I\'m using this approach
instead of just disabling Hot Module Replacement beacuse this way our
CSS updates can still happen immediately without a page refresh.
If you\'re using a slower computer and the new bundle is not ready
by the time this is reloading the browser you can always just set the
"hot" property a few lines below this to false instead of true. That
will work on all computers and the only trade off is the browser will
perform a traditional refresh even for CSS changes as well.
*/
// server._watch(["./**/*.php", "./**/*.js"])
server._watch(["./**/*.php", "!./functions.php"])
},
public: "http://localhost:3000",
publicPath: "http://localhost:3000/",
disableHostCheck: true,
contentBase: path.join(__dirname),
contentBasePublicPath: "http://localhost:3000/",
hot: true,
port: 3000,
headers: {
"Access-Control-Allow-Origin": "*"
}
}
config.mode = "development"
}
if (currentTask == "build" || currentTask == "buildWatch") {
cssConfig.use.unshift(MiniCssExtractPlugin.loader)
postCSSPlugins.push(require("cssnano"))
config.output = {
publicPath: "/wp-content/themes/workshop_01/bundled-assets/",
filename: "[name].[chunkhash].js",
chunkFilename: "[name].[chunkhash].js",
path: path.resolve(__dirname, "bundled-assets")
}
config.mode = "production"
config.optimization = {
splitChunks: { chunks: "all" }
}
config.plugins.push(new CleanWebpackPlugin(), new MiniCssExtractPlugin({ filename: "styles.[chunkhash].css" }), new ManifestPlugin({ publicPath: "" }), new RunAfterCompile())
}
module.exports = config
脚本。js公司
import "../css/style.css"
// Allow new JS and CSS to load in browser without a traditional page refresh
if (module.hot) {
module.hot.accept()
}
当我键入命令时，npm运行devFast，这将成功编译。
有人知道问题出在哪里吗？我可以看到，有一个问题与网页中的配置有关。配置。js，但弄不明白这是什么意思。
我试图搜索这个特定错误，但没有找到任何与此问题密切相关的内容。。。
最合适的回答,由SO网友:Fabian Mossberg 整理而成
The error you get is:
[webpack-cli] TypeError: ManifestPlugin is not a constructor
You are trying to load weback-manifest-plugin it like this:
const ManifestPlugin = require("webpack-manifest-plugin")
How it should be loaded
Looking at the documentation for webpack-manifest-plugin, it should be loaded like this:
const { WebpackManifestPlugin } = require(\'webpack-manifest-plugin\');
So change that row, and then also replace:
new ManifestPlugin({ publicPath: "" })
with:
new WebpackManifestPlugin({ publicPath: "" })
Now it should work!
The bigger problem
I see that you are loading everything as dependencies, while most of them should be loaded as devDependencies.
A dependency is something that will be bundled in your code, and loaded by the browser who visits your website.
A dev dependency is something that you are using in your build process, and it\'s not being bundled with the JS that ends up on your website.
Think of devDependencies as software tools you use to build the website. Almost the same way as VS Code or whatever editor you are using. It\'s software needed for the project, but every visitor to your website does not need to download VS Code to their computer just to view your website.
These are some of the libraries that should be devDependencies:
@babel/core@babel/preset-env@babel/preset-reactautoprefixer
Most of them have this written in the documentation. See:
https://github.com/postcss/autoprefixer#using-environment-variables-to-support-css-grid-prefixes-in-create-react-app
The installation instructions say:
npm install autoprefixer@latest cross-env --save-dev
The --save-dev flag is what puts it in devDependencies rather than dependencies. This will have a big effect on the bundle size when you are building the project.
Read more on npmjs.com, about dependencies and devDependencies.
The other big problem
You are loading things such as axios, jquery, normalize.css. When you bundle them like this, WordPress is unaware they they are bundled, and if you are using a plugin that also needs jquery, that plugin will load jquery one extra time. This can lead to errors for the user.
Instead you should use wp_enqueue_script for anything that WordPress should be aware of.
By using this function, you can tell WordPress what version of a dependency you are loading, and other scripts that might be depending on that library can have that as a dependancy, making sure things load in the right way, and only once.
There is a really nice guide on how to include CSS and JavaScript in WordPress. Bundle your own JS and CSS, and enqueue those using the correct WordPress functions, but any external libraries, such as jQuery, axios, glide etc, add them in a way so that WordPress is aware of them.
