一、webpack的优势

1. 能模块化 JS 。

2. 开发便捷,能替代部分 grunt/gulp 的工作,比如打包、压缩混淆、图片转base64等。

3. 扩展性强,插件机制完善,特别是支持 React 热插拔)的功能让人眼前一亮

    二、webpack--如何安装

1. 全局安装 node.js

webpack基于node环境使用,只安装一次node环境就可以了。

2. 全局安装 Webpack

我们希望能够在系统的任何文件夹中使用 Webpack,使用的方式是通过 Webpack 命令来完成的,这需要我们全局安装 Webpack。这也只需要安装一次,以后每个项目就不需要重新全局安装了

$ npm install webpack -g

3. 在项目中安装 Webpack

最好在你的项目中也包含一份独立的 Webpack,这样你更方便管理你的项目。为什么又是全局安装,又是局部安装呢?可以参考,待定。

3.1 确认创建 NPM 项目文件

首先,你需要已经创建了 NPM 的项目文件,如果没有的话,使用 init 命令创建它。

 npm init

你需要回答一系列问题。最终你会得到一个名为 package.json 的 NPM 项目文件,如果你愿意的话,手工创建它也不错。甚至你可以直接复制一个过来。

一个新创建的 package.json 内容应该如下所示。

{
"name": "w1",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}

3.2 在项目中安装 Webpack

现在,可以在项目中安装 Webpack 了,直接使用 NPM 的 install 命令。

npm install webpack --save-dev

时候,你再检查一下 package.json 文件,它应该多了三行。

