在控制台输入：

npm install webpack -g

这是全局的安装，如果需要局部安装，在控制台cd 打开到指定目录，输入：

npm install webpack --save-dev

即可。

实例：

  1. 建立index.html文件
  2. 建立main.js文件
  3. 建立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安装教程及实例的更多相关文章

  1. webpack安装配置使用教程详解

    webpack安装配置使用教程详解 www.111cn.net 更新:2015-09-01 编辑:swteen 来源:转载 本文章来为各位详细的介绍一下关于webpack安装配置使用教程吧,这篇文章对 ...

  2. webpack使用教程

    webpack使用教程 接触webpack也有挺长一段时间了,公司的项目也是一直用着webpack在打包处理,但前几天在教新人的情况下,遇到了一个问题,那就是:尽管网上的webpack教程满天飞,但是 ...

  3. node+vue-cli+webpack搭建教程

    链接:https://segmentfault.com/a/1190000009160934?_ea=1849098 链接:https://www.jianshu.com/p/2769efeaa10a ...

  4. 【JavaScript】 Webpack安装及文件打包

    背景 最近开启一个新项目,需要对前端的各类资源文件进行打包,经过多方调研后,决定使用webpack工具.但是网上的教程多是将webpack直接作为服务器使用,而我只是想将其作为单纯的资源打包工具而已. ...

  5. webpack 使用教程--实时刷新测试

    学习webpack,基本始终是围绕: 1.如何安装webpack 2.如何使用webpack 3.如何使用loader 4.如何使用开发服务器 可能我们会在如何使用开发服务器的时候,遇到诸如调试的相关 ...

  6. yii2史上最简单式安装教程，没有之一

    写一篇绝对堪称史上最easy的Yii2安装教程教你入门. 既然是安装Yii,我们先去官网下载一份Yii的高级模版,什么,你说打开页面乱七八糟的英文字母你看不懂?那这样大哥,你按照下面的截图进行操作好吧 ...

  7. 转载：Hadoop安装教程_单机/伪分布式配置_Hadoop2.6.0/Ubuntu14.04

    原文 http://www.powerxing.com/install-hadoop/ 当开始着手实践 Hadoop 时,安装 Hadoop 往往会成为新手的一道门槛.尽管安装其实很简单,书上有写到, ...

  8. webpack入门级教程

    Webpack是什么 首先可以看下官方文档,文档是最好的老师. 这里也有国外的一个朋友写的入门介绍. Webpack是由Tobias Koppers开发的一个开源前端模块构建工具.它的基本功能是将以模 ...

  9. Hadoop安装教程_单机/伪分布式配置_Hadoop2.6.0/Ubuntu14.04

    摘自: http://www.cnblogs.com/kinglau/p/3796164.html http://www.powerxing.com/install-hadoop/ 当开始着手实践 H ...

随机推荐

  1. SpringMVC基础入门，创建一个HelloWorld程序

    ref:http://www.admin10000.com/document/6436.html 一.SpringMVC基础入门,创建一个HelloWorld程序 1.首先,导入SpringMVC需要 ...

  2. MapReduce三种join实例分析

    本文引自吴超博客 实现原理 1.在Reudce端进行连接. 在Reudce端进行连接是MapReduce框架进行表之间join操作最为常见的模式,其具体的实现原理如下: Map端的主要工作:为来自不同 ...

  3. day12<常见对象+>

    常见对象(Scanner的概述和方法介绍) 常见对象(Scanner获取数据出现的小问题及解决方案) 常见对象(String类的概述) 常见对象(String类的构造方法) 常见对象(String类的 ...

  4. GCD之after

    先介绍下C中的modf函数 函数名:modf 头文件:<math.h> 函数原型:double modf(double x, double *ipart) 函数用途:分解x,以得到x的整数 ...

  5. 1.在CentOS 6.4安装python3

    CentOS安装Python3.X 1.系统环境说明 [root@Python ~]# uname -r 2.6.32-431.el6.i686 [root@Python ~]# uname -m i ...

  6. c++builder中 扩展c++的关键字 ： _published _automated Get/Set指令 _fastcall

    C++Builder为C++增加了许多关键字,以适应其快速应用开发(RAD)环境.包括关键字和Get/Set指令. 1._published类似publich权限范围,_published像publi ...

  7. 【转】Spark运行过程

    http://www.cnblogs.com/1130136248wlxk/articles/6289717.html

  8. Linux入门之常用命令（4）vi编辑器

    vi分为三种模式 一般模式:删除字符.删除整行.复制粘贴等操作 编辑模式:i o a r进入 输入字符  Esc退出 命令行模式::或/ 将光标移动到最末行 搜寻数据 读取或替换 退出vi 显示行号 ...

  9. mybatis运行时错误Illegal argument exception argument type mismatch

    使用注解时遇到该错误 使用XML应该也会有相应的错误 解决办法:查看是不是Dao接口的参数列表没有加@Param注解  参数过多时需要该注解指明参数

  10. apollo实现c#与android消息推送(三)

    3 实现c#消息推送服务 c#实现消息推送必须引入M2Mqtt.dll,源码 a 连接apache apollo代理服务器的代码.需要引入using uPLibrary.Networking.M2Mq ...