Webpack00-环境搭建

专注APP开发

发布于 2019-11-07 16:53:18

5380

文章被收录于专栏：移动大前端移动大前端

一、安装模式

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

二、项目安装

1、新项目

初始化

npm init -y

查看webpack版本

npm info webpack

image.png

安装指定版本

npm install webpack@3.12.0 --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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

javascript

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

javascript

登录后参与评论

0 条评论

热度

Webpack00-环境搭建

Webpack00-环境搭建

一、安装模式

二、项目安装

1、新项目

2、老项目

如何卸载webpack

三、依赖安装

四、运行命令

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

2、启动服务

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