在控制台输入：

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. JSR303的数据校验-Hibernate Validator方式实现

    1.什么是JSR303? JSR303是java为bean数据合法性校验所提供的一个标准规范,叫做Bean Validation. Bean Validation是一个运行时的数据校验框架,在验证之后 ...

  2. mapreduce新旧api对比

    对比:hadoop版本1.x 新版,hadoop版本0.x 旧版 1.新api引用包一般是mapreduce ,旧版api引用的包一般是mapred 2.新api使用Job,旧版api使用JobCon ...

  3. 最小覆盖_KEY

    最小覆盖(cover)..线段树 [题目描述] 给定 N 个区间[Li,Ri],需要你按照顺序选出一个区间序列使得[1,M]完全被覆盖.并且在选出来的序列中,某个区间[a,b]之前必须保证[1,a]都 ...

  4. 第5章 不要让线程成为脱缰的野马（Keeping your Threads on Leash） ---干净的终止一个线程

    干净的终止一个线程  我曾经在第2章产生一个后台线程,用以输出一张屏幕外的 bitmap 图.我们必须解决的一个最复杂的问题就是,如果用户企图结束程序,而这张bitmap 图尚未完成,怎么办?第2章的 ...

  5. GCD SUM 强大的数论，容斥定理

    GCD SUM Time Limit: 8000/4000MS (Java/Others) Memory Limit: 128000/64000KB (Java/Others) SubmitStatu ...

  6. jvm系列(四):jvm知识点总结

    原文链接:http://www.cnblogs.com/ityouknow/p/6482464.html jvm 总体梳理 jvm体系总体分四大块: 类的加载机制 jvm内存结构 GC算法 垃圾回收 ...

  7. python堆栈实现

    百度百科定义: 堆栈是一个在计算机科学中经常使用的抽象数据类型.堆栈中的物体具有一个特性: 最后一个放入堆栈中的物体总是被最先拿出来, 这个特性通常称为后进先出(LIFO)队列. 堆栈中定义了一些操作 ...

  8. js X年X周 转成 具体日期

    function getWeekDate(theyear,weekcount) { var year = theyear; var week = weekcount; if(year=="& ...

  9. yii2-swiftmailer入门

    1. 安装 用yii 2.0框架,默认会有这个扩展 composer require --prefer-dist yiisoft/yii2-swiftmailer 修改composer.json,re ...

  10. zoj3961（区间问题）

    点击打开zoj1961Let's Chat Time Limit: 1 Second      Memory Limit:65536 KB ACM (ACMers' Chatting Messenge ...