webpack4快速上手
1.在项目根目录cnpm init -y初始化。生成package.json文件
2.在项目里面使用cnpm安装webpack
3.需要在根目录下新建webpack.config.js文件(在其里面配置暴露对象)
module.exports = {
mode:'development'
}
4.在根目录下新建src/index.js文件(因为此时运行会提示根目录下差个src文件下的index.js文件。默认打包入口文件)
最基本的webpack就搭建好了,此时是0配置,
简单配置一下:
实现自动打包编译
1.安装webpack-dev-server
2.配置(package.json文件配置)
--open 自动打开浏览器
--port 3000 指定默认端口
--host 指定域名
--progress 打包进度
--compress 压缩
打包好的main.js文件会托管于根目录下,但我们看不到,在内存里面,可以通过域名打印出来
而且这个main.js会自动导入到index。html首页
实现自动跳转到首页
(在内存中也托管一个index.html页面)
1.cnpm安装html-webpack-pluign。
2.在webpack.config.js中配置
此时自动打包编译后就会自动跳转到index首页,实现了和脚手架一样的功能。
webpack4快速上手的更多相关文章
- npm、webpack、vue-cli 快速上手
npm+webpack+vue-cli快速上手 Node.js npm 什么是Node.js 以及npm 简单的来说 Node.js 就是运行在服务端的JavaScript,基于Chrome ...
- 【Python五篇慢慢弹】快速上手学python
快速上手学python 作者:白宁超 2016年10月4日19:59:39 摘要:python语言俨然不算新技术,七八年前甚至更早已有很多人研习,只是没有现在流行罢了.之所以当下如此盛行,我想肯定是多 ...
- 快速上手Unity原生Json库
现在新版的Unity(印象中是从5.3开始)已经提供了原生的Json库,以前一直使用LitJson,研究了一下Unity用的JsonUtility工具类的使用,发现使用还挺方便的,所以打算把项目中的J ...
- [译]:Xamarin.Android开发入门——Hello,Android Multiscreen快速上手
原文链接:Hello, Android Multiscreen Quickstart. 译文链接:Hello,Android Multiscreen快速上手 本部分介绍利用Xamarin.Androi ...
- [译]:Xamarin.Android开发入门——Hello,Android快速上手
返回索引目录 原文链接:Hello, Android_Quickstart. 译文链接:Xamarin.Android开发入门--Hello,Android快速上手 本部分介绍利用Xamarin开发A ...
- 快速上手seajs——简单易用Seajs
快速上手seajs——简单易用Seajs 原文 http://www.cnblogs.com/xjchenhao/p/4021775.html 主题 SeaJS 简易手册 http://yslo ...
- Git版本控制Windows版快速上手
说到版本控制,之前用过VSS,SVN,Git接触不久,感觉用着还行.写篇博文给大家分享一下使用Git的小经验,让大家对Git快速上手. 说白了Git就是一个控制版本的工具,其实没想象中的那么复杂,咱在 ...
- Objective-C快速上手
最近在开发iOS程序,这篇博文的内容是刚学习Objective-C时做的笔记,力图达到用最短的时间了解OC并使用OC.Objective-C是OS X 和 iOS平台上面的主要编程语言,它是C语言的超 ...
- Netron开发快速上手(二):Netron序列化
Netron是一个C#开源图形库,可以帮助开发人员开发出类似Visio的作图软件.本文继前文”Netron开发快速上手(一)“讨论如何利用Netron里的序列化功能快速保存自己开发的图形对象. 一个用 ...
随机推荐
- [go]grpc远程接口调用实现
// grpc序列化/反序列化成对应语言的对象 // 1.写idl(数据类型+方法) // 2.生成对应语言的序列化/反序列化代码 // 3.方法需要自己实现 // 环境(将gopath/bin加入p ...
- 10Flutter页面布局 Padding Row Column Expanded组件详解:
Padding组件: main.dart import 'package:flutter/material.dart'; import 'res/listData.dart'; /* flutter页 ...
- 阶段5 3.微服务项目【学成在线】_day03 CMS页面管理开发_13-删除页面-前端-Api调用
增加删除链接 <el-button size="small" type="text" @click="del(page.row.pageId)& ...
- mfc移动文件夹
SHFILEOPSTRUCT FileOp; ZeroMemory((void*)&FileOp,sizeof(SHFILEOPSTRUCT)); FileOp.fFlags = FOF_NO ...
- CentOS 7下Cloudera Manager及CDH 6.0.1安装过程详解
目录 一.概念介绍 1.CDH 概览 2.Cloudera Manager 概览 二.环境准备 1.软件版本选择 2.节点准备(四个节点) 3.配置主机名和hosts解析(所有节点) 4.关闭防火墙 ...
- Linux 下清空或删除大文件内容的 5 种方法
在 Linux 终端下处理文件时,有时我们想直接清空文件的内容但又不必使用任何 Linux 命令行编辑器 去打开这些文件.那怎样才能达到这个目的呢?在这篇文章中,我们将介绍几种借助一些实用的命令来清空 ...
- 用Python搞出自己的云词图 | 【带你装起来】
作者:AI算法与图像处理 参考:http://www.sohu.com/a/149657007_236714 云词图简介 什么词云 由词汇组成类似云的彩色图形.“词云”就是对网络文本中出现频率较高的“ ...
- 华为Fusioncompute 6.5.1
V6.5.1VRM“gandalf”用户的默认密码为“IaaS@OS-CLOUD9!”.CNA“gandalf”用户的默认密码为“IaaS@OS-CLOUD8!”.普通模式:admin/LaaS@PO ...
- 【ARM-Linux开发】gstreamer教程及在DM3730上的应用
感谢原文作者:goalie高义http://blog.csdn.net/goalietech/article/details/24887955 1 Gstreamer基本概念 GStreamer 是一 ...
- mui ajax传参示例
//加入购物车var data=[];var row1 = {good_id:'1',number:'2',goods_spec_ids:[1,2]};data.push(row1);console. ...