Webpack和浏览器化

Webpack和Browserify做的工作几乎是一样的，就是处理你的代码，以便在目标环境中使用（主要是浏览器，尽管你可以针对其他环境，如Node）。这样处理的结果是一个或多个bundle-适合目标环境的汇编脚本。
例如，假设您编写了分成模块的ES6代码，并希望能够在浏览器中运行它。如果这些模块是Node模块，浏览器将无法理解它们，因为它们只存在于Node环境中。ES6模块也无法在IE11等旧版浏览器中运行。此外，您可能使用了实验性语言功能（ES的下一个建议），浏览器还没有实现，所以运行这样的脚本只会抛出错误。Webpack和Browserify等工具通过将这些代码转换为浏览器能够执行的形式来解决这些问题。除此之外，它们还可以对这些捆绑包进行各种优化。
然而，Webpack和Browserify在很多方面都不同，Webpack默认提供了很多工具（例如代码拆分），而Browserify只能在下载插件后才能做到这一点，但两者都使用会导致非常相似的结果。这取决于个人偏好（Webpack更流行）。顺便说一句，Webpack不是一个任务运行程序，它只是你的文件的处理器（它通过所谓的加载器和插件来处理它们），并且它可以通过任务运行器来运行（在其他方式中）。

Webpack开发服务器

Webpack Dev Server提供了一个类似于Browsersync的解决方案-一个开发服务器，您可以在其中快速部署您的应用，并立即验证您的开发进度，开发服务器会在代码更改时自动刷新浏览器，甚至将更改的代码传播到浏览器，而无需通过所谓的热模块替换重新加载。

任务运行程序与NPM脚本

我一直在使用Gulp，因为它简洁且易于编写任务，但后来发现我根本不需要Gulp或Grunt。我所需要的一切都可以使用NPM脚本通过其API运行第三方工具来完成。在Gulp、Grunt或NPM脚本之间进行选择取决于您的团队的品味和经验。
虽然Gulp或Grunt中的任务即使对不太熟悉JS的人来说也很容易阅读，但它是另一个需要和学习的工具，我个人更喜欢缩小我的依赖关系，使事情简单。另一方面，将这些任务替换为NPM脚本和（可能是JS）运行这些第三方工具的脚本（例如节点脚本配置和运行rimraf以进行清理）可能更具挑战性。但在大多数情况下，这三个结果是相等的。
示例
至于示例，我建议您看一下这个React starter project，它展示了NPM和JS脚本的完美组合，涵盖了整个构建和部署过程。在名为scripts的属性中。在这里，您通常会遇到类似babel-node tools/run start的命令。Babel-node是一个CLI工具（不用于生产），它首先编译ES6文件tools/run（run.js文件位于tools）-基本上是一个runner实用程序。这个runner将一个函数作为参数并执行它，在本例中是start-另一个实用程序（start.js），负责绑定源文件（客户端和服务器）并启动应用程序和开发服务器（开发服务器可能是Webpack Dev Server或Browsersync）。
更准确地说，start.js创建客户端和服务器端包，启动一个快速服务器，并在成功启动后初始化Browser-sync，在编写本文时是这样的（请参考react starter project以获取最新代码）。

const bs = Browsersync.create();  
bs.init({
      ...(DEBUG ? {} : { notify: false, ui: false }),

      proxy: {
        target: host,
        middleware: [wpMiddleware, ...hotMiddlewares],
      },

      // no need to watch '*.js' here, webpack will take care of it for us,
      // including full page reloads if HMR won't work
      files: ['build/content/**/*.*'],
}, resolve)

最重要的部分是proxy.target，在这里他们设置他们想要代理的服务器地址，可能是http://localhost:3000，Browsersync启动一个服务器监听http://localhost:3001，在这里生成的资产被提供了自动变更检测和热模块替换。还有另一个配置属性files，其中包含单独的文件或模式。Browser-sync监视更改，并在发生更改时重新加载浏览器，但正如注解所述，Webpack用HMR自己照顾看js源代码，所以他们在那里合作。
现在我没有任何类似的Grunt或Gulp配置的例子，但是对于Gulp（与Grunt有些类似），您可以在gulpfile.js中编写单独的任务，如

