本篇博客不是原创，简书的zhangwang写的，原文太长，我这里只是提取了一部分。

原文地址：入门webpack，看这篇就够了

一、Webpack解决了什么问题

问题1.JavaScript这个脚本化语言在互联网的前端大行其道，但其一直被当作玩具语言，与Java、C#等后端语言相比，除了语法混乱、写法随意之外，无法模块化也是被诟病的一点。CommonJS标准中提出了模块化标准，而模块化标准带来的一个新的问题——项目文件增多，依赖复杂。如果工具能帮助我们自动分析文件的依赖关系，那感情是最好的。

问题2.ECMAScript有很多实现，JavaScript、TypeScript、CoffeeScript等，如果TypeScript这样的语言能转换成JavaScript，这样既能利用TypeScript的语法优点，又能利用JavaScript的场景利用的优势，那感情是最好的。

问题3.同理，Scss、Less这些CSS的预处理器，如果能使用Scss开发，并转换成CSS，那感情是最好的。

问题4.还有很多问题。。。。。。。

Webpack能帮你处理上面这些问题，简而言之：Webpack帮助你分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。

二、webpack工作方式

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

三、webpack安装

1.新建一个文件夹进行测试，如test

2.执行命令

$ npm install webpack -g   //全局安装

$ npm install webpack -save-dev //本项目安装

3.查看webpack版本

四、打包方法1：使用命令行来打包

1.新建文件夹hellopack2

2.初始化项目：在项目的根目录下使用npm init命令，根据提示输入一系列的信息，会生成一个package.json文件

3.生成依赖：在项目的根目录下使用npm install命令，会生成node_modules文件夹，里面是各种依赖的包

4.建立如下的文件结构

      5.输入相应的内容   

//index.html,脚本引用了bundle.js，我们的webpack最终就是要生成这个文件

<!DOCTYPE html>

<html>

  <head>

    <title>hellowebpack2</title>

  </head>

  <body>

    <div id='root'>

    </div>

    <script src="bundle.js"></script>

  </body>

</html>
//main.js

var greet=require('./greet')

document.querySelector("#root").appendChild(greet());

document.querySelector("#root").append('Hi there and greetings!');
//greet.js

module.exports = function(){

  var greet = document.createElement('div');

  greet.textContent = "Hi there and greetings!";

  return greet;

};

      6.命令行打包

项目根目录下执行命令：

      7.浏览器查看index.html

 命令说明：

（1）.webpack在打包的时候需要指定一个入口文件，前面说过了：webpack就是通过这个文件来作为依赖的入口，进而分析整个项目，本示例是main.js。

（2）.webpack需要将打包的最终结果输出到一个文件中，这个文件的名称可以自定义，本示例是bundle.js。

五、打包方法2：使用配置文件来打包

如果长期使用$webpack app/main.js pulic/bundle.js来进行打包，不方便且易出错，我们可以将入口文件和输出文件放入配置文件中。

webpack的默认配置文件是webpack.config.js，在项目的根目录下新建这个文件，并放入如下内容：

直接使用命令webpack就可以，如下所示：

在浏览器打开index.html同样能看到效果。

六、打包方法3：使用npm的自定义命令来打包

npm可以通过scripts节点来支持自定义命令，我们可以将webpack这个命令放入npm的配置文件package.json，这样以后，我们可以使用自定义的命令来打包了。

以后输入$npm start就相当于输入了$ webpack。

当然，我们也可以不需要第五点webpack.config.js，可以直接将webpack app/main.js public/bundle.js都放入test的scripts内容中，如下所示：

使用同样的命令，也可以达到效果。

参考文档

     http://www.jianshu.com/p/42e11515c10f

    http://webpack.github.io/

