1）webpack动态打包所有依赖项，避免打包未使用的模块。
2）转换css的loader有：css-loader，style-loader，加载图片或文件的loader是：file-loader，如果要压缩和优化图像，使用image-webpack-loader和url-loader。
3）加载字体，file-loader也可以进行字体资源的处理，可以用于任何类型的文件：woff,woff2,eot,ttf,otf等，使用font-face进行字体的设置。
4）加载XML，CSV数据等，需要使用csv-loader,xml-loader。JSON支持是内置的，这个类似于NodeJS。
5）HtmlWebpackPlugin默认生成index.html文件，替换原来在dist文件下的index.html。
可以看出HtmlWebpackPlugin创建了一个全新的文件，所有的bundle会自动添加到html中。
6）webpack打包后的代码/dist文件夹下，但是webpack无法追踪哪些文件是实际项目中用到，需要在构建前清理/dist文件夹，clean-webpack-plugin是个管理插件，可以用来清理打包后文件夹中的旧文件。
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry:{
app:'./src/index.js',
print:'./src/print.js'
},
mode:'production',
output:{
filename:'[name].bundle.js',
path:path.resolve(__dirname,'dist')
},
plugins:[
new HtmlWebpackPlugin({
title:'Output Management'
}),
new CleanWebpackPlugin(['dist']),
]
}
重新npm run start后，可以看出以前的bundle.js等不用的文件重新被清理，然后新的依赖打包后文件输出。
7）使用source map,通常浏览器里面运行的文件时打包编译后的bundle.js文件，如果源文件有错误，那么堆栈智慧简单指向bundle.js，没多大帮助，JavaScript提供了source map功能，将编译后的代码映射回源码。source map不是什么plugin或者loader，仅仅就是javascript的功能。这对于实际开发过程中非常有帮助。
sourceMap不仅支持调试javascript，对于css的调试，只需要在css的相关loader中打开devtool的sourMap开关即可。
8）"watch":"webpack --watch"，npm run watch可以进行script脚本的观察，但是需要刷新浏览器。要实现自动刷新浏览器，则需要使用webpack-dev-server，它提供了一个简单的web服务器，并且能够实现实时重新加载，需要install webpack-dev-server。
9）webpack-dev-middleware，是一个容器，webpack-dev-server在内部使用了它，作为单独的包使用时，例如配合express中间件的使用，把webpack处理后的文件传递给一个服务器。
10）模块热更新（Hot Module Replacement），HRM，运行更新而无需完全刷新，适用于开发环境。HRM是webpack内置的插件，使用的时候在plugins里面，webpack.HotModuleReplacementPlugin()。webpack.namedModulesPlugin是为了更容易查看要修补的依赖，
【bug警示！！！】实际练习中，使用了module.hot条件，进行module.hot.accept方法的执行，发现视图并未热更新，后检查CLI的执行方法，发现使用的是npm run server。
而HRM是webpack-dev-server的hot参数设置为true，所以应该使用npm run start进行热更新运行。
11）tree shaking，用于移除JavaScript上下文中没有引用的代码。在package.json文件中添加sideEffects入口。
tree shaking：应用程序想象成一颗树，绿色代表实际用到的源码和库，是有活力的树叶，灰色代表无用代码，是枯萎的树叶，为了除去死去的树叶，必须摇动这颗树，使得它们落下。
【这也算是优化输出的一种解决方案】
12）webpack4通过配置mode模式为production，可以直接压缩输出。
13）目前webpack4因为零配置思想，需要你手动去安装uglify-webpack-plugin。webpack4.XX新增的mode默认是production，本身继承了UglifyPlugin，所以不需要再引入，开发环境则不需要压缩编译浪费时间，提高开发效率。
在script中的build执行命令中，加上“webpack --mode production”会自动压缩打包。
UglifyJS 是一个js 解释器、最小化器、压缩器、美化器工具集（parser, minifier, compressor or beautifier toolkit）。
注意:
-
uglify-js@3的API 和 CLI已简化，不再向后兼容uglify-js@2. -
UglifyJS
2.x文档在这里. -
uglify-js只支持 ECMAScript 5 (ES5). -
假如希望压缩 ES2015+ (ES6+)代码，应该使用 uglify-es这个
npm包。
14）开发环境VS生产环境
因为构建目标的差异，开发环境，关注点在：实时重载的热更新模块，source-map和localhost server本地服务器的构建，生产环境关注点：更小的bundle，更轻量级的source-map【一般生产的sourceMap也不会放在服务器】，更优化的资源，更少的加载时间。
所以生产环境配置和开发环境配置一般都是分开写。但是保留了通用配置，使用webpack-merge工具进行合并配置。
webpack.base.js或者webpack.common.js（通用配置），一般设置entry和output，一些公用插件的引入等，webpack.dev.js会添加devtool还有devServer等，而webpack.prod.js则会引入tree shaking删除不必要的模块，以及当mode是production时会自动引用UglifyJS进行压缩打包。
需要在package.json中进行设置start的CLI为"webpack-dev-server --open --config webpack.dev.js"；而build中“webpack --config webpack.prod.js --mode production”。
15）官网鼓励在生产使用source map，但是会加大资源包，真正放在服务器的包还是要剥离该source map文件的。开发中的devtool：'inline-source-map'。可以在开发者模式查看源码。
16）process.env.NODE_ENV环境变量，有两个值，'production'和'development'，是Node.js暴露给执行脚本的系统环境变量，任何在/src下面的本地代码都可以关联该环境变量。
if (process.env.NODE_ENV !== 'production') { console.log('development ENV'); }else{ console.log('production ENV') }
此代码在index.js文件中是执行成功的！！！
17）CSS分离，webpack的理念是将所有的东西都打包在js文件中，包括CSS，图片等，目的很明确就是为了减少http请求，但是劣势明显，随着项目越来越大，js文件也会愈来愈大，所以需要针对css进行分离，进行单独打包。可以使用ExtractTextPlugin将css分离成单独的文件。【css分离也算是webpack的高阶了】
【高级教程提示】Manifest对模块映射到输出bundle的过程保持追踪，manifest的概念以及WebpackManifestPlugin，缓存，代码分离等，是webpack的高阶教程了。
【完】
Today I get through with nothing done is just the tomorrow the men who dead yesterday eager for.
我荒废的今日，正是昨日殒身之人祈求的明日。 ——哈佛校训