gulp.task('bundle', function() {
  // bundling source files with some gulp plugins like gulp-webpack maybe
});

gulp.task('start', function() {
  // starting server and stuff
});

在这里你要做的基本上和初学者工具包里的一样，这次是任务运行器，它为你解决了一些问题，但是在学习使用的过程中，它也会出现一些问题和困难，就像我说的，依赖越多，出错的可能性就越大，这就是我想摆脱这些工具的原因。

2018年10月更新

如果您仍然不确定前端开发，您可以在这里快速浏览一个优秀的资源。
https://github.com/kamranahmedse/developer-roadmap

2018年6月更新

如果你从一开始就没有学过现代JavaScript，那么学习现代JavaScript是很坚韧的。如果你是新手，记得看看这篇优秀的文章，以便有一个更好的概述。
https://medium.com/the-node-js-collection/modern-javascript-explained-for-dinosaurs-f695e9747b70

2017年7月更新

最近我从Grab团队找到了一份关于2017年如何进行前端开发的综合指南。您可以查看以下内容。
https://github.com/grab/front-end-guide
我也一直在寻找这一点，因为有很多工具，每一个都在不同的方面给我们带来了好处。社区被划分为像Browserify, Webpack, jspm, Grunt and Gulp这样的工具。你可能也听说过Yeoman or Slush。这不是问题，只是让每个试图理解明确前进道路的人感到困惑。
不管怎样，我想贡献点什么。

目录

• 目录
• 1.软件包管理器
• 国家预防管理
• 鲍尔
• Bower和NPM之间的差异
• Yarn
• 联合散点模型
• 2.模块加载器/捆绑
• 要求JS
• 浏览
• 网络包
• 系统JS
• 3.任务执行者
• 咕噜
• 大口
• 4.脚手架工具
• 雪泥和自耕农

1.软件包管理器

软件包管理器简化了项目依赖项的安装和更新，这些依赖项是如下库：jQuery, Bootstrap等--您的网站上使用的所有内容，而不是由您编写的。
浏览所有的图书馆网站，下载和解压缩档案，将文件复制到项目中-所有这些都被终端中的几个命令所取代。

NPM（一个数字）

它代表：Node JS package manager可以帮助您管理软件所依赖的所有库。您可以在一个名为package.json的文件中定义您的需求，然后在命令行中运行npm install......然后“砰”的一声，您的软件包就被下载并可以使用了。它可以用于front-end和back-end库。

Bower（一个字母）

对于前端包管理，概念与NPM相同。所有库都存储在一个名为bower.json的文件中，然后在命令行中运行bower install。
Bower推荐他们的用户到migrate over to npm or yarn.请小心

Bower与NPM之间的差异

Bower和NPM之间最大的区别是NPM做嵌套的依赖树，而Bower需要一个平面依赖树，如下所示。
引用What is the difference between Bower and npm?

project root
[node_modules] // default directory for dependencies
 -> dependency A
 -> dependency B
    [node_modules]
    -> dependency A

 -> dependency C
    [node_modules]
    -> dependency B
      [node_modules]
       -> dependency A
    -> dependency D

project root
[bower_components] // default directory for dependencies
 -> dependency A
 -> dependency B // needs A
 -> dependency C // needs B and D
 -> dependency D

npm 3 Duplication and Deduplication上有一些更新，请打开文档了解更多详细信息。

Yarn的第一个字母

Facebook最近为JavaScriptpublished开发的一个新的软件包管理器，与NPM相比有更多的优点。使用Yarn，你仍然可以使用NPM和Bower注册表来获取软件包。如果你以前安装过软件包，yarn会创建一个缓存副本，这有助于offline package installs。
第1431章：我的天啊
JSPM是SystemJS通用模块加载器的包管理器，构建在动态ES6模块加载器之上。它不是一个拥有自己规则集的全新包管理器，而是在现有包源代码之上工作。开箱即用，它可以与GitHub和npm一起工作。由于大多数基于Bower的软件包都是基于GitHub的，我们也可以使用jspm来安装这些软件包。它有一个注册表，列出了大多数常用的前端软件包，以便于安装。
查看Bower和jspm之间的差异：Package Manager: Bower vs jspm

