入门前端这个职位近三年的时间了,但是脑子里的东西不多也不少,今天就从脑袋里把新版本的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. 微信小程序开发4-JSON

    1.JSON是JavaScript语法的子集 2.JSON的语法规则 数据在名称/值对中 数据由逗号分隔 大括号保存对象 中括号保存数组 3.JSON 值可以是: 数字(整数或浮点数) 字符串(在双引 ...

  2. 目前比较全的CSS重设(reset)方法总结(转)

    原文地址 在当今网页设计/开发实践中,使用CSS来为语义化的(X)HTML标记添加样式风格是重要的关键.在设计师们的梦想中都存在着这样的一个完美世界:所有的浏览器都能够理解和适用多有CSS规则,并且呈 ...

  3. skype for business server 2015 报错“不可用:试图检查架构状态时发生故障,请确保能够访问Active Direcotry”

    报错“不可用:试图检查架构状态时发生故障,请确保能够访问Active Direcotry” 遇到错误后就上网查询了下,有的人说用下面方法解决了 用域的administrator 登入就可以了(之前是用 ...

  4. linux防火墙放行了端口,但是仍然访问不到

    我们的防火墙默认规则如下: 如果防火墙放行了端口,但是仍然访问不到的话,可能是因为添加规则的时候,用的是iptables -A 选项,这样,增加的规则会排列在 第6条 规则后面,虽然service i ...

  5. QT的组件布局

    在QT的IDE下,编写一个自定义布局. #include<QApplication> #include<QWidget> #include<QSpinBox> #i ...

  6. My SQL 和SQL Server区别

    MySQL 与SQL Server区别 今天了解了二者区别,整理网上查阅资料,总结列举如下: MSSQL == SQL server 是sybase与微软合作时期的产物. 对于程序开发人员而言,目前使 ...

  7. EJB 3.1 @Startup @Singleton sequence

    The annotation javax.ejb.Startup (@Startup) is used to mark an EJB so to make the EJB can be brought ...

  8. July 18th 2017 Week 29th Tuesday

    My heart is stronger now that you are in it. 我的心里有了你,从此变得更强大. You will no longer feel lonely if ther ...

  9. [EffectiveC++]item34:区分接口继承和实现继承

    [EffectiveC++]item34:区分接口继承和实现继承

  10. linux shell数据重定向

    标准输入 (stdin) :代码为 0 ,使用 < 或 << :标准输出 (stdout):代码为 1 ,使用 > 或 >> :标准错误输出(stderr):代码为 ...