入门前端这个职位近三年的时间了,但是脑子里的东西不多也不少,今天就从脑袋里把新版本的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. configure配置安装详解

    使用 ./configure --help 就可以查看到所有的配置选项. 1.--host=HOST指定软件运行的系统平台.如果没有指定,将会运行`config.guess'来检测.--host 指定 ...

  2. tableview setData 设置数据(结构体对象)

    定义设置的对象类型 Q_DECLARE_METATYPE(LISTITEMDATA *) 设置数据类型 LISTITEMDATA *ptask = &(const_cast<LISTIT ...

  3. jdk1.8 对数组及arrays类对数组的操作与增强

    数组的初始化有两种方式 静态初始化: 初始化时由程序员显示置顶每个数组的初始值,由系统决定数组长度.如: int[] a1 = new int[] {1,2,3,4}; 动态初始化:初始化时由程序员只 ...

  4. 网站的Information Architecture--构建一个最优用户体验的site structure

    http://conversionxl.com/website-information-architecture-optimal-user-experience/ 在网站上应该有什么类型的conten ...

  5. SQL Server ->>监控和管理Tempdb

    Tempdb作为一个公共数据库,存储着一些临时的数据.有些是用户自己创建的,有些是SQL Server自己创建的.Tempdb空间被使用的一些常见场景有 用户自定义:临时表和表变量.游标. SQL S ...

  6. 【Leetcode】【Medium】Rotate Image

    You are given an n x n 2D matrix representing an image. Rotate the image by 90 degrees (clockwise). ...

  7. 新款 2018款macbook Pro 装双系统教程

    首个阅读量将破万的文章,感谢支持.防止无良爬虫,开头附上原文链接:http://www.cnblogs.com/xueyudlut/p/7498115.html ------------------- ...

  8. Struts2与Hibernate联合开发步骤

    hibernate与struts2的联合开发步骤: 1. 建立web工程 2. 加入jar包,struts2.hibernate.数据库连接的包 3. 数据表和bean之间的映射,以及相应的映射文件* ...

  9. Architecture Design Process

    Architecture Design Process The architecture design process focuses on the decomposition of a system ...

  10. 四. 引入unittest单元测试框架

    1.   安装 SeleniumIDE(firefox) (1)下载地址:https://addons.mozilla.org/en-US/firefox/addon/selenium-ide/ (2 ...