2.模块加载程序/捆绑

大多数项目的代码都被分割到几个文件中。您可以只在每个文件中包含一个单独的<script>标记，但是，<script>会建立一个新的HTTP连接，对于小文件--这是模块化的目标--建立连接的时间可能比传输数据要长得多。当脚本下载时，页面上的任何内容都不能更改。

• 下载时间的问题可以通过将一组简单的模块连接到一个文件中并将其缩小来很大程度上解决。

例如

<head>
    <title>Wagon</title>
    <script src=“build/wagon-bundle.js”></script>
</head>

• 但是，性能的提高是以牺牲灵活性为代价的。如果你的模块之间存在依赖关系，那么缺乏灵活性可能会成为一个障碍。

例如

<head>
    <title>Skateboard</title>
    <script src=“connectors/axle.js”></script>
    <script src=“frames/board.js”></script>
    <!-- skateboard-wheel and ball-bearing both depend on abstract-rolling-thing -->
    <script src=“rolling-things/abstract-rolling-thing.js”></script>
    <script src=“rolling-things/wheels/skateboard-wheel.js”></script>
    <!-- but if skateboard-wheel also depends on ball-bearing -->
    <!-- then having this script tag here could cause a problem -->
    <script src=“rolling-things/ball-bearing.js”></script>
    <!-- connect wheels to axle and axle to frame -->
    <script src=“vehicles/skateboard/our-sk8bd-init.js”></script>
</head>

计算机可以比你做得更好，这就是为什么你应该使用一个工具，自动捆绑到一个文件的一切。

然后我们听到了RequireJS，Browserify，Webpack和SystemJS

第1333章【第一更】
它是一个JavaScript文件和模块加载器。它针对浏览器中的使用进行了优化，但也可以用于其他JavaScript环境，如Node。
例如：我的模块.js

// package/lib is a dependency we require
define(["package/lib"], function (lib) {
  // behavior for our module
  function foo() {
    lib.log("hello world!");
  }

  // export (expose) foo to other modules as foobar
  return {
    foobar: foo,
  };
});

在main.js中，我们可以将myModule.js作为依赖项导入并使用它。

require(["package/myModule"], function(myModule) {
    myModule.foobar();
});

然后在我们的HTML中，我们可以引用与RequireJS一起使用。

<script src=“app/require.js” data-main=“main.js” ></script>

阅读更多关于CommonJS和AMD的信息，轻松理解。Relation between CommonJS, AMD and RequireJS?
第1004章【第一更】
允许在浏览器中使用CommonJS的模块。因此，Browserify与其说是一个模块加载器，不如说是一个模块捆绑器：Browserify完全是一个构建时工具，生成一组代码，然后可以在客户端加载这些代码。

从安装了节点& npm的构建计算机开始，并获取软件包：

npm install -g –save-dev browserify

以CommonJS编写模块

//entry-point.js
var foo = require("../foo.js");
console.log(foo(4));

而当高兴的时候，发出命令来管束：

browserify entry-point.js -o bundle-name.js

Browserify递归地查找入口点的所有依赖项，并将它们组装到一个文件中：

<script src="”bundle-name.js”"></script>

Webpack的第一个字母

它捆绑了所有静态资产，包括JavaScript、图像、CSS等，到一个文件中。它还使你能够通过不同类型的加载程序来处理文件。你可以用CommonJS或AMD模块语法来编写你的JavaScript。它以一种从根本上更加集成和固执己见的方式来解决构建问题。在Browserify中，你使用Gulp/Grunt和一长串的转换和插件来完成这项工作。Webpack提供了足够的功能，你通常根本不需要Grunt或Gulp。
基本的用法是超越简单。安装Webpack像Browserify：

npm install -g –save-dev webpack

并向该命令传递一个入口点和一个输出文件：

webpack ./entry-point.js bundle-name.js

第1133章【第一更】
它是一个模块加载器，可以在运行时以当今使用的任何流行格式导入模块它构建在ES6模块加载程序polyfill之上，并且足够智能，能够检测正在使用的格式并进行适当处理。SystemJS还可以转换ES6代码（使用Babel或Traceur）或使用插件的其他语言（如TypeScript和CoffeeScript）。
想知道什么是node module，为什么它不能很好地适应浏览器。
更有用的文章：

