webpack介绍

  Webpack是当下最热门的前端资源模块化管理和打包工具,它可以将很多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源,还可以将按需加载的模块进行代码分割,等到实际需要的时候再异步加载。

webpack和Grunt以及Gulp相比有什么特性

Gulp/Grunt是一种能够优化前端的开发流程的工具,而WebPack是一种模块化的解决方案,不过Webpack的优点使得Webpack可以替代Gulp/Grunt类的工具。

Grunt和Gulp的工作方式是:在一个配置文件中,指明对某些文件进行类似编译、组合、压缩等任务的具体步骤。

webpack的工作方式是:把你的项目当做一个整体,通过一个给定的主文件(如:index.js),Webpack将从这个文件开始找到你的项目的所有依赖文件,使用loaders处理它们,最后打包为一个浏览器可识别的JavaScript文件。

二者进行比较,Webpack的处理速度更快更直接,能打包更多不同类型的文件。

开始使用webpack

Node.js是必备的工具,NPM的版本最好是3.x版本以上,NPM 3.x提供了更有效的包依赖管理。

webpack用npm安装。

//全局安装
npm install webpack -g
//安装到你的项目目录
npm install webpack --save-dev

1.新建一个文件夹wkdemo,在该文件下 npm install webpack --save-dev

(看得出来应该先建一个package.json文件的(/ □ \))

2.package.json文件准备,可以使用npm init命令自动创建这个package.json文件

{
"name": "webpack-demo",
"version": "1.0.0",
"description": "webpack demo",
"main": "app.js",
"scripts": {
"start": "webpack",
"build": "webpack --progress --colors"
},
"repository": {
"type": "git",
"url": ".."
},
"keywords": [
"react",
"webpack"
],
"author": "wangjuan",
"devDependencies": {
"babel-core": "^5.8.25",
"babel-loader": "^5.3.2",
"css-loader": "^0.12.1",
},
"dependencies": {
},
"license": "ISC"
}

3.webpack.config.js文件准备

