1.Concepts（概念）
At its core, webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph which maps every module your project needs and generates one or more bundles.
what-is-webpack.png
图中可以看到项目中各个模块文件之间的依赖关系（这种依赖关系就是模块间的互相引用），通过webpack的处理，就会生成一个或者多个小的模块文件，如图中生成了两个js模块和一个图片模块文件和一个css模块。
从文档给出的目录大纲可以看出，webpack的核心有几个大的概念如图：
QQ截图20180521140350.png
因此学习的时候应该从Entry,Output,Loaders,Plugins,Mode,Browser Compatibility这几个方面重点学。这也是webpack的核心内容。首先从字面意思理解这几个概念：
Entry:
An entry point indicates which module webpack should use to begin building out its internal dependency graph, webpack will figure out which other modules and libraries that entry point depends on (directly and indirectly).
By default its value is./src/index.js, but you can specify a different (or multiple entry points) by configuring the entry property in the webpack configuration
这段话也摘自官方，大概意思是说webpack在构建依赖生成包模块是有章可循的，最终生成的是一个个小模块，有输出就一定有输入，然后根据这个入口文件来直接或间接的打包相关依赖。因此entry是用来配置入口文件的。有一个默认值为'./src/index.js',但是可以根据webpack的配置属性来修改这个默认值，也可以配置多个入口文件。
Output:
The output property tells webpack where to emit the bundles it creates and how to name these files,大概意思就是告诉webpack，将依赖图最终生成的模块如何命名，并且要放在什么地方（在那个目录下？）
Loaders:
Out of the box, webpack only understands JavaScript files. Loaders allow webpack to process other types of files and converting them into valid modules that can be consumed by your application and added to the dependency graph.大概意思就是webpack本身只能处理js文件，但是webpack内部生成的依赖关系可不只有js文件，还有其他的文件如css,image,scss,less等等文件，但是通过对应的loaders就可以让webpack来处理对应的文件类型，这样有了loaders，无论什么样的文件，只要有对应的loader，webpack都是能处理的。一言以蔽之，loaders能够转换文件类型。
Plugins:
While loaders are used to transform certain types of modules, plugins can be leveraged to perform a wider range of tasks, from bundle optimization, assets management or inject environment variables.摘自官方文档，大概意思是虽然loaders能够转换某一特定的文件类型，但是插件能够提供的功能比loaders更多，如捆绑优化，资产管理，注入环境变量（注入环境变量可以帮助用户在执行项目构建时使用自定义的变量值动态替换自定义的变量。），虽然不是很理解什么捆绑优化，资产管理，但字面意思来理解就是插件可以在构建项目的时候做一些优化操作，比如代码的压缩，自动添加前缀等等，。
Mode:
By setting the mode parameter to either development, production or none, you can enable webpack's built-in optimizations that correspond to each environment. The default value is production.大概意思是通过将mode参数设置为development，production或none，您可以启用webpack内置的与每个环境相对应的优化。 默认值是生产。具体一点就是可以做一些与环境相关的优化操作。所谓的环境指的是开发环境还是生产环境，比如开发环境下可能会开启一些列的工具检测，代码注释，但是在生产环境不需要这些。
webpack supports all browsers that are ES5-compliant (IE8 and below are not supported). webpack needs
Promiseforimport()andrequire.ensure(). If you want to support older browsers, you will need to load a polyfill before using these expressions.
大概意思就是说webpack支持所有符合ES5标准的浏览器（不支持IE8及以下版本）。如果需要支持更低的浏览器就需要对应的补丁了。
2.了解了webpack的核心概念，再来看一个最基础的例子
Webpack is used to compile JavaScript modules. Once installed, you can interface with webpack either from its CLI or API.
意思是Webpack用于编译JavaScript模块。 安装完成后，您可以通过其CLI或API与webpack进行连接。因此使用webpack的第一步是安装，具体步骤如下：
step1:
First let's create a directory, initialize npm, install webpack locally, and install the webpack-cli (the tool used to run webpack on the command line):意思为首先需要创建一个文件夹目录，用npm进行初始化，本地安装webpack 和webpack-cli命令如下：
- mkdir webpack-demo && cd webpack-demo
- npm init -y
npm install webpack webpack-cli --save-dev
执行完毕后就会生成这样一个目录：
26.png
step2:
在项目更目录下创建如下的文件和文件夹：27.png
并在对应的文件中添加一些内容：
index.js:
下载安装 npm install --save lodashimport _ from 'lodash'; function component() { var element = document.createElement('div'); // Lodash, currently included via a script, is required for this line to work // 引用了_变量，因此必须保证lodash脚本在index.js之前引入 element.innerHTML = _.join(['Hello', 'webpack'], ' '); return element; } document.body.appendChild(component());index.html:
<!DOCTYPE html> <html> <head> <title></title> <script src="https://unpkg.com/lodash@4.16.6"></script> </head> <body> <script src="./dist/main.js"></script> </body> </html>
step3:
We also need to adjust our package.json file in order to make sure we mark our package as private, as well as removing the main entry. This is to prevent an accidental publish of your code意思是修改package.json文件，以确保我们将包标记为私有文件，并删除主条目。 这是为了防止意外发布您的代码。
package.json:{ "name": "webpack-demo", "version": "1.0.0", "description": "", "main": "index.js", // 这一行删除 "private": true, // 新添加这一行 "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "webpack": "^4.8.3", "webpack-cli": "^2.1.3" } }
step4:
在根目录运行npx webpack，运行完毕后在浏览器打开index.html,不出意外的话就会看大在浏览器上输出了Hello webpack。
很神奇，index.html中引入到dist/main.js并不是我们自己编写的，却能引入，这是因为我们在运行webpack的时候没有指定输入和输出，webpack就用的自己默认的输入和输出。默认输入是./src/index.js， 默认输出是./dist/main.js.完成编译后会在对应的输出目录生成/dist/main.js文件。
做到这一步貌似也用到了webpack，但好像上面提及到的webpack的核心内容一个也没有见到，唯一认识到的也只是webpack默认的输入和输出。具体的内容从下章节开始。
网友评论