入门前端这个职位近三年的时间了,但是脑子里的东西不多也不少,今天就从脑袋里把新版本的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. php遍历数组赋值

    <?php $arr=array( array("num"=>100,"name"=>"Liuxy","scor ...

  2. Virtualenv-windows

    1.下载 pip3 install virtualenv 2.创建虚拟化环境 3. 进入虚拟化目录 4.推出虚拟化环境 5.指定python版本 二.virtualenvwrapper的使用 1.下载 ...

  3. M-wordL-图

    典型的需要使用图模型 将start 和 end 以及字典一同构建成图,然后探究从start到end的最短路径

  4. QT的mouseMoveEvent事件失效

    void TalkWindow::enterEvent(QEvent *event){ grabMouse();}void TalkWindow::leaveEvent(QResizeEvent *e ...

  5. ESP32D0WDQ6 灯泡 黑客

    这个黑客表现得如何聪明 灯泡 可能泄漏您的Wi-Fi密码O网页链接破解者博客详文 Pwn the LIFX Mini white O网页链接ESP32D0WDQ6, a SoC from ESPRES ...

  6. July 20th 2017 Week 29th Thursday

    The darkness is no darkness with you. 有了你,黑暗将不再是黑暗. The darkness will not be driven out if we failed ...

  7. Go语言(二) 继承和重载

    继承 package main import "fmt" type Skills []string type person struct { name string age int ...

  8. some language grammars

    ANSI C grammar Python grammar 怎么识别LL(1) LR(0) SLR(1) 等文法,一个不错的解答. http://stackoverflow.com/questions ...

  9. 简易log4j 父logger和子logger

    log4j 父logger和子logger         定义子logger其目的就是能够在某一范围内(某一个class或者某一个package)下面,日志的输出方式与其他地方的日志输出方式不同. ...

  10. CF Gym101933K King's Colors

    题目分析 题目要求在树上涂上恰好\(K\)种颜色的方案数. 设\(f(k)\)表示恰好涂上\(k\)种颜色的方案数(答案即为\(f(K)\)). 设\(g(k)\)表示至多涂上\(k\)种颜色的方案数 ...