10分钟搞定webpack打包
入门前端这个职位近三年的时间了,但是脑子里的东西不多也不少,今天就从脑袋里把新版本的webpack打包过程拔出来给大家鲁一遍,就算帮助那些小白了,废话不多说,开始鲁起来,大家跟着我一起撸。。。
首先,去官网下载node.js 地址自己找度娘去,别那么懒!!!
一,我们在合适的位置创建一个文件夹,比如桌面,命名webapp,然后进入这个文件夹按着shift+鼠标右键,点击 “在此处打开命令窗口”
初始化项目,输入:
npm init
一路按enter键即可
二, 接下来安装webpack
(1) 全局安装webpack ,我们在命令行输入: npm install -g webpack
(2) 通常我们会将webpack安装到项目依赖,这样就可以使用本地版本的webpack,我们在命令行输入: npm install webpack --save-dev
三,安装 webpack-cli
npm install -g webpack-cli
四 ,设置模式 webpack --mode development 五,创建入口文件 根目录下创建src,并添加入口index.js文件,必须命名index.js,否侧会报错 六,配置
我们在package.json
中scripts
中加入两个成员:
"dev":"webpack --mode development",
"build":"webpack --mode production"
全局安装webpack-cli
npm -i webpack-cli -g 或者 npm install webpack-cli
本地安装:
npm install webpack -D 七 , 打包 npm run build
//接着输入 webpack-cli 或者 webpack-command 即可
在项目中是不是生成了dist/main.js
将文件引入index。html看看效果吧
10分钟搞定webpack打包的更多相关文章
- OpenCV3.4.1快速集成到Android studio中,10分钟搞定
OpenCV3.4.1快速集成到Android studio中,10分钟搞定 转载 https://blog.csdn.net/yu540135101/article/details/8259 ...
- 【转】让你10分钟搞定Mac--最简单快速的虚拟安装
文章出处:让你10分钟搞定Mac--最简单快速的虚拟安装http://bbs.itheima.com/thread-106643-1-1.html (出处: 黑马程序员训练营论坛) 首先说明一下. 第 ...
- 10分钟搞定让你困惑的 Jenkins 环境变量
前言 Jenkins, DevOps 技术栈的核心之一,CI/CD 离不开编写 Pipeline 脚本,上手 Jenkins ,简单查一下文档,你就应该不会被 agent,stages,step 这类 ...
- Python基于VS2013 开发环境搭建 Hello World 10分钟搞定
1.先下载Python 安装 Next ->安装完成 2.以前安装过VS2013 打开VS2013 文件->新建项目 (此时如果没有Python Application,请点击里面的安装插 ...
- 10分钟搞定 Java 并发队列好吗?好的
| 好看请赞,养成习惯 你有一个思想,我有一个思想,我们交换后,一个人就有两个思想 If you can NOT explain it simply, you do NOT understand it ...
- 【前端知识体系-JS相关】10分钟搞定JavaScript正则表达式高频考点
1.正则表达式基础 1.1 创建正则表达式 1.1.1 使用一个正则表达式字面量 const regex = /^[a-zA-Z]+[0-9]*\W?_$/gi; 1.1.2 调用RegExp对象的构 ...
- 10分钟搞定nginx实现负载均衡
10.1 负载均衡的概念 对用户请求的数据进行调度的作用 对用户访问的请求网站可以进行压力的分担 10.2 常见的代理方式 10.2.1 正向代理 10.2.2 反向代理 10.3 负载均衡的部署环节 ...
- 10分钟搞定react-router
1.路由的安装: $ npm install -S react-router 2.引入路由文件 import {Router, Route, browserHistory} from 'react-r ...
- 转载-30分钟搞定后台登录界面(103个后台PSD源文件、素材网站)
原文:30分钟搞定后台登录界面(103个后台PSD源文件.素材网站) 目录 一.界面预览 二.PSD源文件预览 三.工具分享 四.资源说明 五.素材下载网站 六.下载 去年八月时要做一个OA系统为 ...
随机推荐
- 第四次作业——第一次scrum冲刺
1.小组第一次冲刺任务 对Github上的HUSTOJ开源项目进行Fork,搭建基本环境 2.用户需求 (1)部分基本功能显示在首页 (2)能够提交题目并判题,并对自己所提交的题目正确性进行反馈,能够 ...
- spark出现task不能序列化错误的解决方法
应用场景:使用JavaHiveContext执行SQL之后,希望能得到其字段名及相应的值,但却出现"Caused by: java.io.NotSerializableException: ...
- androidcookie
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) { webSettings.setAllowFileAccessFrom ...
- 调用Linux的busybox,通过linux命令来获取AndRoidIP
//根据busybox获取本地Mac public static String getLocalMacAddressFromBusybox(){ String result = "" ...
- SVN 代码托管
1.安装服务 使用yum安装subversion,简单.不繁琐. 1 yum install -y subversion 2.创建版本库 1 2 mkidr /svn/obj ...
- C++ 构造转换函数和强制转换函数
http://blog.csdn.net/chenyiming_1990/article/details/8862497 1.对于系统的预定义基本类型数据,C++提供了两种类型转换方式:隐式类型转换和 ...
- ZT 3.1 依赖倒置原则的定义
设计模式精解-GoF 23 种设计模式解析附 C++实现源码http://www.mscenter.edu.cn/blog/k_eckelP58 Template 模式获得一种反向控制结构效果,这也是 ...
- 深入理解JNI 邓平凡
深入理解JNI 邓凡平 1)使用的时候 :加载libmedia_jni.so 并接着调用JNI_Onload->register_android_media_MediaScanner动态注册JN ...
- Android MVP 简析
原地址:https://segmentfault.com/a/1190000003927200 在Android中应用MVP模式的原因与方法的简析,写的简单易懂.
- 解决Ubuntu启动错误——kernel panic not syncing vfs unable to mount root fs on unknown-block 0 0 – error
最近在倒腾Ubuntu,然后想着怎么美化一下界面,于是照着网上的教程整了一下Flatabulous这个软件,然后好像/boot就满了.关机之后再开机就出现了如题所述的错误,无法开机,也无法进入reco ...