Webpack00-环境搭建

一、安装模式

全局安装
项目安装（推荐使用）--不同项目可能采用不同的webpack版本

二、项目安装

1、新项目

初始化

npm init -y

查看webpack版本

npm info webpack

image.png

安装指定版本

npm install [email protected] --save-dev

查看当前版本

npx webpack -v

2、老项目

npm install

如何卸载webpack

npm uninstall webpack

webpack3.x和webpack4.x的差异性不小，使用的时候要特别的注意

三、依赖安装

包括生产依赖和开发依赖

image.png

安装开发依赖包（推荐方式）

npm install --save-dev XXX

安装生成依赖包

npm install --save XXX

安装所有依赖

npm install

安装生产所有依赖

npm install --production

https://jspang.com/posts/2017/09/16/webpack3.html#%E7%AC%AC17%E8%8A%82%EF%BC%9A%E5%AE%9E%E6%88%98%E6%8A%80%E5%B7%A7%EF%BC%9A%E5%BC%80%E5%8F%91%E5%92%8C%E7%94%9F%E4%BA%A7%E5%B9%B6%E8%A1%8C%E8%AE%BE%E7%BD%AE

四、运行命令

image.png

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "server": "webpack-dev-server --open",
    "dev":"export type=dev&&webpack",
    "build": "export type=build&&webpack"
  },

注意：mac电脑多了个&

1、编译命令（本地项目编译）

npx webpack

自动打包监听

npx webpack --watch

开发编译

npm run dev

生产编译

npm run build

2、启动服务

npm run server

我的博客即将同步至腾讯云+社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?invite_code=1x3lusb2gtlct