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. CentOS 7.4 发布下载,安全稳定的Linux发行版

    CentOS 7.4 发布了.CentOS 是 RHEL(Red Hat Enterprise Linux)源代码再编译的产物,而且在 RHEL 的基础上修正了不少已知的 Bug ,相对于其他 Lin ...

  2. SpringBoot 部署到Linux开机自启动和运行

    前文 SpringBoot是一个强大的微服务框架,通常都是打包项目成Jar包,并部署到服务器上,本文以Linux服务器部署为主 开机自启动 博文:<https://www.cnblogs.com ...

  3. C++ STL swap_range

    #include <iostream>#include <vector>#include <deque>#include <algorithm> usi ...

  4. http://www.cda.cn/view/25735.html

    通过实例浅析Python对比C语言的编程思想差异 我一直使用 Python,用它处理各种数据科学项目. Python 以易用闻名.有编码经验者学习数天就能上手(或有效使用它). 听起来很不错,不过,如 ...

  5. MATLAB绘图及例子总结

    MATLAB绘图及例子总结 二维图 例 1 X1=[1,2,4,6,7,8,10,11,12,14,16,17,18,20]; Y1=[1,2,4,6,7,8,10,10,8,7,6,4,2,1]; ...

  6. 记录一下自己安装Appium的流程

    跟着其他大佬的安装攻略,一步一步来的.过程中遇到了一些问题,也都解决了~ 需要准备的东西: 1.JDK1.8 2.Andriod SDK 3.Node.js 4.Python 5.Appium-pyt ...

  7. ORA-00054:Orcacle表锁定

    查询被锁的session_id select session_id from v$locked_object; 查询结果----------------------SESSION_ID8 查询被锁se ...

  8. django 之(五) --- 验证码|富文本|邮箱短信

    验证码 在用户登录,注册以及一些敏感操作的时候,我们为了防止服务器被暴力请求,或爬虫爬取,我们可以使用验证码进行过滤,减轻服务器的压力. 原生实现: 库名:pip install Pillow     ...

  9. github pages + hexo 搭建 blog 遇到的问题

    一. ERROR Deployer not found: git $ hexo d ERROR Deployer not found: git npm install --save hexo-depl ...

  10. java中length和length()的区别?

    在java中String类可以定义字符串变量和字符串数组,length()用于求String字符串对象的长度,而length用  于求String字符串数组的长度.  length()是求String ...