本篇博客不是原创，简书的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. 【详细】【转】CentOS 7部署ASP.NET Core应用程序

    很早就看过关于net core部署在Linux上的文章,自己也曾亲自将项目部署在Linux上,今天看到这篇文章,为其格式之工整而转! 1.环境准备 网上看了一下,Linux云服务器还挺贵的,那就只好先 ...

  2. (后端)Java新人入职——配置环境及安装开发工具（完全）

    转自csdn:执笔记忆的空白 很多新人对于进入新公司,相关工具的安装和环境变量的设定很苦恼.又苦于没有完整的配置开发环境的资料,我这里写一篇操作步骤的案例, 至少让你能把开发工具安装起来,并实用起来, ...

  3. C++中cin.clear()的用法

    我们谈谈cin.clear的作用,第一次看到这东西,很多人以为就是清空cin里面的数据流,而实际上却与此相差很远,首先我们看看以下代码: #include <iostream>  usin ...

  4. CSS：float: right 靠右换行的解决方法

    1.float: right的使用用法:使用html代码<span style="float: right">*****</SPAN>,其中*****就是你 ...

  5. Windows 10更新后频繁死机、假死（SSD）

    问题详情: 新版的Windows改变了更新策略,无法设置为不更新系统.在系统更新后,之前的部分设定也会神奇丢失,包括之前设定的解决的这个卡顿问题.于是重新爬文章找解决方案,在这里做个备份. 本文章内容 ...

  6. [Mac] How do I move a window whose title bar is off-screen?

    有时窗口一不小心拖出视野外了,此时无法移动窗口.如何还原? 有人遇到相似问题,已有解决方法: 方法就是,菜单 Windows - Zoom  这时窗口会还原.

  7. python基础、字符串和if条件语句，while循环,跳出循环、结束循环

    一:Python基础 1.文件后缀名: .py 2.Python2中读中文要在文件头写: -*-coding:utf8-*- 3.input用法      n为变量,代指某一变化的值 n = inpu ...

  8. safari 与 chrome 的小区别大BUG

    safari 与 chrome 的小区别大BUG 时间:2016-11-01 17:33:19 作者:zhongxia 原文地址:https://github.com/zhongxia245/blog ...

  9. JS思维导图（转）

    思维导图不得不说是学习及温习的极佳方法,这里转载一波网上他人的精品JS思维导图十张,共同学习,如有冒犯原著可联系本人及时处理.

  10. 【BZOJ4259】残缺的字符串

    [BZOJ4259]残缺的字符串 Description 很久很久以前,在你刚刚学习字符串匹配的时候,有两个仅包含小写字母的字符串A和B,其中A串长度为m,B串长度为n.可当你现在再次碰到这两个串时, ...