var webpack = require('webpack');
module.exports = {
//页面入口文件配置
entry: [
// 'webpack/hot/only-dev-server',
"./js/app.js"
],
//入口文件输出配置
output: {
path: './build',
filename: "bundle.js"
},
module: {
//加载器配置
loaders: [
{ test: /\.css$/, loader: 'style-loader!css-loader' }, { test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
{ test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
]
},
//插件项
plugins: [
new webpack.NoErrorsPlugin()
]
};

4.index.html最基础的html代码,它唯一的目的就是加载打包后的js文件(bundle.js),注意路径对应起来

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>New webpack app</title> </head>
<body>
<div id='root'></div>
<script src="build/bundle.js"></script>
</body>
</html>

由webpack.config.js文件中:

//页面入口文件配置
entry: [
// 'webpack/hot/only-dev-server',
"./js/app.js"
],

可以看出需要建一个文件js/app.js作为入口文件。

5.入口文件app.js准备

//app.js
var greeter = require('./hello.js');
document.getElementById('root').appendChild(greeter());

可以看到这里引用一个同目录下hello.js文件

6.hello.js文件准备

// hello.js
module.exports = function() {
var greet = document.createElement('div');
greet.textContent = "Hi there and greetings! hello world12345";
return greet;
};

7.执行webpack

8.运行index.html

最后看下目录结构为:

参考:

入门Webpack,看这篇就够了

http://www.cnblogs.com/skylar/p/React-Webpack-ES6.html

http://www.cnblogs.com/vajoy/p/4650467.html

http://www.cnblogs.com/tugenhua0707/p/5576262.html

http://www.cnblogs.com/keepfool/p/5678427.html

webpack入门之简单例子跑起来的更多相关文章

  1. 从无到有之webpack+vuerouter的简单例子以及各个属性解释

    之前一直没玩过webpack和vue,近两周才看这玩意,本文纯属自己的实验+之前angular作战经验的理解一些入门文章 首先webpack关于vue以及各个包 module.exports = { ...

  2. nodejs入门最简单例子

    一.mac话,先安装nodejs环境: brew install nodejs 二.先写一个main.js var http = require("http"); http.cre ...

  3. Webpack入门——使用Webpack打包Angular项目的一个例子

    2016.1.22,对大多数人来说,这是一个非常平常的日子,但这却是我决定在博客园写博客的日子.虽然注册博客园的博客已有4年8个月,却一直没有动手写过一篇博客,原因是觉得自己水平不行,写不出好东西,所 ...

  4. Hibernate4.2.4入门(一)——环境搭建和简单例子

    一.前言 发下牢骚,这段时间要做项目,又要学框架,搞得都没时间写笔记,但是觉得这知识学过还是要记录下.进入主题了 1.1.Hibernate简介 什么是Hibernate?Hibernate有什么用? ...

  5. CANoe 入门 Step by step系列(三)简单例子的剖析【转】

    最好的学习方式是什么?模仿.有人会问,那不是山寨么?但是我认为,那是模仿的初级阶段,当把别人最好的设计已经融化到自己的血液里,变成自己的东西,而灵活运用的时候,才是真正高级阶段.正所谓画虎画皮难画骨. ...

  6. 【转载】CANoe 入门 Step by step系列(三)简单例子的剖析

    来源:http://www.cnblogs.com/dongdonghuihui/archive/2012/09/26/2704623.html 最好的学习方式是什么?模仿.有人会问,那不是山寨么?但 ...

  7. webpack入门--前端必备

    webpack入门--前端必备 什么是 webpack? webpack是一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来 ...

  8. webpack入门(2)

    webpack入门(2) ps:每个案例都是基于前一个案例改造的 webpack入门(1) 戳这里 案例源码戳这里 十二.ProvidePlugin 自动加载模块 new webpack.Provid ...

  9. webpack入门文档教程

    .octicon{margin-right:2px}a.tabnav-extra:hover{color:#4078c0;text-decoration:none}.tabnav-btn{margin ...

随机推荐

  1. 线性判别分析LDA原理总结

    在主成分分析(PCA)原理总结中,我们对降维算法PCA做了总结.这里我们就对另外一种经典的降维方法线性判别分析(Linear Discriminant Analysis, 以下简称LDA)做一个总结. ...

  2. 【趣事】用 JavaScript 对抗 DDOS 攻击

    继续趣事分享. 上回聊到了大学里用一根网线发起攻击,今天接着往后讲. 不过这次讲的正好相反 -- 不是攻击,而是防御.一个奇葩防火墙的开发经历. 第二学期大家都带了电脑,于是可以用更高端的方法断网了. ...

  3. .NET Core系列 :4 测试

    2016.6.27 微软已经正式发布了.NET Core 1.0 RTM,但是工具链还是预览版,同样的大量的开源测试库也都是至少发布了Alpha测试版支持.NET Core, 这篇文章 The Sta ...

  4. URL安全的Base64编码

    Base64编码可用于在HTTP环境下传递较长的标识信息.在其他应用程序中,也常常需要把二进制数据编码为适合放在URL(包括隐藏表单域)中的形式.此时,采用Base64编码不仅比较简短,同时也具有不可 ...

  5. CorelDRAW X8 如何破解激活(附国际版安装包+激活工具) 2016-12-15

    之前有位搞平面的好友“小瘦”说CDR X8无法破解,只能用X7.呃……呃……呃……好像是的 其实CDR8难激活主要在于一个点“没有离线激活了,只可以在线激活”,逆天不是专供逆向的,当然没能力去破解,这 ...

  6. 启用 Open vSwitch - 每天5分钟玩转 OpenStack(127)

    Linux Bridge 和 Open vSwitch 是目前 OpenStack 中使用最广泛的两种虚机交换机技术. 前面各章节我们已经学习了如何用 Linux Bridge 作为 ML2 mech ...

  7. C#多线程之线程同步篇3

    在上一篇C#多线程之线程同步篇2中,我们主要学习了AutoResetEvent构造.ManualResetEventSlim构造和CountdownEvent构造,在这一篇中,我们将学习Barrier ...

  8. WebSocket - ( 一.概述 )

    说到 WebSocket,不得不提 HTML5,作为近年来Web技术领域最大的改进与变化,包含CSS3.离线与存储.多媒体.连接性( Connectivity )等一系列领域,而即将介绍的 WebSo ...

  9. canvas快速绘制圆形、三角形、矩形、多边形

    想看前面整理的canvas常用API的同学可以点下面: canvas学习之API整理笔记(一) canvas学习之API整理笔记(二) 本系列文章涉及的所有代码都将上传至:项目代码github地址,喜 ...

  10. Atitit.技术管理者要不要自己做开发??

    Atitit.技术管理者要不要自己做开发?? 1. 为什么很多管理者不能自己亲自做了1 1.1. 沟通成本多了1 1.2. .组织分散. 1 1.3. 会议多 .协调多 1 1.4. 问题的根源在于我 ...