1.webpack概念：
webpack是一个静态模块打包机，webpack处理应用程序时，把一个项目当作整体，通过一个给定的主文件开始找到所有的依赖文件，构建一个依赖关系图（这个依赖关系图包含应用程序需要的每个模块），然后使用loaders处理它们，最后打包成一个或多个浏览器可识别的js文件。
2.四个概念核心：
1.入口 （entry）：
入口：指示webpack应该使用哪个模块，来作为构建内部依赖关系图的开始。进入入口起点后，webpack会找出这个入口起点的所有依赖的模块和库。
例子： module.exports = { entry: './path/index.js' }; 2.出口（output）：
出口：告诉webpack在哪里输出它所创建的bundles，以及如何命名这些文件。
例子： module.exports = { entry: './path/index.js'， output: { path: path.resolve(__dirname, './dist'), filename: 'my-first-webpack.bundle.js' } };3.loader：
loader：webpack本身只能理解js，loader就是将所有类型的文件转换为webpack能够处理的模块，然后让webpack去处理这些文件。
loader属性：
test ：标识出应该被对应的 loader进行转换的某个或某些文件
use ：进行转换时，应该使用哪个 loader
例子：const config = { output: { filename: 'index.bundle.js' }, module: { rules: [ { test: /\.css$/, use: 'css-loader' } ] } };
注意：对一个单独的 module 对象定义了 rules 属性，里面包含两个必须属性：test 和 use
4.插件（plugins）：
插件：扩展weboack的功能，执行范围更广的任务，可以用来处理各种各样的任务。
例子： const config = { module: { rules: [ { test: /\.txt$/, use: 'raw-loader' } ] }, plugins: [ new HtmlWebpackPlugin({template: './src/index.html'}) ] };
