1.管理员身份运行vscode,避免无权限执行脚本的冲突问题
2.执行命令
(1)npm init
(2)npm install webpack webpack-cli -g
(3)npm install webpack webpack-cli -D
PS D:\Webpack> cd 01webpack
PS D:\Webpack\01webpack> npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
See `npm help init` for definitive documentation on these fields
and exactly what they do.
Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
package name: (01webpack) webpack_test
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to D:\Webpack\01webpack\package.json:
{
"name": "webpack_test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
Is this OK? (yes)
PS D:\Webpack\01webpack> npm i webpack webpack-cli -g
D:\node\node_global\webpack-cli -> D:\node\node_global\node_modules\webpack-cli\bin\cli.js
D:\node\node_global\webpack -> D:\node\node_global\node_modules\webpack\bin\webpack.js
+ webpack@5.48.0
+ webpack-cli@4.7.2
added 88 packages from 132 contributors, removed 331 packages, updated 17 packages and moved 10 packages in 35.193s
PS D:\Webpack\01webpack> npm i webpack webpack-cli -D 193s
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN webpack_test@1.0.0 No description
npm WARN webpack_test@1.0.0 No repository field.
+ webpack-cli@4.7.2
+ webpack@5.48.0
added 121 packages from 157 contributors in 18.049s
PS D:\Webpack\01webpack> npx webpack ./src/index.js -o ./build/built.js --mode development
asset main.js 1.54 KiB [emitted] (name: main)
./src/index.js 347 bytes [built] [code generated]
webpack 5.48.0 compiled successfully in 149 ms
PS D:\Webpack\01webpack>
webpack的打包命令:从 webpack4.0以上版本改变了打包命令
将webpack ./src/main.js ./dist/bundel.js
改成了 npx webpack ./src/index.js -o ./dist --mode development
这篇博客介绍了如何在Visual Studio Code(VSCode)中配置Webpack。首先,需要以管理员身份运行VSCode以避免权限问题。接着,通过npm初始化项目并安装Webpack及webpack-cli,既全局安装也作为开发依赖安装。对于Webpack 4.0以上的版本,打包命令发生了变化,不再直接指定输入和输出路径,而是使用'npx webpack'命令,配合选项指定源文件、输出位置及开发模式。
1374

被折叠的 条评论
为什么被折叠?



