在控制台输入：

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. Linux 环境下 MySQ导入和导出MySQL的sql文件

    将服务器上的文件导入或导出还需要使用工具传输到本机中,推荐使用winscp,与xshell搭配使用 1 导入数据库 两种方法 .首先建空数据库 mysql>create database abc ...

  2. Spring-mvc配置“/”路径过滤问题

    首先大家都知道"/*"可以匹配所有url,包括带扩展名的,一般只用在过滤器上. 一般Spring-mvc的核心 <servlet> <servlet-name&g ...

  3. 西邮linux兴趣小组2014纳新免试题（二）

    [第二关] 题目 http://round2.sinaapp.com/ 分析 打开后,戳进去发现一句名言,然后下一戳的url提示. 在网页源码中得到Page1024提示,于是写一个脚本 #!/bin/ ...

  4. 深入理解计算机系统_3e 第二章家庭作业答案

    初始完成者:哈尔滨工业大学 李秋豪 许可:除2.55对应代码外(如需使用请联系randy.bryant@cs.cmu.edu),任何人可以自由的使用,修改,分发本文档的代码. 本机环境: (有一些需要 ...

  5. 基于MyBatis3.0.6的基本操作介绍

    每 一 个 MyBatis 的 应 用 程 序 都 以 一 个 SqlSessionFactory 对 象 的 实 例 为 核 心 .SqlSessionFactory本身是由SqlSessionFa ...

  6. 洗礼灵魂，修炼python（7）--元组，集合，不可变集合

    前面已经把列表的基本用法讲解完 接着讲python的几大核心之--元组(tuple) 1.什么是元组? 类似列表,但为不可变对象,之前提到列表是可变对象,所谓可变对象就是支持原处修改,并且在修改前后对 ...

  7. 在Ubuntu上安装arm-linux-gcc的问题

    由于之前将Ubuntu的更新关掉了,所以导致我下载32位兼容包一直出错. 在arm-linux-gcc 安装之后,还不能编译程序的话,首先看自己的系统是多少位的,因为网上大部分的安装包都是32位的,所 ...

  8. 关于 HashTable

    hashTable 的一些认识: 底层使用散列表,存贮键值对,键值非null 使用synchronize 保证线程安全 (线程安全) ■全局变量 //The hash table data. //底层 ...

  9. ASP.NET没有魔法——ASP.NET MVC 与数据库之EF实体类与数据库结构

    大家都知道在关系型数据库中每张表的每个字段都会有自己的属性,如:数据类型.长度.是否为空.主外键.索引以及表与表之间的关系.但对于C#编写的类来说,它的属性只有一个数据类型和类与类之间的关系,但是在M ...

  10. asp.net中kindeditor配置

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>KindEditor< ...