本篇博客不是原创，简书的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. 将Windows下的InfluxDB、Grafana做成Windows服务

    从网上下载的Windows下的InfluxDB.Grafana,都是控制台程序,打开窗口后,很容易被别人给关掉,因此考虑做成Windows服务,nssm正是解决该问题的利器. 1.下载nssm htt ...

  2. Access删除某一字段重复的数据但是要保留一条

    如下图所示,Checktime这个字段有很多重复数据,我需要把所有Checktime这个字段重复的都删掉,但是还需要保留一条: 在Access做删除查询怎么做呀,来个Access高手,复制粘贴党请手下 ...

  3. win10下解压版mysql-8.0.12安装教程

    内容转载于:https://blog.csdn.net/hust_hqq/article/details/80572133 在他之上添加了一个:服务名无效的解决方法 1.官网下载安装包 网址:http ...

  4. django静态文件

    django静态文件(js脚本.CSS.图片等) 默认统一放在每一个app的static文件夹下, 通过收集静态文件命令,自动将每一个app下static文件夹下的文件复制到根目录的static文件夹 ...

  5. selenium+Python3.5获取验证码

    其中PIL为Python Imaging Library,已经是Python平台事实上的图像处理标准库了.PIL功能非常强大,但API却非常简单易用. PIL第三方库安装 pip install PI ...

  6. windwos安装RabbitMQ

    目录 windows 安装RabbitMQ 安装erlang 安装rabbitmq 添加windows环境变量 检测rabbitmq状态 启动web管理插件 rabbitmq服务 windows 安装 ...

  7. Flask应用错误处理

    目录 Flask 应用错误处理 错误日志工具 错误处理 注册 处理 日志 排除应用错误 有疑问时,请手动运行 使用调试器 参考 Flask 应用错误处理 应用出错,服务器出错.或早或晚,你会遇到产品出 ...

  8. 解决pycharm下代码报错的问题

    file-----settings------project:Pythonstudy------project structure-----选择要导入的文件并点击OK

  9. 2.1Python数据处理篇之---内建有关数学的函数

    目录 目录 前言 (一)数学相关得内建函数 (二)具体演示 1.求绝对值 2.创建一个复数 3.求商和余数 4.求x得y次幂 5.生成一个序列 6.四舍五入 7.对一个集合求和 8.求最大值 9.求最 ...

  10. Linux 小知识翻译 - 「单CD 的linux」

    这次聊聊「单CD Linux」. 所谓「单CD Linux」,就是不用安装,从CD-ROM启动后就可以使用的Linux. 有名的KNOPPIX就是「单CD Linux」,此外还有Puppy Linux ...