入门前端这个职位近三年的时间了,但是脑子里的东西不多也不少,今天就从脑袋里把新版本的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.jsonscripts中加入两个成员:
   "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打包的更多相关文章

  1. OpenCV3.4.1快速集成到Android studio中,10分钟搞定

    OpenCV3.4.1快速集成到Android studio中,10分钟搞定     转载 https://blog.csdn.net/yu540135101/article/details/8259 ...

  2. 【转】让你10分钟搞定Mac--最简单快速的虚拟安装

    文章出处:让你10分钟搞定Mac--最简单快速的虚拟安装http://bbs.itheima.com/thread-106643-1-1.html (出处: 黑马程序员训练营论坛) 首先说明一下. 第 ...

  3. 10分钟搞定让你困惑的 Jenkins 环境变量

    前言 Jenkins, DevOps 技术栈的核心之一,CI/CD 离不开编写 Pipeline 脚本,上手 Jenkins ,简单查一下文档,你就应该不会被 agent,stages,step 这类 ...

  4. Python基于VS2013 开发环境搭建 Hello World 10分钟搞定

    1.先下载Python 安装 Next ->安装完成 2.以前安装过VS2013 打开VS2013 文件->新建项目 (此时如果没有Python Application,请点击里面的安装插 ...

  5. 10分钟搞定 Java 并发队列好吗?好的

    | 好看请赞,养成习惯 你有一个思想,我有一个思想,我们交换后,一个人就有两个思想 If you can NOT explain it simply, you do NOT understand it ...

  6. 【前端知识体系-JS相关】10分钟搞定JavaScript正则表达式高频考点

    1.正则表达式基础 1.1 创建正则表达式 1.1.1 使用一个正则表达式字面量 const regex = /^[a-zA-Z]+[0-9]*\W?_$/gi; 1.1.2 调用RegExp对象的构 ...

  7. 10分钟搞定nginx实现负载均衡

    10.1 负载均衡的概念 对用户请求的数据进行调度的作用 对用户访问的请求网站可以进行压力的分担 10.2 常见的代理方式 10.2.1 正向代理 10.2.2 反向代理 10.3 负载均衡的部署环节 ...

  8. 10分钟搞定react-router

    1.路由的安装: $ npm install -S react-router 2.引入路由文件 import {Router, Route, browserHistory} from 'react-r ...

  9. 转载-30分钟搞定后台登录界面(103个后台PSD源文件、素材网站)

    原文:30分钟搞定后台登录界面(103个后台PSD源文件.素材网站)   目录 一.界面预览 二.PSD源文件预览 三.工具分享 四.资源说明 五.素材下载网站 六.下载 去年八月时要做一个OA系统为 ...

随机推荐

  1. icon-font 字体图标的引用

    1.font-class引用 font-class是unicode使用方式的一种变种,主要是解决unicode书写不直观,语意不明确的问题. 与unicode使用方式相比,具有如下特点: 兼容性良好, ...

  2. shp文件导入mysql5.6.15

    百度了一下 方法大致相同,就是提供的资源都缺斤短两还在细节上有差异.所以上传一份正确的. 0.将cygwin1.dll拷贝到system32目录下面1.将shp以及shp的相关文件和DOShere的d ...

  3. android应用js

    http://blog.csdn.net/carson_ho/article/details/64904691 通过 WebViewClient 的方法shouldOverrideUrlLoading ...

  4. php模拟post提交

    <?php $url = "xxxxx"; // 用户名 $loginName = ''; // 密码 $pwd = ''; // service $serviceName ...

  5. Oracle修改表名的几种方式

    因为原来所在表不想被删除,但又需要新建立一个相同表名的表,故先把原来的表的表名更改为另一个临时表名. 查看当前用户下所有的表  select tname from tab where tabtype= ...

  6. for循环里面的break;和continue;语句

    for循环里面的break;和continue;语句 break语句 哇,我已经找到我要的答案了,我不需要进行更多的循环了! 比如,寻找第一个能被5整除的数: for循环中,如果遇见了break语句, ...

  7. System IPC 与Posix IPC(semaphore信号灯)

    POSIX下IPC主要包括三种: posix message queue posix semaphores posix shared memory sysytem v IPC包括: system v ...

  8. [原]零基础学习视频解码之FFMpeg中比较重要的函数以及数据结构

    在正式开始解码练习前先了解下关于FFmpeg中比较重要的函数以及数据结构. 1. 数据结构:  (1) AVFormatContext  AVFormatContext是一个贯穿始终的数据结构,很多函 ...

  9. 记一种c++字符串格式化方法

    std::string str_fmt(const char * _Format, ...) { std::string _str; va_list marker = NULL; va_start(m ...

  10. Yii: 扩展CGridView增加导出CSV功能

    Yii提供的CGridView组件没有内置数据导出功能,不过我们可以通过扩展该组件来添加该功能. 具体方法如下: 1.首先派生一个子类,添加一个action成员,在该视图的init函数中判断是浏览动作 ...