什么是webpack呢？ webpack是一个打包工具，在你打包过程中，它会内部建立一个依赖图谱，这个图谱可以记录项目所用到得模块，在打包最后生成一个或者多个打包文件

核心概念

1、entry

指的是webpack将哪个模块作为打包得入口，webpack会自己找到这个入口依赖得其他模块和库

module.exports { entry: './index.js' }

当入口文件为一个时，这是一个简写的方法。完整的写法如下

module.exports {
    entry:{
        main: './index.js'
    }
}

当我们不为打包好的文件重命名时，打包文件会以此时的键名为文件名，即main.js

2、output

output是告诉webpack将打包好的文件发布在哪个位置，默认得文件位置是'./dist/main.js'

const path = require('path')
module.export {
    entry: './index.js'
    output: {
        path: path.resolve(__direname, dist)
        filename: '文件名字.js'
    }
}

3、loader

webpack只能识别js文件和json文件，其他格式得文件并不识别，为了能将其他格式得文件打包，我们通过loader处理这些格式的文件并将他们转换为有效的模块形式，以便使用

module.export {
    module: {
        rule: [
        {test: /\.txt$/, use: 'raw-loader'}
        ]
    }
}

test属性用来匹配对应的文件， use是将找得到的文件应用对应的loader进行转换

loader也可以是链式的，其中loader顺序也是逆序的

加载顺序： 从右到左，从下到上

4、plugins

plugins是插件的意思，它的作用就是可以在打包的不同阶段，为我们提供不同功能的支持和便利，注意它的执行可以在打包的任何时间段，类似生命周期函数，具体的执行时间，参考所引入plugins的官方文档

const HtmlWebpackPlugin = require('html-webpack-plugin')
const webpack = require('webpack')
module.exports {
   plugins: [
        new HtmlWebpackPlugin({template: './src/index.html'})
   ] 
}

5、mode

mode是区分生产和开发模式的属性，默认mode为production ，区别主要在于打包生成的文件是否压缩

其他

在项目中我们会用到ES6中的语法，这些语法在一些浏览器上并不能应用，所以为了兼容那些低版本或不支持ES6的浏览器，我们要load a polyfill来翻译成ES5的语法

从上面的webpack配置文件我们可以考到node语法的应用，所以当你想应用webpack进行打包时，一定要由node 8.x的环境才可以

配置

热模块更新

所谓的热模块更新，就是在你修改文件内容之后，浏览器不会刷新页面重新请求页面数据，并且对更改内容做替换

在热模块更新我们要在index.js中引入对热模块替换的判断，判断正确，我们接下来要删除原有节点，添加更新之后的节点

配置ES6转ES5配置

npm i babel-loader @babel/core

npm i @babel/preset-env 帮助你将代码转化为ES5的语法

但是仅仅有语法的转化还是不够的，我们还需要有工具帮助我们补充那些在ES5中不存在的变量或者函数，所以我们要用到polifill

npm i @babel/polyfill

然后在js文件头引入import '@babel/polyfill'

其中useBuiltIns是保证按需导入我们需要polyfill的内容

sourcemap

inline-source-map 如果报错，会提示你第几行第几个字符出错，同时因为有inline，我们将生成的.map文件内嵌到打包好的main.js中

cheap-inline-source-map会提升一定的打包速度，因为报错只会提示出现在哪一行

cheap-module-eval-source-map是开发模式下最好的配置

cheap-module-sourc-map是线上环境最好的配置

treeshaking

treeshaking的提出是因为js文件中引入模块的问题，我们为了能够按需引入我们所需要的模块，我们需要引入treeshaking

在webpack.config.js中添加如下，但是如果在开发模式下，就不需要如下配置，系统已经自动配置完

同时在package.json文件中修改如下

其中false的意思就是只要没用到的文件都不保留

开发模式

根据开发模式的不同，我们会创建不同的webpack打包配置文件。由于开发模式和生产模式有很多相同的配置，我们可以创建一个共有配置文件webpack.common.js，将这个文件夹和各模式文件夹merge

在package.json文件夹下我们要修改script标签内的内容

代码分割

将代码进行一定的分割，有助于提高打包速度，实现按修改进行打包

方法一： 在webpack.config.js中添加配置信息

方法二： 异步载入组件，系统会自动将这类组件放到一个文件中

细节配置

当我们想将css代码进行分割时，我们应对webpack做进一步配置

我们会利用上图的插件，通过给插件传入参数，我们可以指定css文件存放位置，分割方式等

懒加载

懒加载就是对代码块进行按需的加载，这种按需的加载是在一定条件触发进行，这样保证了页面最开始的加载速度

在上图中可以看出，浏览器中所执行的代码。有哪些代码被执行，对于外部引入模块的代码，我们可以将它更改为异步的方法，这样可以提高我们的代码使用率

但是为了有更好加载效果，我们可以使用prefetch的方法实现懒加载，原理就是在页面主体都加载完，网络处于空闲时，我们偷偷加载可能需要的模块

！！！！！！！！！！！！！！！！！

所以我们知道，在代码分割时有两种方法：1、同步 2、异步

同步对应着在缓存上提升加载体验，但是体验并不是很好，因为需要再次加载这个页面时，才能有明显效果。若要加载的文件没有变化，浏览器会采用本地缓存文件。但是一旦文件发生变化，浏览器就会重新发送请求，为了保证每次修改文件，文件名都会发生变化，我们采取下图配置

但是异步方法优势十分明显，可以在你网络信道空余时间对模块进行加载，大大提高效率

！！！！！！！！！！！！！！！！！

devServer

devSever只在我们开发环境时有效，它存在的意义就是模拟部署在服务器上。为了在开发时，能够真实模拟线上请求发送这个过程，devSever起到了极大的作用

我们通过设置devserver的代理属性，可以实现请求的转发，此时的proxy属性就好比是一个中转站，准发我们的请求。pathRewrite这个属性还可以是某种意义上的重定向

当然，在我们生产环境下，就不存在devsever这个配置项了，所以请求地址不再需要代理，代理真正的意义就是方便前后端联调