webpack学习系列一（https://webpack.js.org/concepts/ 翻译）

概念

webpack是现代js应用的模块打包器，当用webpack处理你的应用时，它递归的建立一个依赖图，依赖图中包含你的应用需要的所有模块，然后将这些模块打包成少量的包，通常是一个包，供浏览器加载。

它是可配置的，你首先需要理解4个核心概念，entry入口、output出口、loaders加载器、plugins插件。

这个文档将宏观讲述这些概念，同时，利用具体案例具体描述这些概念。

Entry 入口

webpack建立了应用的依赖图，这个图的开始节点就叫做入口节点。入口节点告诉webpack从哪里开始处理依赖图。你可以将入口节点理解为上下文的根目录，或者你的应用的第一个文件。

在webpack 中，利用webpack的configuration对象中的entry属性来定义入口节点。最简单的例子如下：

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

根据你的应用的需要，有许多方式定义你的entry属性。

output出口

当把应用程序需要的资源聚集到一起后，output属性告诉webpack如何处理这些收集起来的代码，

webpack.config.js

const path = require('path');

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

output属性有很多可配置的属性。

Loaders

webpack将所有的文件都视为模块，然而，webpack自身只理解js。loaders负责将这些文件转化成模块并加入依赖图。

loaders在webpack的config中，有2个目的

1.鉴定哪些文件应该被特定loader转换

2.转换这些需要转换的文件。

webpack.config.js

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属性，用了2个必需的属性，test和use。它们告诉webpack编译器如下信息：

hi webpack，当你在require或者import表述中遇到以.txt为后缀的文件时，你用raw-loader转换它，然后再加入集合代码库。

Plugins

Loaders只能检测到单个文件的变化，插件通常针对捆绑模块，webpack的插件系统是非常强大的，可定制的。

为了使用插件，你需要使用require（）方法将插件引入，然后将其添加到插件数组中，大多数的插件通过options选项是可以配置的。由于你可以将一个插件用于不同的用途，所以，你需要将插件实例化。

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const webpack = require('webpack'); //to access built-in plugins
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' }
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

module.exports = config;

webpack提供了很多插件，将在下面的章节详细阐述。