vscode中配置webpack

这篇博客介绍了如何在Visual Studio Code(VSCode)中配置Webpack。首先,需要以管理员身份运行VSCode以避免权限问题。接着,通过npm初始化项目并安装Webpack及webpack-cli,既全局安装也作为开发依赖安装。对于Webpack 4.0以上的版本,打包命令发生了变化,不再直接指定输入和输出路径,而是使用'npx webpack'命令,配合选项指定源文件、输出位置及开发模式。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值