Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >Webpack00-环境搭建

Webpack00-环境搭建

作者头像
专注APP开发
发布于 2019-11-07 08:53:18
发布于 2019-11-07 08:53:18
45500
代码可运行
举报
文章被收录于专栏:移动大前端移动大前端
运行总次数:0
代码可运行

一、安装模式

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

二、项目安装

1、新项目

初始化

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
npm init -y

查看webpack版本

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
npm info webpack

image.png

安装指定版本

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
npm install webpack@3.12.0 --save-dev

查看当前版本

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
npx webpack -v
2、老项目
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
npm install

如何卸载webpack

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
npm uninstall webpack

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

三、依赖安装

包括生产依赖和开发依赖

image.png

安装开发依赖包(推荐方式)

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
npm install --save-dev XXX

安装生成依赖包

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
npm install --save XXX

安装所有依赖

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
npm install

安装生产所有依赖

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
  "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、编译命令(本地项目编译)
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
npx webpack

自动打包监听

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
npx webpack --watch

开发编译

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
npm run dev

生产编译

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
npm run build
2、启动服务
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
npm run server
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

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

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

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

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Webpack03-前端服务配置及热更新
https://jspang.com/posts/2017/09/16/webpack3.html#%E7%AC%AC04%E8%8A%82%EF%BC%9A%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6%EF%BC%9A-%E6%9C%8D%E5%8A%A1%E5%92%8C%E7%83%AD%E6%9B%B4%E6%96%B0
专注APP开发
2019/11/07
4360
Webpack03-前端服务配置及热更新
Webpack05-js压缩插件uglify的使用
开发环境:development(不需要进行js压缩,不方便调试) 生产环境:production(正式发布上线,需要继续压缩)
专注APP开发
2019/11/07
2.3K0
Webpack05-js压缩插件uglify的使用
Webpack04-Loader之CSS打包进JS
可以把SASS文件的写法转换成CSS,而不在使用其他转换工具。 可以把ES6或者ES7的代码,转换成大多浏览器兼容的JS代码。 可以把React中的JSX转换成JavaScript代码。
专注APP开发
2019/11/07
1.1K0
Webpack04-Loader之CSS打包进JS
Webpack02-配置文件的使用
源码:https://gitee.com/andli/webpack_demo.git
专注APP开发
2019/11/07
5000
Webpack02-配置文件的使用
Webpack01-简单入门之项目打包
为了方便测试,建立entrey.js index.html bundle.js等文件
专注APP开发
2019/11/07
4430
Webpack01-简单入门之项目打包
Scrapy笔记三 自动多网页爬取-本wordpress博客所有文章
学习自http://blog.csdn.net/u012150179/article/details/34486677
十四君
2019/11/27
8020
【答案&解析】Java工程师100道考题 | 超过60分的不到10%!
小傅哥,你的100道Java考题,我只考了16分,是不是没救了!给我个答案吧!那么鉴于不少小伙伴已经考完了,那么小傅哥就做一个考题解析,方便读者可以针对自己的问题进行补充学习。
小傅哥
2022/12/13
2.4K0
【答案&解析】Java工程师100道考题 | 超过60分的不到10%!
学习小组Day5-bubble
bubble
2023/11/03
2350
Python url编码以及反编码
有时候通过浏览器传递过来的数据,经过url编码之后,就无法直接处理了。 需要进行反编码之后才能获取正确的结果。
Devops海洋的渔夫
2019/05/31
2.4K0
Java Web开发学习之路2012版
2011年自己根据当时实习的经验和大学学习Java的感受,写了一篇《Java Web学习之路》,地址是:http://blog.renren.com/blog/233130702/714982734。实习了一年,工作了一年,应该说从7月1日开始是自己工作的第三年了。最近有同学刚加入公司,然后是做Java开发的。当然目前Java企业开发大多数也是B/S开发模式,所以也可以说是Java Web开发。正好今天坐地铁看到公司5楼出来一个小mm拿着一本《Java Web开发案例》的书。然后我的同学也让我写一个学习计划
八哥
2018/01/18
8350
Java Web开发学习之路2012版
python处理xps文件_xps/pdf/png/json转换
The unit for all width, height, length, etc, is in “Form Unit”. If you need pixels value, you can use the converter below:
全栈程序员站长
2022/08/19
5950
01 Maven构建的项目中,把.xml等配置文件添加到编译目录
Maven构建的项目,默认只会把src/main/resources目录下的xml配置文件添加到编译目录。 如果需要把src/main/java目录下的xml配置文件也添加到编译目录,需要在pom.xml中添加如下配置: <build> <resources> <resource> <directory>src/main/java</directory> <includes>
nnngu
2018/03/15
1.2K0
轨到轨运放(TI,AD)
意思相同。从轨到轨(Rail to Rail)运算放大器的工作特征来看,也称为满摆幅放大器。
云深无际
2023/02/27
8270
轨到轨运放(TI,AD)
ApacheCN 数据科学/人工智能/机器学习知识树 2019.2
【主页】 apachecn.org 【Github】@ApacheCN 暂时下线: 社区 暂时下线: cwiki 知识库 自媒体平台微博:@ApacheCN 知乎:@ApacheCN CSDN 简书 OSChina 博客园 我们不是 Apache 的官方组织/机构/团体,只是 Apache 技术栈(以及 AI)的爱好者! 合作or侵权,请联系【fonttian】<fonttian@gmail.com> | 请抄送一份到 <apachecn@163.com> 预处理 + [离散化](https://git
ApacheCN_飞龙
2019/02/13
4940
无坑版:Windows10安装Python,配置Python和pip的环境变量。
python安装包可以官网下载:https://www.python.org/downloads/
清菡
2022/06/21
5.6K0
无坑版:Windows10安装Python,配置Python和pip的环境变量。
推荐几个油猴脚本
油猴,也就是 Tampermonkey 是我每一台电脑都会安装的东西,也是我会给熟人介绍和安装的东西。没什么好说的,就是好用。
伪君子
2018/11/08
17.4K0
85-R分享05-用reveal.js把你的Rmd变成ppt
你可以把它理解成类似[[82-R分享04-用模板美化你的Rmd输出]] 中的类似的模板,只不过这个模板是输出成类似ppt 效果的html。
北野茶缸子
2022/02/09
1.2K0
85-R分享05-用reveal.js把你的Rmd变成ppt
Spring Cloud Tencent 1.7 版本最新发布
导语 Spring Cloud Tencent 1.7 版本现已发布,支持 Spring Cloud Hoxton、2020、2021 版。 1 Part.1 发布项列表 1.7.1-Hoxton.SR12 1.7.0-2020.0.5 1.7.0-2021.0.3 2 Part.2 版本号说明 Spring Cloud Tencent 的版本号由两部分组成,前半段为 Spring Cloud Tencent 自身迭代的版本号,后半段为 Spring Cloud Tencent 针对特定版本的 Spring
腾讯云中间件团队
2022/09/14
5140
Spring Cloud Tencent 1.7 版本最新发布
利用qq钓鱼或者定位女友是否回家
前言 随着手机开始普及,现在几乎是人手一部手机,而且qq是必装的app,这正好给了骗子可乘之机,根据你的爱好,给你推送相应的内容,让你防不胜防。 看看下面的聊天 哈哈此时我们看看后台(后台代码看地址定位章节) 哈哈,已经得到女友的ip了,现在查询一下地址在哪里?是不是你老婆不在加班啊!!! 第一章 效果展示 当你在qq群或者好友中发送一条网址,qq会提示一个问号 群友或者朋友肯定会犹豫是否要点击 但是如果你qq群或者好友发送这种消息给你,你肯定会点击
FB客服
2018/02/28
9060
利用qq钓鱼或者定位女友是否回家
看了一下午ECharts的文档,发现他们官方有一个bug和n处语病。
https://echarts.apache.org/zh/tutorial.html#ECharts%205%20%E6%96%B0%E7%89%B9%E6%80%A7
拿我格子衫来
2022/01/24
2420
看了一下午ECharts的文档,发现他们官方有一个bug和n处语病。
相关推荐
Webpack03-前端服务配置及热更新
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文