• https://medium.com/@housecor/browserify-vs-webpack-b3d7ca08a0a9#.c1q7ao3h4
• http://jamesknelson.com/which-build-system-should-i-use-for-my-javascript-app/显示器
• https://appendto.com/2016/06/the-short-history-of-javascript-module-loaders/

为什么选择jspm和SystemJS？
ES6模块化的主要目标之一是使从Internet上的任何地方安装和使用任何Javascript库（Github、npm等）变得非常简单。

• 使用单个命令安装库
• 一行代码即可导入并使用该库

因此，借助jspm，您可以做到这一点。
1.使用以下命令安装库：jspm install jquery个
1.导入库只需一行代码，无需在HTML文件内部进行外部引用。

显示.js

var $ = require('jquery');

$('body').append("I've imported jQuery!");

1.然后在导入模块之前在System.config({ ... })中配置这些内容。通常在运行jspm init时，会有一个名为config.js的文件用于此目的。
1.要运行这些脚本，我们需要在HTML页面上加载system.js和config.js，然后使用SystemJS模块加载器加载display.js文件。

索引.html

<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
  System.import("scripts/display.js");
</script>

注意：你也可以将npm与Webpack一起使用，因为Angular 2已经应用了它。由于jspm是为了与SystemJS集成而开发的，并且它是在现有npm源代码的基础上工作的，所以你的答案取决于你。

3.任务运行程序

任务运行器和构建工具主要是命令行工具。为什么我们需要使用它们：一句话：自动化。在执行重复性任务（如缩小、编译、单元测试、擦除）时，您需要做的工作就越少，而这些任务以前需要花费我们大量的时间来使用命令行甚至手动执行。
第1244章【第一更】
你可以为你的开发环境创建自动化来预处理代码或者用一个配置文件创建构建脚本，这似乎很难处理一个复杂的任务。
Grunt中的每个任务都是一个不同插件配置的数组，这些配置以严格独立和顺序的方式一个接一个地执行。

grunt.initConfig({
    clean: {
    src: ['build/app.js', 'build/vendor.js']
    },

    copy: {
    files: [{
        src: 'build/app.js',
        dest: 'build/dist/app.js'
    }]
    }

    concat: {
    'build/app.js': ['build/vendors.js', 'build/app.js']
    }

    // ... other task configurations ...

});

grunt.registerTask('build', ['clean', 'bower', 'browserify', 'concat', 'copy']);

Gulp的第一次

自动化就像Grunt一样，但你可以用流来编写JavaScript，就像它是一个节点应用程序一样，而不是配置。
这是一个Gulp示例任务声明。

//import the necessary gulp plugins
var gulp = require("gulp");
var sass = require("gulp-sass");
var minifyCss = require("gulp-minify-css");
var rename = require("gulp-rename");

//declare the task
gulp.task("sass", function (done) {
  gulp
    .src("./scss/ionic.app.scss")
    .pipe(sass())
    .pipe(gulp.dest("./www/css/"))
    .pipe(
      minifyCss({
        keepSpecialComments: 0,
      })
    )
    .pipe(rename({ extname: ".min.css" }))
    .pipe(gulp.dest("./www/css/"))
    .on("end", done);
});

查看更多：https://preslav.me/2015/01/06/gulp-vs-grunt-why-one-why-the-other/

4.脚手架工具

雪泥和自耕农
你可以用它们创建一个入门项目。例如，你计划用HTML和SCSS构建一个原型，而不是手动创建一些文件夹，如scss，css，img，fonts。你可以只安装yeoman并运行一个简单的脚本。然后这里的一切都为你。
查找更多here。

npm install -g yo
npm install --global generator-h5bp
yo h5bp

型
查看更多：https://www.quora.com/What-are-the-differences-between-NPM-Bower-Grunt-Gulp-Webpack-Browserify-Slush-Yeoman-and-Express
我的答案与问题的内容不匹配，但当我在谷歌上搜索这些知识时，我总是看到问题在上面，所以我决定概括地回答它。我希望你们能找到有用的答案。
如果你喜欢这篇文章，你可以在我的博客上阅读更多。感谢访问：）