webpackt入门1：webpack介绍&webpack安装&使用webpack打包的更多相关文章

  1. 科学计算三维可视化---Mayavi入门（Mayavi介绍和安装）

    Mayavi介绍 是基于VTK开发的可视化软件(更加高效),Mayavi完全由python编写,方便使用,而且可以使用python编写扩展,嵌入到用户程序中 安装要求 VTK >pip3 ins ...

  2. ElasticSearch入门-基本概念介绍以及安装

    Elasticsearch基本概念 Elasticsearch是基于Lucene的全文检索库,本质也是存储数据,很多概念与传统关系型数据库类似. 传统关系型数据库与Elasticsearch进行概念对 ...

  3. [转载]FFmpeg完美入门[1] - FFmpeg介绍及安装

    1 FFmpeg简介 FFmpeg是一个开源免费跨平台的视频和音频流方案,属于自由软件,采用LGPL或GPL许可证(依据你选择的组件).它提供了录制.转换以及流化音视 频的完整解决方案.它包含了非常先 ...

  4. webpack系列之安装（Mac OS）

    1. webpack介绍,可参考Webpack中文文档 2. 安装webpack之前先需要安装npm,可参看NPM的使用介绍 3. 安装webpack,可参考Webpack入门教程 ========= ...

  5. webpack 介绍 & 安装 & 常用命令

    webpack 介绍 & 安装 & 常用命令 webpack系列目录 webpack 系列 一:模块系统的演进 webpack 系列 二:webpack 介绍&安装 webpa ...

  6. webpack学习（一）：webpack 介绍&安装&常用命令

    一.简单介绍 什么是Webpack Webpack是一款用户打包前端模块的工具,它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源. 主要是用来打包在浏览器端使用的ja ...

  7. webpack介绍 安装 常用命令

    Webpack是一款用户打包前端模块的工具,它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源.主要是用来打包在浏览器端使用的javascript的.同时也能转换.捆绑 ...

  8. webpack入门（一）——webpack 介绍

    如今的网站正在演化为web应用程序: 1. 越来越多的使用JavaScript. 2. 现代浏览器提供更广泛的接口. 3. 整页刷新的情况越来越少,甚至更多代码在同一个页面.(SPA) 因此有很多代码 ...

  9. 前端开发自动化工作流工具，JavaScript自动化构建工具grunt、gulp、webpack介绍

    前端开发自动化工作流工具,JavaScript自动化构建工具grunt.gulp.webpack介绍 前端自动化,这样的一个名词听起来非常的有吸引力,向往力.当今时代,前端工程师需要维护的代码变得及为 ...

随机推荐

  1. javasscript基础

    一.使用JS完成注册表单数据校验 1.需求分析 用户在进行注册的时候会输入一些内容,但是有些用户会输入一些不合法的内容,这样会导致服务器的压力过大,此时我们需要对用户输入的内容进行一个校验(前端校验和 ...

  2. Android 裁剪人脸

    人脸裁剪类 public final class FaceCj { private static BitmapFactory.Options BitmapFactoryOptionsbfo; priv ...

  3. Java并发编程（五）Lock

    一.synchronized的缺陷 synchronized是java中的一个关键字,也就是说是Java语言内置的特性.那么为什么会出现Lock呢? 在上面一篇文章中,我们了解到如果一个代码块被syn ...

  4. Android视屏播放兼容性问题分享

    最近产品提了一个紧急需求:webview加载的URL,需要支持视频播放. 为了快速完成需求,功能实现上直接使用系统自带播放器播放视频.由于是自带播放器,需要进行兼容性测试,过程发现了不少问题,这里分享 ...

  5. Android中SELinux的TE简介【转】

    转自:https://blog.csdn.net/murphykwu/article/details/52457667 selinux的概念如上一篇链接所示: http://www.cnblogs.c ...

  6. Windows Server 2008 R2终端服务器激活方法

    本文描述了如何激活Windows Server 2008 R2的终端服务器的方法. 目录: 1.Windows Server  2008 R2终端服务器的安装 2.Windows Server  20 ...

  7. 启用crontab

    1.登录到root用户. 2.在root下输入:crontab -e 3.可能会提示你: no crontab for root - using an empty one 然后会叫你“Select a ...

  8. OutputStreamWriter与InputStreamReader（转换流）的编码解码

    import java.io.FileInputStream; import java.io.FileNotFoundException; import java.io.FileOutputStrea ...

  9. 【BZOJ2820】YY的GCD

    [BZOJ2820]YY的GCD Description 神犇YY虐完数论后给傻×kAc出了一题 给定N, M,求1<=x<=N, 1<=y<=M且gcd(x, y)为质数的( ...

  10. 数据挖掘十大算法--K-均值聚类算法

    一.相异度计算  在正式讨论聚类前,我们要先弄清楚一个问题:怎样定量计算两个可比較元素间的相异度.用通俗的话说.相异度就是两个东西区别有多大.比如人类与章鱼的相异度明显大于人类与黑猩猩的相异度,这是能 ...