Webpack v4.8.3 官方版

Webpack中文版是一款专业的前端资源模块化管理和打包工具，可以帮助开发者将JS、CSS、IMG等静态资源打包成一个模块，方便部署前端资源，还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。Webpack中文版具有Grunt、Gulp对于静态资源自动化构建的能力，弥补了requireJS在模块化方面的缺陷，是当下最热门的前端框架架构工具。

Webpack中文版软件介绍

Webpack中文版是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。

Webpack中文版框架特点

代码拆分

Webpack 有两种组织模块依赖的方式，同步和异步。异步依赖作为分割点，形成一个新的块。在优化了依赖树后，每一个异步区块都作为一个文件被打包。

Loader

Webpack 本身只能处理原生的 JavaScript 模块，但是 loader 转换器可以将各种类型的资源转换成 JavaScript 模块。这样，任何资源都可以成为 Webpack 可以处理的模块。

智能解析

Webpack 有一个智能解析器，几乎可以处理任何第三方库，无论它们的模块形式是 CommonJS、 AMD 还是普通的 JS 文件。甚至在加载依赖的时候，允许使用动态表达式 require("./templates/" + name + ".jade")。

插件系统

Webpack 还有一个功能丰富的插件系统。大多数内容功能都是基于这个插件系统运行的，还可以开发和使用开源的 Webpack 插件，来满足各式各样的需求。

快速运行

Webpack 使用异步 I/O 和多级缓存提高运行效率，这使得 Webpack 能够以令人难以置信的速度快速增量编译。

Webpack中文版框架优势

1 按需加载模块，按需进行懒加载，在实际用到某些模块的时候再增量更新

2 webpack 是以 commonJS 的形式来书写脚本，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移。

3 能被模块化的不仅仅是 JS 了，能处理各种类型的资源。

4 开发便捷，能替代部分 grunt/gulp 的工作，比如打包、压缩混淆、图片转base64等。

5 扩展性强，插件机制完善

Webpack中文版功能介绍

生成Source Maps（使调试更容易）

开发总是离不开调试，方便的调试能极大的提高开发效率，不过有时候通过打包后的文件，你是不容易找到出错了的地方，对应的你写的代码的位置的，Source Maps就是来帮我们解决这个问题的。

通过简单的配置，webpack就可以在打包时为我们生成的source maps，这为我们提供了一种对应编译文件和源文件的方法，使得编译后的代码可读性更高，也更容易调试。

使用webpack构建本地服务器

想不想让你的浏览器监听你的代码的修改，并自动刷新显示修改后的结果，其实Webpack提供一个可选的本地开发服务器，这个本地服务器基于node.js构建，可以实现你想要的这些功能，不过它是一个单独的组件，在webpack中进行配置之前需要单独安装它作为项目依赖

Loaders

鼎鼎大名的Loaders登场了！

Loaders是webpack提供的最激动人心的功能之一了。通过使用不同的loader，webpack有能力调用外部的脚本或工具，实现对不同格式的文件的处理，比如说分析转换scss为css，或者把下一代的JS文件（ES6，ES7)转换为现代浏览器兼容的JS文件，对React的开发而言，合适的Loaders可以把React的中用到的JSX文件转换为JS文件。

Loaders需要单独安装并且需要在webpack.config.js中的modules关键字下进行配置，Loaders的配置包括以下几方面：

test：一个用以匹配loaders所处理文件的拓展名的正则表达式（需要）

loader：loader的名称（需要）

include/exclude:手动添加需要处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）；

query：为loaders提供额外的设置选项（可选）

Babel

Babel其实是一个编译JavaScript的平台，它可以编译代码帮你达到以下目的：

让你能使用最新的JavaScript代码（ES6，ES7...），而不用管新标准是否被当前使用的浏览器完全支持；

让你能使用基于JavaScript进行了拓展的语言，比如React的JSX；

一切皆模块

Webpack有一个不可不说的优点，它把所有的文件都都当做模块处理，JavaScript代码，CSS和fonts以及图片等等通过合适的loader都可以被处理。

插件（Plugins）

插件（Plugins）是用来拓展Webpack功能的，它们会在整个构建过程中生效，执行相关的任务。

Loaders和Plugins常常被弄混，但是他们其实是完全不同的工具，可以这么来说，loaders是在打包构建过程中用来处理源文件的（JSX，Scss，Less..），一次处理一个，插件并不直接操作单个文件，它直接对整个构建过程其效果。

Webpack有很多内置插件，同时也有很多第三方插件，可以让我们完成更加丰富的功能。

Webpack中文版安装教程

安装NPM

安装webpack需要用到npm，npm是什么呢？其实就是NodeJS的包管理工具。因为我们试用各种框架会需要依赖多种JS代码包，如果需要就到网上搜索解压安装，会很繁琐，于是npm就应运而生。它是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题。开发者将自己编写的包或者命令行程序上传到NPM服务器，供别人安装使用。由于新版NodeJs已经集成npm，所以安装NodeJs的时候npm就已经安装好。

查看npm版本：

在命令行工具(使用window系统，命令行工具安装git bash）中输入npm -v

安装webpack

接下来就开始一步一步安装使用webpack

先创建项目目录结构,

Index.css和主逻辑文件.app.js,以及作为模块文件module.js。将来app.js 和 module.js都会整合到将来生成的bundle.js文件中，index.html直接引用bundle.js文件就可以了。webpack.config.js是webpack的配置文件，稍后会详细说明。

原材料准备好了，接下来我们就开始正式安装webpack了。

（1）首先要在根目录下生成package.json文件，它会显示以后我们通过npm安装的各种依赖包，我们通过终端进入根目录，执行：npm init

然后终端会让我们输入一堆信息，随便写即可。最后输入yes确认，会发现我们的根目录下自动生成了一个package.json文件。

内容就是一堆json数据，基本就是我们刚才在终端里输入的信息，大致如下：

package.json生成好了我们先放一放。

２、接下来通过全局安装webpack

在终端执行cd —退出项目目录，回到全局，然后执行npm -install -g webpack

这样就安装好了webpack，可以通过webpack -v来查看是否安装成功。

3.然后我们进入项目根目录局部安装webpack，进入项目根目录，执行：npm install webpack —save-dev

如果看到了这一页说明局部安装webpack成功了。此时根目录下会出现一个node_modules文件夹。

以后我们在根目录下通过npm安装的各种依赖包都会默认安装到这个文件夹下面。

至此，webpack框架就安装准备好了。

webpack中文版使用方法

前提是本地已布置node环境，那么第一步，全局安装webpack模块。终端输入

'cnpm install webpack -g'。

接着继续全局安装webpack-cli模块。终端输入

'cnpm install webpack-cli -g'。

这里需要注意，如果你的webpack版本是4以下，忽略此步，因为4以上将这两个模块分离了。

在项目所要在的目录下创建 app 目录，可以终端'mkdir app'或者手动创建。

在app目录下新建index.html，内容如下

继续在app目录下新建work1.js，内容如下

document.write("It works.");

下面就是使用 webpack 命令来打包work.js文件了。

在终端输入'webpack work1.js -o bundle.js --mode development'。

注意这是webpack4以上的命令，4以下直接'webpack work1.js bundle.js'即可。

成功打包，终端中会显示成功信息，如上图框中显示。接下来打开index.html看到正确显示内容。