webpack一：四个核心概念：

1.什么是webpack？

webpack是以现代的JavaScript应用程序的静态模块打包器。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

2.四个核心概念：

入口(entry)：

入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。
可以单页面应用 和 多页面应用

输出(output)：

配置 output 选项可以控制 webpack 如何向硬盘写入编译文件。注意，即使可以存在多个入口起点，但只指定一个输出配置。

const config = {
  output: {
    filename: 'bundle.js',    -----filename 用于输出文件的文件名
    path: '/home/proj/public/assets' -------目标输出目录 path 的绝对路径

  }
};

module.exports = config;

如果有多个入口起点

{
  entry: {
    app: './src/app.js',
    search: './src/search.js'
  },
  output: {
    filename: '[name].js',     --- 使用占位符，使文件具有唯一的名称。
    path: __dirname + '/dist'
  }
}

// 写入到硬盘：./dist/app.js, ./dist/search.js

3.loader

loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件

　loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS文件！

4.插件(plugins)

插件目的在于解决 loader 无法实现的其他事。