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系统为 ...
随机推荐
- icon-font 字体图标的引用
1.font-class引用 font-class是unicode使用方式的一种变种,主要是解决unicode书写不直观,语意不明确的问题. 与unicode使用方式相比,具有如下特点: 兼容性良好, ...
- shp文件导入mysql5.6.15
百度了一下 方法大致相同,就是提供的资源都缺斤短两还在细节上有差异.所以上传一份正确的. 0.将cygwin1.dll拷贝到system32目录下面1.将shp以及shp的相关文件和DOShere的d ...
- android应用js
http://blog.csdn.net/carson_ho/article/details/64904691 通过 WebViewClient 的方法shouldOverrideUrlLoading ...
- php模拟post提交
<?php $url = "xxxxx"; // 用户名 $loginName = ''; // 密码 $pwd = ''; // service $serviceName ...
- Oracle修改表名的几种方式
因为原来所在表不想被删除,但又需要新建立一个相同表名的表,故先把原来的表的表名更改为另一个临时表名. 查看当前用户下所有的表 select tname from tab where tabtype= ...
- for循环里面的break;和continue;语句
for循环里面的break;和continue;语句 break语句 哇,我已经找到我要的答案了,我不需要进行更多的循环了! 比如,寻找第一个能被5整除的数: for循环中,如果遇见了break语句, ...
- System IPC 与Posix IPC(semaphore信号灯)
POSIX下IPC主要包括三种: posix message queue posix semaphores posix shared memory sysytem v IPC包括: system v ...
- [原]零基础学习视频解码之FFMpeg中比较重要的函数以及数据结构
在正式开始解码练习前先了解下关于FFmpeg中比较重要的函数以及数据结构. 1. 数据结构: (1) AVFormatContext AVFormatContext是一个贯穿始终的数据结构,很多函 ...
- 记一种c++字符串格式化方法
std::string str_fmt(const char * _Format, ...) { std::string _str; va_list marker = NULL; va_start(m ...
- Yii: 扩展CGridView增加导出CSV功能
Yii提供的CGridView组件没有内置数据导出功能,不过我们可以通过扩展该组件来添加该功能. 具体方法如下: 1.首先派生一个子类,添加一个action成员,在该视图的init函数中判断是浏览动作 ...