好的，它们都有一些相似之处，它们以不同但相似的方式为您做同样的事情，我将它们分为3个主要组如下：
1）模块捆绑包

webpack和browserify是流行的，工作方式类似于任务运行器，但更灵活，它会将所有内容捆绑在一起作为您的设置，所以您可以将结果指向bundle.js，例如在一个包含CSS和Javascript的单个文件中，有关每个的更多详细信息，请查看下面的详细信息：

网络包

webpack是一个用于现代JavaScript应用程序的模块捆绑器。当webpack处理你的应用程序时，它递归地构建一个依赖关系图，其中包括你的应用程序所需要的每个模块，然后将所有这些模块打包成少量的捆绑包--通常只有一个--由浏览器加载。
它的可配置性令人难以置信，但要开始使用，您只需要了解四个核心概念：条目、输出、加载程序和插件。
本文档旨在对这些概念给予高层次的概述，同时提供指向详细概念特定用例的链接。
更多here

浏览器化

Browserify是一个开发工具，它允许我们编写node. js样式的模块，这些模块可以在浏览器中编译使用。就像node一样，我们在单独的文件中编写模块，使用module.exports和exports变量导出外部方法和属性。我们甚至可以使用require函数请求其他模块，如果我们省略了相对路径，它会解析到node_modules目录中的模块。
更多here

2）任务运行者

gulp和grunt是任务运行程序，基本上他们做什么，创建任务，并在你想的时候运行它们，例如你安装了一个插件来缩小你的CSS，然后每次运行它来做缩小，关于每一个的更多细节：
"咕噜"
gulp.js是由Fractal Innovations和GitHub开源社区开发的一个开源JavaScript工具包，用作前端Web开发中的流式构建系统。（NPM），用于自动执行Web开发中涉及的耗时且重复的任务，如缩小、连接、缓存破坏、单元测试、去毛优化等。Gulp使用代码覆盖配置的方法来定义其任务，并依靠其小型、单一用途的插件来执行这些任务。Gulp生态系统有1000多个这样的插件可供选择。
更多here
"咕噜"
Grunt是一个JavaScript任务运行器，一个用于自动执行常用任务的工具，如缩小、编译、单元测试、删除等。它使用命令行界面来运行文件（称为Gruntfile）中定义的自定义任务。Grunt由Ben Alman创建，用Node.js编写。它通过npm分发。目前，Grunt生态系统中有超过5000个插件可用。
更多here

3）软件包管理器

软件包管理器，他们所做的是管理插件，你需要在你的应用程序，并安装他们通过github等为您使用package.json，非常方便地更新您的模块，安装他们和共享您的应用程序，更多的细节为每个：

国家/分钟

npm是JavaScript编程语言的软件包管理器。它是JavaScript运行时环境Node.js的默认软件包管理器。它由一个命令行客户端（也称为npm）和一个公共软件包的联机数据库（称为npm注册表）组成。注册表通过客户端访问，可用的软件包可以通过npm网站浏览和搜索。
更多here
"船头"
Bower可以管理包含HTML、CSS、JavaScript、字体甚至图像文件的组件。Bower不会连接或缩小代码或做其他任何事情-它只会安装你需要的包的正确版本及其依赖项。开始时，Bower从各处获取并安装包，负责搜索、查找、下载并保存您要查找的内容。Bower在清单文件bower.json中跟踪这些包。
更多here
最新的软件包管理器也不容错过，与我以前经常使用的npm相比，它在真实的工作环境中更年轻、速度更快，在重新安装模块时，它会仔细检查node_modules文件夹以检查模块是否存在，而且安装模块所需的时间似乎更少：

Yarn

Yarn是一个代码包管理器。它允许您使用代码并与世界各地的其他开发人员共享代码。Yarn可以快速、安全、可靠地完成这一任务，因此您永远不必担心。
Yarn允许您使用其他开发人员的解决方案来解决不同的问题，使您更容易地开发自己的软件。如果您有问题，您可以报告问题或提供反馈，当问题得到解决时，您可以使用Yarn来保持所有内容的最新状态。
代码是通过一个包（有时也称为模块）来共享的。一个包包含所有共享的代码以及一个描述该包的package.json文件。

