webpack学习入门（4个核心概念）

以下学习内容来自webpack官方文档 .

还是我自己的习惯，在学习使用某个工具之前，先搞清楚它的核心概念和是什么原理来工作的，这对我很重要。那么，就开始吧 ～

Concepts

webpack是什么？

At its core, webpack is a module bundler for modern JavaScript applications. When webpack processes your application, it recursively builds a dependency graph that includes every module your application needs, then packages all of those modules into one or more bundles.

- - https://webpack.js.org/concepts/

简单的说。webpack的核心就是将JS应用程序打包成模块。当webpack处理我们的程序的时候，会递归的构建一个依赖图，其中包含了应用程序所需的各个模块。然后这些模块会被打包到一个或多个的包。

工作原理图

大概了解了webpack是做什么的之后，我们所需要了解的就是以下四个概念：

Entry

Output

Loaders

Plugins

一.Entry

Entry指示webpack应该从哪个模块开始构建其内部依赖关系图。webpack会找出Entry所依赖的其它模块和库（直接依赖或间接依赖）。每个依赖都会被处理和输出到bundles中。我们可以通过在webpack配置中配置Entry属性来指定一个或多个Entry点。

entry configuration的简单例子：

module.exports = {
entry: './path/to/my/entry/file.js`
},

webpack.config.js

更多Entry配置的内容

二.Output

Output属性通过out.filename和output.path告诉webpack怎么命名打包好的bundles还有将它们发送到哪儿。

可以在配置文件中通过配置Output来处理此过程。例如：

const path = require('path');

module.exports = {
entry: './path/to/my/entry/file.js,
output: {
path: path.resolve(__dirname, 'dust'),
filename: 'my-first-webpack.bundle.js'
}
};

webpack.config.js

output configurable features && read more in the conpets section

三.Loaders

ps:这里不翻译了，还是看英文的更有滋味。

Essentially, webpack loaders transform all types of files into modules that can be included in your application’s dependency graph.

At a high level, loaders have two purposes in your webpack config. They work to:

1. Identify which file or files should be transformed by a certain loader (with the test property).

2. Transform those files so that they can be added to your dependency graph (and eventually your bundle). (use property)

const path = require('path');

const config = {
entry: './path/to/my/entry/file.js,
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js'
},
module: {
rules: [
{ test: /\.txt$/, use: 'raw-loader' }
]
}
};

module.exports = config;

上面的rules的test和use做了下面这些事情：

“Hey webpack compiler, when you come across a path that resolves to a ‘.txt’ file inside of a require()/import statement, use the raw-loader to transform it before you add it to the bundle.”

learn more!

四.Plugins

Plugins 相比 Loaders 可以做更多的任务（捆绑优化和缩小到定义类似环境的变量）

使用Plugins我们需要require()并且把它添加到Plugins数组中。大部分Plugins可以自定义操作，而且我们可以在配置中多次使用Plugins达到不同的目的。因为我们需要new来创建Plugins的实例：

// installed via npm
const HtmlWebpackPlugin = require('html-webpack-plugin');

// to access built-in plugins
const webpack = require('webpack');
const path = require('path');

const config = {
entry: './path/to/my/entry/file.js',
output: {
path: path.resolve(__dirname, 'dust'),
filename: 'my-first-webpack.bundle.js'
},
module: {
rules: [
{ test: /\.txt$/, use: 'raw-loader' }
]
},
plugins: [
new web pack.optimize.UglifyJsPlugin(),
new HtmlWebpackPlugin({template: './src/index.html'})
]
};

module.exports = config;

参考： list of plugins

总结：了解了上述四个核心概念后，对webpack的工作原理还有如何配置已经有了大致的认识。我相信以后用起来也会更加得心应手，不会像以前总说用webpack打包但是都不知道它对工程做了什么这种夸张的问题。期待下面更深入的学习 ～！！