webpack的最新版本配置流程（小白向，从安装node开始）

最新推荐文章于 2024-04-20 18:55:08 发布

HS779

最新推荐文章于 2024-04-20 18:55:08 发布

阅读量986

点赞数

文章标签： npm web javascript node.js webpack

本文链接：https://blog.csdn.net/m0_50848481/article/details/116422767

版权

本文从零开始，详细介绍了如何配置webpack的最新版本。包括安装node.js，创建webpack项目，初始化配置，本地安装webpack，建立文件目录结构，配置入口与输出，添加样式处理loader（style-loader, css-loader, less-loader）以及图片处理。通过实例展示了如何解决less编译问题和处理图片url。" 112018615,10293914,PyTorch多GPU训练实战：从单卡到多卡,"['PyTorch', '深度学习', '多GPU', '训练技巧']

摘要由CSDN通过智能技术生成

1.首先当然是安装node.js啦（点击此处下载）
奇数版本是开发版本，偶数版本是稳定版本，推荐下载12.x或14.x（文件后缀为msi）。
node安装过程中只需要改下安装路径（当然不改也可以），其余一路next就行。
安装完成之后在DOS中通过node -v来查看，若显示有版本号即成功
在这里插入图片描述
2.创建一个空文件夹(我创建的是webpackdemo)
我这里用的是是vscode，进入创建的文件夹cd .\webpackdemo\。
注意进入vscode时右键以管理员身份运行或在终端中输入以下指令开启管理员权限，不然接下来会报错：

Set-ExecutionPolicy -Scope CurrentUser
RemoteSigned

3 初始化
输入npm init,然后就是当出现package name: (webpackdemo)时输入一下你想写的名字，然后一路enter，文件夹中就会出现一个文件package.json,里面的内容就是刚才你写的配置，name是你设置的其余的是自动生成的。

{
   
  "name": "webpacktest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
   
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

4.安装webpack

全局安装

npm install webpack webpack-cli -g

本地安装

npm install webpack webpack-cli --save-dev

这里由于我们的项目不发布就只进行本地安装，安装完成之后，会多出一个node_modules文件夹和一个package-lock.json文件，同时package.json中会多出webpack和webpack-cli的版本号。

{
   
  "name": "webpacktest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
   
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
   
    "webpack": "^5.36.2"