更多here

您可以在npmcompare上找到一些技术比较
Comparing browserify vs. grunt vs. gulp vs. webpack
正如你所看到的，webpack维护得很好，平均每4天就有一个新版本出来。但是Gulp似乎拥有最大的社区（Github上有超过20K的明星）Grunt似乎有点被忽视（与其他相比）
所以如果要选一个的话，我会选Gulp

什么是webpack & webpack-dev-server？官方文档说它是一个模块捆绑器，但对我来说它只是一个任务运行器。有什么区别吗？
webpack-dev-server是一个实时重新加载的Web服务器，Webpack 开发人员可以使用它来获得即时反馈。它只应在开发期间使用。
这个项目受到了nof5单元测试工具的极大启发。
顾名思义，Webpack 将为web创建一个 SINGLE包时代。该包将被最小化，并组合成一个文件（我们仍然生活在HTTP 1.1时代）。Webpack 具有组合资源（JavaScript、CSS、图像）并注入它们的魔力，如下所示：<script src="assets/bundle.js"></script> .
它也可以称为 * 模块捆绑器 ，因为它必须了解模块依赖关系，以及如何获取依赖关系并将它们捆绑在一起。
你会在哪里使用browserify？我们不能在node/ES6导入中做同样的事情吗？
您可以在使用 Webpack 的相同任务中使用 Browserify。- Webpack 更紧凑。
请注意， Webpack 2 * 中的ES6 module loader features使用的是 System.import，没有一个浏览器本身支持它。
你什么时候会在npm +插件上使用gulp/grunt？
您可以直接使用npm命令行脚本来代替forgetGulp、Grunt、Brokoli、Brunch和Bower，您可以消除额外的软件包，如以下针对 Gulp 的软件包：

var gulp        = require('gulp'),
  minifyCSS     = require('gulp-minify-css'),
  sass          = require('gulp-sass'),
  browserify    = require('gulp-browserify'),
  uglify        = require('gulp-uglify'),
  rename        = require('gulp-rename'),
  jshint        = require('gulp-jshint'),
  jshintStyle   = require('jshint-stylish'),
  replace       = require('gulp-replace'),
  notify        = require('gulp-notify'),

在为项目创建配置文件时，你可以使用 Gulp 和 Grunt 配置文件生成器。这样你就不需要安装 Yeoman 或类似的工具。

Webpack是一个捆绑器。像Browserfy一样，它在代码库中查找模块请求（require或import），并递归地解析它们。更重要的是，您可以配置Webpack来解析类似JavaScript的模块，还可以解析CSS、图像、HTML，几乎所有内容。Webpack让我特别兴奋的是，你可以在同一个应用程序中合并编译的和动态加载的模块。因此，你可以获得真实的的性能提升，特别是在HTTP/1.x上。你是如何做到的我在这里用例子描述了http://dsheiko.com/weblog/state-of-javascript-modules-2017/作为bundler的替代品，你可以考虑Rollup.js（https://rollupjs.org/），它在编译期间优化代码，但剥离所有找到的未使用的块。
对于AMD，可以使用本机ES2016 module system代替RequireJS，但加载了System.js（https://github.com/systemjs/systemjs）
除此之外，我想指出的是，npm经常被用作一个自动化工具，比如grunt或gulp。看看https://docs.npmjs.com/misc/scripts。我个人现在只使用npm脚本，而不使用其他自动化工具，尽管过去我非常喜欢grunt。使用其他工具，你必须依赖于无数的插件包，npm知道它的软件包，所以你可以通过名称调用任何本地安装的软件包，比如：

{
  "scripts": {
    "start": "npm http-server"
  },
  "devDependencies": {
    "http-server": "^0.10.0"
  }
}

实际上，如果软件包支持CLI，通常不需要任何插件。

Yarn是最近的一个包经理，大概值得一提。
所以，这就是：https://yarnpkg.com/
据我所知，它可以获取npm和bower依赖项，并具有其他值得赞赏的特性。