webpack 是什么？
本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
主要概念，及作用，及使用方式？主要概念：entry，output，loader，plugins
entry（输入）：
entry: {[entryChunkName: string]: string|Array<string>}
指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。
const config = {entry: {
pageOne: './src/pageOne/index.js',
pageTwo: './src/pageTwo/index.js',
pageThree: './src/pageThree/index.js'
}
};
在entry中可以配置多个入口（多页面应用），使用CommonsChunkPlugin可以为每个页面间的应用程序共享代码创建bundle，多页应用能够复用入口起点之间的大量代码/模块。
output（输出）：
配置 output 选项可以控制 webpack 如何向硬盘写入编译文件。注意，即使可以存在多个入口起点，但只指定一个输出配置。
output的属性是一个包含filename，path 的对象
filename ：输出文件的文件名
path：目标输出目录的绝对路径
用多个入口起点或使用像 CommonsChunkPlugin 这样的插件），则应该使用来确保每个文件具有唯一的名称
{entry: {
app: './src/app.js',
search: './src/search.js'
},
output: {
filename: '[name].js', // 确保每个文件具有唯一的名称
path: __dirname + '/dist'
}
}
loader
loader 用于对模块的源代码进行转换，更加灵活地引入细粒度逻辑，例如压缩、打包、语言翻译。。。
三种使用方式：
（推荐）：在 webpack.config.js 文件中指定 loader。
：在每个 import 语句中显式指定 loader。
：在 shell 命令中指定它们。
module.exports = {module: {
rules: [
{ test: /\.css$/, use: 'css-loader' },
{ test: /\.ts$/, use: 'ts-loader' }
]
}
};
plugins（插件）：
插件目的在于解决 loader 无法实现的其他事，webpack 插件是一个具有 属性的 JavaScript 对象。
插件可以携带参数/选项，你必须在 webpack 配置中，向 plugins 属性传入 new 实例
const HtmlWebpackPlugin = require('html-webpack-plugin'); //通过 npm 安装plugins: [
new HtmlWebpackPlugin({template: './src/index.html'})
]