webpack入门与笔记

标签：练习   sample   模块化   apple   情况   pen   还需要   origin   代码   

　　为什要使用WebPack

现今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了很多好的实践方法

• 模块化，让我们可以把复杂的程序细化为小的文件;
• 类似于TypeScript这种在JavaScript基础上拓展的开发语言：使我们能够实现目前版本的JavaScript不能直接使用的特性，并且之后还能能装换为JavaScript文件使浏览器可以识别；
• Scss，less等CSS预处理器

  什么是Webpack

　　WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。

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

　　其实Webpack和另外两个并没有太多的可比性，Gulp/Grunt是一种能够优化前端的开发流程的工具，而WebPack是一种模块化的解决方案，不过Webpack的优点使得Webpack可以替代Gulp/Grunt类的工具。

　　Grunt和Gulp的工作方式是：在一个配置文件中，指明对某些文件进行类似编译，组合，压缩等任务的具体步骤，这个工具之后可以自动替你完成这些任务。

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

　　安装

　　Webpack可以使用npm安装，新建一个空的练习文件夹（此处命名为webpack sample progect），在终端中转到该文件夹后执行下述指令就可以完成安装。

　　正式使用Webpack前的准备

1. 在上述练习文件夹中创建一个package.json文件，这是一个标准的npm说明文件，里面蕴含了丰富的信息，包括当前项目的依赖模块，自定义的脚本任务等等。在终端中使用npm init命令可以自动创建这个package.json文件

   npm init

输入这个命令后，终端会问你一系列诸如项目名称，项目描述，作者等信息，不过不用担心，如果你不准备在npm中发布你的模块，这些问题的答案都不重要，回车默认即可。

1. package.json文件已经就绪，我们在本项目中安装Webpack作为依赖包

   // 安装Webpack
   npm install --save-dev webpack

2. 回到之前的空文件夹，并在里面创建两个文件夹,app文件夹和public文件夹，app文件夹用来存放原始数据和我们将写的JavaScript模块，public文件夹用来存放准备给浏览器读取的数据（包括使用webpack生成的打包后的js文件以及一个index.html文件）。在这里还需要创建三个文件，index.html 文件放在public文件夹中，两个js文件（Greeter.js和main.js）放在app文件夹中，此时项目结构如下图所示

   
   

   项目结构

index.html文件只有最基础的html代码，它唯一的目的就是加载打包后的js文件（bundle.js）

html lang="en">
  head>
    meta charset="utf-8">
    title>Webpack Sample Projecttitle>
  head>
  body>
    div id=‘root‘>
    div>
    script src="bundle.js">script>
  body>
html>

Greeter.js只包括一个用来返回包含问候信息的html元素的函数。

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

main.js用来把Greeter模块返回的节点插入页面。

//main.js 
var greeter = require(‘./Greeter.js‘);
document.getElementById(‘root‘).appendChild(greeter());

正式使用Webpack

webpack可以在终端中使用，其最基础的命令是

webpack {entry file/入口文件} {destination for bundled file/存放bundle.js的地方}

只需要指定一个入口文件，webpack将自动识别项目所依赖的其它文件，不过需要注意的是如果你的webpack没有进行全局安装，那么当你在终端中使用此命令时，需要额外指定其在node_modules中的地址，继续上面的例子，在终端中属于如下命令

//webpack非全局安装的情况
node_modules/.bin/webpack app/main.js public/bundle.js

webpack入门与笔记

标签：练习   sample   模块化   apple   情况   pen   还需要   origin   代码   

原文地址：http://www.cnblogs.com/asand/p/7147006.html