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快速上手的更多相关文章

  1. npm、webpack、vue-cli 快速上手

    npm+webpack+vue-cli快速上手   Node.js   npm 什么是Node.js  以及npm 简单的来说 Node.js 就是运行在服务端的JavaScript,基于Chrome ...

  2. 【Python五篇慢慢弹】快速上手学python

    快速上手学python 作者:白宁超 2016年10月4日19:59:39 摘要:python语言俨然不算新技术,七八年前甚至更早已有很多人研习,只是没有现在流行罢了.之所以当下如此盛行,我想肯定是多 ...

  3. 快速上手Unity原生Json库

    现在新版的Unity(印象中是从5.3开始)已经提供了原生的Json库,以前一直使用LitJson,研究了一下Unity用的JsonUtility工具类的使用,发现使用还挺方便的,所以打算把项目中的J ...

  4. [译]:Xamarin.Android开发入门——Hello,Android Multiscreen快速上手

    原文链接:Hello, Android Multiscreen Quickstart. 译文链接:Hello,Android Multiscreen快速上手 本部分介绍利用Xamarin.Androi ...

  5. [译]:Xamarin.Android开发入门——Hello,Android快速上手

    返回索引目录 原文链接:Hello, Android_Quickstart. 译文链接:Xamarin.Android开发入门--Hello,Android快速上手 本部分介绍利用Xamarin开发A ...

  6. 快速上手seajs——简单易用Seajs

    快速上手seajs——简单易用Seajs   原文  http://www.cnblogs.com/xjchenhao/p/4021775.html 主题 SeaJS 简易手册 http://yslo ...

  7. Git版本控制Windows版快速上手

    说到版本控制,之前用过VSS,SVN,Git接触不久,感觉用着还行.写篇博文给大家分享一下使用Git的小经验,让大家对Git快速上手. 说白了Git就是一个控制版本的工具,其实没想象中的那么复杂,咱在 ...

  8. Objective-C快速上手

    最近在开发iOS程序,这篇博文的内容是刚学习Objective-C时做的笔记,力图达到用最短的时间了解OC并使用OC.Objective-C是OS X 和 iOS平台上面的主要编程语言,它是C语言的超 ...

  9. Netron开发快速上手(二):Netron序列化

    Netron是一个C#开源图形库,可以帮助开发人员开发出类似Visio的作图软件.本文继前文”Netron开发快速上手(一)“讨论如何利用Netron里的序列化功能快速保存自己开发的图形对象. 一个用 ...

随机推荐

  1. Qemu搭建ARM vexpress开发环境(一)

    Qemu搭建ARM vexpress开发环境(一) 标签(空格分隔): Qemu ARM Linux 嵌入式开发离不开硬件设备比如:开发板.外设等,但是如果只是想学习研究Linux内核,想学习Linu ...

  2. Flask 静态文件缓存问题

    大家好,今天才发现很多学习Flask的小伙伴都有这么一个问题,清理缓存好麻烦啊,今天就教大家怎么解决. 大家在使用Flask静态文件的时候,每次更新,发现CSS或是Js或者其他的文件不会更新. 这是因 ...

  3. 阶段5 3.微服务项目【学成在线】_day02 CMS前端开发_01-vuejs研究-vuejs介绍

    1.vue.js是什么? Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计 为可以自底向上逐层应用.Vue 的核心库只关注视 ...

  4. iptables之精髓(一)

    防火墙相关概念 从逻辑上讲.防火墙可以大体分为主机防火墙和网络防火墙. 主机防火墙:针对于单个主机进行防护. 网络防火墙:往往处于网络入口或边缘,针对于网络入口进行防护,服务于防火墙背后的本地局域网. ...

  5. Apache设置静态文件的失效时间

    步骤1:启用expires模块 [root@zlinux logs]# vim httpd.conf LoadModule expires_module modules/mod_expires.so ...

  6. MYSQL的MYSQLDUMP命令

    1.用mysqldump对MySQL数据库进行数据备份与恢复 下面假设要备份tm这个数据库:Shell>mysqldump -uroot –p123456 tm > tm_050519.s ...

  7. iOS-AVFoundation实现二维码(ios7以上,转载)

    关于二维码扫描有不少优秀第三方库: ZBar SDK 里面有详细的文档,相应介绍也非常多,如:http://rdcworld-iphone.blogspot.in/2013/03/how-to-use ...

  8. Scrapy五大核心组件工作流程

    一.Scrapy五大核心组件工作流程 1.核心组件 # 引擎(Scrapy) 对整个系统的数据流进行处理, 触发事务(框架核心). # 调度器(Scheduler) 用来接受引擎发过来的请求. 由过滤 ...

  9. Qt——鼠标拖动缩放窗口源码

    #ifndef MOVEWIDGET_H #define MOVEWIDGET_H #include <QWidget> #include <QEvent> class Mov ...

  10. VS编译错误._CRT_SECURE_NO_WARNINGS、_WINSOCK_DEPRECATED_NO_WARNINGS

    1.不记得原来的情况了,记得大概是这样: 低版本的 VC编译器 使用 strcpy.sprintf 等它不会报错,但是 高版本的 VS编译就会报错,大意是 strcpy.sprintf 等函数 不安全 ...