安装webpack以及webpack-dev-server

旧城等待， 2023-10-18 09:39 113阅读 0赞

### 安装webpack ###

1.安装之前要确保已经安装了最新版的Node.js和NPM

2.首先，创建一个目录，比如demo,然后使用npm初始化配置：

npm init

![Image 1][]![70][]

执行后，会有一系列选项，可以根据自己情况按回车进行确认。

![Image 1][]![70 1][]

完成后会在demo目录生成一个package.json的文件。

3.之后在本地局部安装webpack

npm install webpack --save-dev

![Image 1][]![70 2][]

\--save-dev会作为开发依赖来安装webpack，安装成功后，在package.json中会多一项配置：

"devDependencies": {
        "webpack": "^4.20.2"   
      }

### 安装webpack-dev-server ###

webpack-dev-server可以在开发环境中提供很多服务，比如启动一个服务器、热更新、接口代理等，配置起来也很简单。

npm install webpack-dev-server  --save-dev

![Image 1][]![70 3][]

安装完成后，最终的pakage.json的内容是：

{
      "name": "com.ysh.demo",
      "version": "1.0.0",
      "description": "测试",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "author": "badao",
      "license": "ISC",
      "devDependencies": {
        "webpack": "^4.20.2",
        "webpack-dev-server": "^3.1.9"
      }
    }

如果同上面一样，你的devDependencies中含有webpack和webpack-dev-server，

那么已经安装成功，很快可以启动webpack工程了。

[Image 1]: 
[70]: https://img-blog.csdn.net/20181011132702651?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 1]: https://img-blog.csdn.net/20181011132711901?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 2]: https://img-blog.csdn.net/20181011132730287?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 3]: https://img-blog.csdn.net/20181011132801424?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70