一、安装
1、安装node.js，Webpack 需要 Node.js v0.6 以上支持
2、使用npm（软件包管理 ）安装webpack
（1）全局安装
  
npm install webpack -g
 
（2）安装到项目依赖中
     
::创建package.json文件
npm init    
::安装webpack依赖
npm install webpack --save-dev  
 
二、使用webpack
1、创建静态页面index.html     js入口文件entry.js
 
<!-- index.html -->
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <!--build.js文件是打包后生成文件-->
  <script src="build.js"></script>
</body>
</html>
 
// entry.js
document.write('It works.')
2、编译打包
     
webpack entry.js build.js
 
用浏览器打开 index.html 将会看到 It works.
3、添加模块
 
//创建module.js
module.exports = 'It works from module.js';
 
//entry.js
document.write('It works');
document.write(require('./module.js'));  //引入新建模块
重新打包：
 
webpack entry.js build.js
 
刷新页面看到变化 It works.It works from module.js.
 
总结：webpack会分析入口文件，将所有模块打包到build.js。webpack会给每个模块分配一个唯一的id，通过这个id索引和访问模块。页面启动时，会先执行entry.js中的代码，其他模块会在运行require时执行。
 
 

webpack安装使用的更多相关文章

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

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

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

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

  3. webpack安装配置

    webpack安装 1.安装之前你必须要安装node.js,如果你没安装可以在node.js网去下载node.js 2.全局安装webpack,打开cmd输入npm install webpack - ...

  4. 前端自动化构建工具webpack （一）之webpack安装 和 设置webpack.confi.js

    目的:  模块化开发,组件化开发,让代码符合开发规范,更高效 webpack作用:从pack,就知道这是包的意思,比较专业点叫做前端自动化打包构建工具,代码错误检查,预处理,文件合并(打包),代码压缩 ...

  5. webpackt入门1：webpack介绍&webpack安装&使用webpack打包

    本篇博客不是原创,简书的zhangwang写的,原文太长,我这里只是提取了一部分. 原文地址:入门webpack,看这篇就够了 一.Webpack解决了什么问题 问题1.JavaScript这个脚本化 ...

  6. webpack安装整理

    早上有点时间大概安装一下webpack,操作一下顺便把步骤记一下,乱乱的,还是记录一下吧! webpack安装步骤:1. 2. 3.一直回车,出现如下图: 4.创建src和dist文件 5.需要在np ...

  7. webpack前端构建工具学习总结（一）之webpack安装、创建项目

    npm是随nodeJs安装包一起安装的包管理工具,能解决NodeJS代码部署上的很多问题: 常见的使用场景有以下几种: 允许用户从NPM服务器下载别人编写的第三方包到本地使用. 允许用户从NPM服务器 ...

  8. 1、webpack安装

    1.局部安装: npm i -D (npm install --save-dev的简写) 安装指定版本:npm i -D webpack @version 安装最新版:npm i -D webpack ...

  9. Webpack安装配置及打包详细过程

    引言 前端经过漫长的发展,涌现出了很多实践方法来处理复杂的工作流程,让开发变得更加简便,其中,模块化可以使复杂的程序细化成为各个小的文件,而webpack并不强制你使用某种模块化方案,而是通过兼容所有 ...

  10. webpack 安装vue（两种代码模式compiler 和runtime）

    使用webpack安装vue,import之后,运营项目报错,如下: [Vue warn]: You are using the runtime-only build of Vue where the ...

随机推荐

  1. Linux设备驱动编程---miscdevice杂类设备的使用方法

    miscdev简称杂类设备杂类设备就是对字符设备驱动做一个封装,方便简单使用杂类设备封装字符设备需要包含的头文件:#include <linux/miscdevice.h>(1)杂类设备的 ...

  2. C++对象模型的那些事儿之一：对象模型（上）

    前言 很早以前就听人推荐了<深入理解C++对象模型>这本书,从年初买来到现在也只是偶尔翻了翻,总觉得晦涩难懂,放在实验室上吃灰吃了好久.近期由于找工作对C++的知识做了一个全面系统的学习, ...

  3. UNIX环境高级编程——互斥量属性

    互斥量具有一些属性,通过修改这些属性可以控制锁的一些行为.缺省的互斥锁属性及其值如下: pshared:         PTHREAD_PROCESS_PRIVATE type:           ...

  4. 字符串的n位左旋

    要求:将主串的某一段(n位)翻转到主串的最后,如:abcdef以2位翻转则结果为:cdefab.要求时间复杂度为O(n),空间复杂度为O(1) 思路一:可以重新定义一个与原串相同大小的字符数组resu ...

  5. Android官方命令深入分析之hprof-conv

    hprof-conv工具可以将Android SDK工具生成的HPROF文件生成一个标准的格式,这样你就可以使用工具进行查看: hprof-conv [-z] <infile> <o ...

  6. (NO.00003)iOS游戏简单的机器人投射游戏成形记(二十)

    接上一篇文章,我们现在来实现篮框的感应器. 所谓感应器,就是在物体接触到的时候做出反应的节点.我们需要将感应器放在篮框底部,这样子弹接触感应器的时候,我们就知道子弹坠入了篮框,从而得分. 为了放置子弹 ...

  7. 一种公认提供toString的方法＿JAVA核心技术卷轴Ⅰ

    从JAVA核心技术卷轴Ⅰ:基础知识中整理得到. import java.lang.reflect.AccessibleObject; import java.lang.reflect.Array; i ...

  8. 多层界面之间显示与隐藏tabBar

    IOS中多层界面之间显示与隐藏tabBar? 在做项目的时候,遇到了一个难题,使用hidesBottomWhenPushed=YES属性设置,可以让本级界面及其以后界面都隐藏,但是根据项目 需求,在第 ...

  9. OC语言实现中等难度通讯录

    实现中等难度通讯录.需求: 1.定义联系⼈人类Contact.实例变量:姓名(拼⾳音,⾸首字⺟母⼤大写).性别.电话号码. 住址.分组名称.年龄.⽅方法:⾃自定义初始化⽅方法(姓名.电话号码).显⽰示 ...

  10. 一个优化极点的ViewHolder

    代码中有注释: 使用方法: 1.可以在listview,gridview,stageView直接继承LazyAdapter使用 2.下面有Demo 代码 ViewHolder代码: import an ...