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. php+mysql模糊查询功能

    一般模糊查询语句如下: SELECT 字段 FROM 表 WHERE 某字段 Like 条件 其中关于条件,SQL提供了四种匹配模式: 1,% :表示任意0个或多个字符.可匹配任意类型和长度的字符,有 ...

  2. Qt编写数据可视化大屏界面电子看板8-调整间距

    一.前言 在数据可视化大屏界面电子看板系统中,前期为了使用目标客户机,调整间距是必不可少的工作,QMainWindow中的QDockWidget,会默认生成布局和QSplitter调整宽高大小,鼠标移 ...

  3. 下了个pkg包的jenkins,的使用方法

    三.如何启动Jenkins1.最简单的方法是双击Jenkins的pkg包,一步一步点同意,默认8080端口2.使用命令行启动打开terminal,进入到war包所在目录,执行命令: java -jar ...

  4. 关于Android Studio中Gradle的一些乱七八糟的问题

    版本下载:https://gradle.org/releases/ 一个很详细的blog说明文:https://www.cnblogs.com/smyhvae/p/4390905.html,不贴具体内 ...

  5. handlebars基础及循环使用示例

    var source = "<p>Hello, my name is {{name}}. I am from {{hometown}}. I have " + &quo ...

  6. cocos2dx图片加密解密(npk方式)

    话不多说,直接开始: 准备的工具: 链接:https://pan.baidu.com/s/1Om4kBNWcG2jL_RTsHqqzpQ 提取码:bv7i npkCreate.exe是加密图片的工具, ...

  7. BFS算法模板(python实现)

    BFS算法整理(python实现) 广度优先算法(Breadth-First-Search),简称BFS,是一种图形搜索演算算法. 1. 算法的应用场景 2. 算法的模板 2.1 针对树的BFS模板 ...

  8. 《MIT 6.828 Lab 1 Exercise 11》实验报告

    本实验的网站链接:MIT 6.828 Lab 1 Exercise 11. 题目 The above exercise should give you the information you need ...

  9. 《你必须知道的495个C语言问题》读书笔记之第15-20章:浮点数、风格、杂项

    一.可变参数列表 1. Q:为什么调用printf前必须要包含<stdio.h>? A:为了把printf的正确原型说明引入作用域.例如,如果可变参数的调用比固定参数的调用效率低,编译器就 ...

  10. PTA(Basic Level)1020.月饼

    月饼是中国人在中秋佳节时吃的一种传统食品,不同地区有许多不同风味的月饼.现给定所有种类月饼的库存量.总售价.以及市场的最大需求量,请你计算可以获得的最大收益是多少. 注意:销售时允许取出一部分库存.样 ...