webpack安装教程及实例
在控制台输入：
npm install webpack -g
这是全局的安装，如果需要局部安装，在控制台cd 打开到指定目录，输入：
npm install webpack --save-dev
即可。
实例：
- 建立index.html文件
- 建立main.js文件
- 建立webpack.config.js文件
index.html
<html lang="en"> <head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body>
<script type="text/javascript" src="bundle.js"></script>
</body> </html>
main.js
document.write("<h1>Hello World</h1>");
webpack.config.js
module.exports = {
entry: "./main.js",//这是源文件
output: {
filename: 'bundle.js' //这是生成的新文件
}
};
三个文件创建好之后，我们需要把项目运行起来，使用live-server来运行项目。
在控制台直接输入：
npm install live-server -g
安装成功之后，在控制台cd打开到项目的根目录，然后在控制台先输入webpack命令，webpack就是执行打包指令，打包成功之后，
在控制台输入：
live-server
即可运行项目。
webpack安装教程及实例的更多相关文章
- webpack安装配置使用教程详解
webpack安装配置使用教程详解 www.111cn.net 更新:2015-09-01 编辑:swteen 来源:转载 本文章来为各位详细的介绍一下关于webpack安装配置使用教程吧,这篇文章对 ...
- webpack使用教程
webpack使用教程 接触webpack也有挺长一段时间了,公司的项目也是一直用着webpack在打包处理,但前几天在教新人的情况下,遇到了一个问题,那就是:尽管网上的webpack教程满天飞,但是 ...
- node+vue-cli+webpack搭建教程
链接:https://segmentfault.com/a/1190000009160934?_ea=1849098 链接:https://www.jianshu.com/p/2769efeaa10a ...
- 【JavaScript】 Webpack安装及文件打包
背景 最近开启一个新项目,需要对前端的各类资源文件进行打包,经过多方调研后,决定使用webpack工具.但是网上的教程多是将webpack直接作为服务器使用,而我只是想将其作为单纯的资源打包工具而已. ...
- webpack 使用教程--实时刷新测试
学习webpack,基本始终是围绕: 1.如何安装webpack 2.如何使用webpack 3.如何使用loader 4.如何使用开发服务器 可能我们会在如何使用开发服务器的时候,遇到诸如调试的相关 ...
- yii2史上最简单式安装教程，没有之一
写一篇绝对堪称史上最easy的Yii2安装教程教你入门. 既然是安装Yii,我们先去官网下载一份Yii的高级模版,什么,你说打开页面乱七八糟的英文字母你看不懂?那这样大哥,你按照下面的截图进行操作好吧 ...
- 转载：Hadoop安装教程_单机/伪分布式配置_Hadoop2.6.0/Ubuntu14.04
原文 http://www.powerxing.com/install-hadoop/ 当开始着手实践 Hadoop 时,安装 Hadoop 往往会成为新手的一道门槛.尽管安装其实很简单,书上有写到, ...
- webpack入门级教程
Webpack是什么 首先可以看下官方文档,文档是最好的老师. 这里也有国外的一个朋友写的入门介绍. Webpack是由Tobias Koppers开发的一个开源前端模块构建工具.它的基本功能是将以模 ...
- Hadoop安装教程_单机/伪分布式配置_Hadoop2.6.0/Ubuntu14.04
摘自: http://www.cnblogs.com/kinglau/p/3796164.html http://www.powerxing.com/install-hadoop/ 当开始着手实践 H ...
随机推荐
- vim下处理文档中的\r\n\t字符
问题复现 拿到的文档中包含了大量的\r.\n.\t等字符,形如: \r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\ ...
- 利用GPU实现无尽草地的实时渲染
0x00 前言 在游戏中展现一个写实的田园场景时,草地的渲染是必不可少的,而一提到高效率的渲染草地,很多人都会想起GPU Gems第七章 <Chapter 7. Rendering Countl ...
- ng-model值字符串转数值型（convertToNumber directive）
<select ng-model="model.id" convert-to-number> <option value="0">Zer ...
- 用vue开发一个app（2，main.js）
昨天跟着vue的官网搭建了vue的一个脚手架,我也是第一次用VUE一切都在摸索阶段. 今天试着看下里面脚手架里面有点什么东西 先看看main.js 导入了3个模块 一个vue,一个app,还有rout ...
- 日期小demo
有个项目需求是做个在日期上选择的,就是这种: 网上看了几个日期的demo都太厚重了,移植起来太麻烦,然后打算自己写. 就先写个简化的demo看看,主要有几个关键点: 首先要根据当前日期获取这个月有几天 ...
- ThinkPHP中：多个项目共享同一个session问题
使用ThinkPHP3.1.3版本的session时,多个项目同时调试会使得一维数组式的session不够用,导致在A项目登录后台后,在B项目就不用登录后台就可以进入后台操作了. 问题在于他们都调用同 ...
- java集合系列——List集合之Vector介绍（四）
1. Vector的简介 JDK1.7.0_79版本 Vector 类可以实现可增长的对象数组.与数组一样,它包含可以使用整数索引进行访问的组件.但是,Vector 的大小可以根据需要增大或缩小,以适 ...
- centos 6.5系统下安装ibus及设置开机自启动
先说一下系统环境:centos 6.5,然后我是以root身份执行的,没有权限的用户参见sudo用法 第1步:查找并安装ibus安装包,命令如下: 找到一行: ibus-pinyin.x86_64 : ...
- CentOSv6.8 修改防火墙配置、修改SSH端口
查看防火墙目前使用状况: service iptables status 修改防火墙配置: vi /etc/sysconfig/iptables 重启防火墙,让刚才修改的配置生效: service i ...
- HIT 1917 Peaceful Commission
这道题题意就是给你n对人,一对中编号为x,x+1,给你m对矛盾,表示这两个人不能同时选. 然后就是Two-Sat的模板题了,就是根据对称性,连边,加缩点,最后拓扑排序,求出一组可行解就可以了. #in ...