一.能做什么？
----是一个现代JavaScript 应用程序的静态模块打包器
1.把你的应用拆分成多个文件。如果你的单页应用里用很多页面，用户只会下载当前访问页面的代码。当他们访问应用中的其他页面时，不再需要加载与之前页面重复的通用代码。
2.构建打包css、预处理css、编译js和图片。
它支持AMD、CommonJS...
可以理解为 既能处理js又能处理别的资源文件的加载器（bundler）
二：核心概念
1.入口（entry）
2.输出（output）
3.loader
4.插件（plugins）
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件
const path = require('path');
const config = {
//入口 指示 webpack 应该使用哪个模块
entry: './path/to/my/entry/file.js', //入口文件
//出口
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js' //打包输出的文件
},
//让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块（test[标识被loader进行转换的某个或某些文件]和use[进行转换时，使用哪个loader]两个属性）
module: {
rules: [
{ test: /.txt$/, use: 'raw-loader' }
]
},
//被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。
plugins: [
new webpack.optimize.UglifyJsPlugin(),
new HtmlWebpackPlugin({template: './src/index.html'})
]
};
module.exports = config;
