本篇博客不是原创，简书的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. Python 解决Python安装包时提示Unable to find vcvarsall.bat的问题

    解决Python安装包时提示Unable to find vcvarsall.bat的问题   by:授客 QQ:1033553122 问题 Python安装包时,提示Unable to find v ...

  2. 安卓开发_计时器（Chronometer）的简单使用

    计时器控件(Chronometer)是一个可以显示从某个起始时间开始一共过去多长时间的本文. 继承自TextView,以文本的形式显示时间内容 该组件有五个方法 1.setBase(): \\用于设置 ...

  3. Android--判断listview上下滑动的方法

    elv_music_res_fragment.setOnScrollListener(new AbsListView.OnScrollListener() { private int mLastFir ...

  4. ubuntu18.04突然无法上网解决方法

    sudo service network-manager stop sudo rm /var/lib/NetworkManager/NetworkManager.state sudo service ...

  5. [20180316]理解db file parallel read等待事件.txt

    [20180316]理解db file parallel read等待事件.txt --//一直对db file parallel read等待事件不理解,因为在实际系统中很少遇到这样的等待事件. S ...

  6. php处理手机号中间的四位为星号****

    在显示用户列表的场景中,一般用到手机号的显示时都需要对手机号进行处理,一般是把中间的四位换成星号****,我本人用php处理的思路是进行替换,用****替换手机号的中间四位 代码如下: $all_lo ...

  7. Eclipse配置和使用Maven

    一.ecplise配置Maven 1.下载eclipse的Maven插件.(有些eclipse版本中已经集成了此Maven插件,可以不用下载). 需要下载m2eclipse插件. 2.安装m2ecli ...

  8. Hadoop2.7.6_07_HA高可用

    1. Hadoop的HA机制 前言:正式引入HA机制是从hadoop2.0开始,之前的版本中没有HA机制 1.1. HA的运作机制 (1)hadoop-HA集群运作机制介绍 所谓HA,即高可用(7*2 ...

  9. win10系统安装两个版本的python，该怎么安装Django

    最近遇到一个问题,系统上安装了python2,7 和python3.5两个版本,然后使用命令:pip install Django 安装Django后却发现以下情况: Traceback (most ...

  10. 【数据库】事务，ACID，CAP和一致性

    什么是事务 事务是指由一系列数据库操作组成的一个完整的逻辑过程,这个过程中的所有操作要么都成功,要么都不成功.比如:常见的例子就是银行转账的例子,一次转账操作会包含多个数据库操作,而这些数据库操作需要 ...