{
"name": "w1",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {},
"devDependencies": {
"webpack": "^1.13.2"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}

4.  Hello, Webpack

4.1 打包普通脚本文件

写一段普通的脚本,例如,一个 Hellowrold 脚本。当然了,这里应该是 Hello,Webpack.

function hello(){
alert("Hello, Webpack!");
}

保存到你的项目根目录中,文件名就叫 hello.js

4.2 创建 Webpack 配置文件

Webpack 根据配置文件的配置来完成打包,默认的配置文件名称是 webpack.config.js。

Webpack 的工作很简单,就是打包,你需要告诉它打包的内容,还有输出到哪里。entry 就是入口,显然 output 就是输出。

我们让 Webpack 将 hello.js 文件打包后输出到 bundle.js 文件中。

module.exports = {
// 入口
entry: "./hello.js",
// 输出的文件名
output: {
filename: 'bundle.js'
}
};

在命令窗口,输入 webpack 回车执行。应该会看到如下的输出。

> webpack
Hash: 05c39d9076887c35f015
Version: webpack 1.13.2
Time: 59ms
Asset Size Chunks Chunk Names
bundle.js 1.44 kB 0 [emitted] main
[0] ./hello.js 51 bytes {0} [built]
>

默认的入口文件名为 index.js,如果你将 hello.js 改名为 index.js,还可以直接使用目录名,不用提供文件名。

module.exports = {
// 入口,默认入口文件名为 index.js
entry: ".",
// 输出的文件名
output: {
filename: 'bundle.js'
}
};

参考网址:1.

       2.webpack官网地址

       3.webpack文档地址

备注命令:Webpack 使用一个名为 webpack.config.js 的配置文件,要编译 JSX,先安装对应的 loader: npm install jsx-loader --save-dev

1.webpack-----模块加载器兼打包工具的更多相关文章

  1. Webpack模块加载器

    一.介绍 Webpack是德国开发者 Tobias Koppers 开发的模块加载器,它能把所有的资源文件(JS.JSX.CSS.CoffeeScript.Less.Sass.Image等)都作为模块 ...

  2. js模块化/js模块加载器/js模块打包器

    之前对这几个概念一直记得很模糊,也无法用自己的语言表达出来,今天看了大神的文章,尝试根据自己的理解总结一下,算是一篇读后感. 大神的文章:http://www.css88.com/archives/7 ...

  3. Webpack 常见静态资源处理 - 模块加载器(Loaders)+ExtractTextPlugin插件

    Webpack 常见静态资源处理 - 模块加载器(Loaders)+ExtractTextPlugin插件 webpack系列目录 webpack 系列 一:模块系统的演进 webpack 系列 二: ...

  4. 【模块化编程】理解requireJS-实现一个简单的模块加载器

    在前文中我们不止一次强调过模块化编程的重要性,以及其可以解决的问题: ① 解决单文件变量命名冲突问题 ② 解决前端多人协作问题 ③ 解决文件依赖问题 ④ 按需加载(这个说法其实很假了) ⑤ ..... ...

  5. 构建服务端的AMD/CMD模块加载器

    本文原文地址:http://trock.lofter.com/post/117023_1208040 . 引言:  在前端开发领域,相信大家对AMD/CMD规范一定不会陌生,尤其对requireJS. ...

  6. 实现简单的 JS 模块加载器

    实现简单的 JS 模块加载器 1. 背景介绍 按需加载是前端性能优化的一个重要手段,按需加载的本质是从远程服务器加载一段JS代码(这里主要讨论JS,CSS或者其他资源大同小异),该JS代码就是一个模块 ...

  7. 实现一个类 RequireJS 的模块加载器 (二)

    2017 新年好 ! 新年第一天对我来说真是悲伤 ,早上兴冲冲地爬起来背着书包跑去实验室,结果今天大家都休息 .回宿舍的时候发现书包湿了,原来盒子装的牛奶盖子松了,泼了一书包,电脑风扇口和USB口都进 ...

  8. 使用RequireJS并实现一个自己的模块加载器 (一)

    RequireJS & SeaJS 在 模块化开发 开发以前,都是直接在页面上引入 script 标签来引用脚本的,当项目变得比较复杂,就会带来很多问题. JS项目中的依赖只有通过引入JS的顺 ...

  9. webpack常用加载器和插件

    css文件加载器: style-loader,css-loader,sass-loader,less-loader //style和css加载器必须放在一起使用,且style必须放前面(style!c ...

随机推荐

  1. javascript full screen 全屏显示 页面元素

    javascript full screen 全屏显示 页面元素 要想让页面的某个元素全屏显示,就像在网页上看视频的时候,可以全屏观看一样,该怎么实现呢? 一种最简单的方式,就是动态改变你想要全屏显示 ...

  2. Oracle实现主键自增长

    -- 主键设置:xx_id number(24) primary key 1 create sequence XX_seq --序列名称 increment by 1 -- 每次加几个 start - ...

  3. 我的Pandas应用场景

    声明 工作后,很不幸的成为了团队中的QA.QA这个角色吧,说起来高大上,实际很苦逼,一句话概括一下:吃力不讨好!作为新人,公司每月一分钱没少我,至少现在跟开发的待遇是一样的,所以我还是得兢兢业业的对待 ...

  4. WPF/Silverlight中的RichTextBox总结

    WPF/Silverlight中的RichTextBox总结   在WPF或者是在Silverlight中有个非常强大的可以编辑的容器控件RichTextBox,有的时间会采取该控件来作为编辑控件.鉴 ...

  5. 依赖注入(DI)和Ninject

    [ASP.NET MVC 小牛之路]04 - 依赖注入(DI)和Ninject 本文目录: 1.为什么需要依赖注入 2.什么是依赖注入 3.使用NuGet安装库 4.使用Ninject的一般步骤 5. ...

  6. JQuery实现分页程序代码

    JQuery实现分页程序代码 做Web开发的程序员,分页时在所难免的,微软GridView.AspPager等设置分页数据可以自动分页,但是这里浏览器会闪动,用户体验不是很友好,在此我整理了JQuer ...

  7. 搭建基于SSI(struts2,spring,ibatis)的javaEE开发环境

    搭建基于SSI(struts2,spring,ibatis)的javaEE开发环境 最近有很多人不知道如何搭建基于SSI(struts2,spring,ibatis)的J2EE开发环境,这里给大家一个 ...

  8. service structure flowchart [mobile to server via HTTP RESTful API and TCP/IP in a map]

    mobile to server in RESTful and TCP/IP way

  9. day7 面向对象编程

    编程范式 编程是程序员用特定的语法+数据结构+算法组成的代码来告诉计算机如何执行任务的过程,一个程序是程序员为了得到一个任务结果而编写的一组指令的集合,正所谓条条大路通罗马,实现一个任务的方式有很多种 ...

  10. 使用EasyMock对Servlet进行简单的测试

    这是一个WebProject,但不需配置web.xml,因为EasyMock用不上它 首先是用到的实体类User.java package com.jadyer.model; public class ...