1: webpack的配置
{entry:{app:'./src/app.js',search:'./src/search.js'},
output:{filename:'[name].js',path:__dirname+'/dist'}，
mode:'development',
devtool: 'inline-source-map',}
1：入口配置
entry：可以为对象，也可以为数组。一个入口生成一个chunk或者多个入口生成多个chunk时用对象，如果多个入口生成一个chunk时用数组。
注意：无论webpack的配置文件在那个目录下放着，入口文件的路径是以node包所在的目录为根路径
2：输出配置
output：可以为输出单页面，也可以是多页面。
publicPath：在所有的静态资源面前加上公共的目录。上线时所用
3：模式
mode：告知webpack使用内置的模式。模式有两种，development和production，默认是production。设置这两种模式后，会默认将node环境跟着一起设置
4：webpack启动指令
webpack --mode development --config build/webpack.config.js
如果是自己定义的webpack配置文件，那么在命令中需要添加--config指定位置
5:source map
devtool：这个字段用于将编译后的代码映射回原始源代码。
一般开发模式不用配置，默认的配置就可以看到报错或者警告。线上代码需要配置为none
devtool：none
6：热更新
对于webpack的热更新有三种选择
webpack's Watch Mode： webpack内置的热更新方式，只需要在启动时，在命令行上加上--watch即可。缺点：需要手动刷新浏览器
webpack-dev-server：这种热更新方式是webpack会自动搭建一个web服务器,可以自动打开浏览器，当代码改变时，浏览器也会自动刷新
webpack-dev-middleware：相当于一个容器。自己搭建一个node服务器，然后将代码放进这个容器中，接着注册进node服务器中就可以实现热更新。
7：热替换
热替换与热更新的区别是，热更新需要重新加载页面才可以看到效果，而热替换不需要。比如开发的过程中，改变了一个dom的颜色，热替换会保留原来的状态，直接将原来的颜色给替换
热替换也有三种方式
1：通过命令行方式直接进行替换
2：启动webpack-dev-server自带的热替换
使用方法：
只需要在devServer中配置以下代码：
3：使用webpack-hot-middleware中间件。这种方式适用于原来有一个node服务。
使用方法：
1：在入口处如下添加配置
2：插件中添加
3：将中间件注册进服务中
4:在入口处添加（不添加js模块无法热替换）
8:删除未引用的代码 tree shaking
tree shaking用于移除JavaScript脚本中未引用的代码。未引用的代码意思就是比如有一个工具类，里面有多个方法，而你只用来其中的一个，那么其他的代码被称为未引用的代码
使用方法：
1:package.json中配置如下代码：
" sideEffects":false // 这段代码的意思是找到脚本中无用的代码
2：使用压缩插件（UglifyJsPlugin，在webpack4中，只需要将mode配置为production即可。
注意：必须使用es6语法
2：常用的load
1：处理css的load
css-loader
主要负责将css代码转换成js
style-loader
主要负责将css代码从js文件中抽离出来插入到html页面的style标签中
这两个load一般是一起使用
2：处理文件资源，包括图片、字体。。
file-loader：将资源从资源目录拷贝到dist目录下。具体名字、目录可以配置
url-loader：这个loader也是对资源进行处理，和上面的区别就是url-loader可以对图片进行编码，生成dataURl。相当于把图片数据翻译成一串字符，编译进代码中。url-loader的参数可以配置一个界限，如果图片小于这个界限，那么便会编码成dataUrl，否则就和file-loader一样，将图片拷贝到编译生成的目录下。
image-webpack-loader：图片压缩loader，这个loader在配置中，必须放在file-loader或者url-loader之后。
注意：放在前面是无效的
使用方法：
{test:/\.(png|jpg|gif)$/,
use: [
{loader:'url-loader',
options: {limit:8192}
}，
'image-webpack-loader']}
处理的顺序是：先压缩，后进行拷贝或者编码
3：常用的插件
1：html-webpack-plugin
这个插件可以动态生成html文件，同时将我们编译出来的js文件加到html页面中。也可以根据模板生成。
具体使用方法：
https://segmentfault.com/a/1190000011182242
2：clean-webpack-plugin
这个插件可以清空指定的目录，具体使用方法如下：
new CleanWebpackPlugin(['dist'], {
root: process.cwd()
})
root这个参数配置的是根目录。上面这段代码的意思是清空dist目录下的文件
3：optimization.splitChunks
CommonsChunkPlugin已弃用
公共代码抽离插件，可以将公用的文件打包成一个或多个文件
optimization: {
splitChunks: {
chunks:"all",
minSize:0,
name:'common',
minChunks:1
}
},