这是我参与「第四届青训营 」笔记创作活动的第8天

团队中需要有人去熟悉Webpack，某种程度上可以称为核心竞争力。

Webpack的理解

本质上是一种前端资源编译、打包工具。

Webpack的使用demo

• 1、安装依赖

• 2、编辑配置文件 在output中filename的[name]可以自己定义

  

• 3、执行编译命令

在TERMINAL调试控制台中输入

使用Webpack处理CSS

• 1、安装Loader

• 2、添加module处理css文件

使用Webpack接入Babel

Babel解决了V6向下兼容V5的问题。

使用Webpack处理HTML

使用webpack自动生成html，可以不用手动添加一些资源，会自动在生成的HTML文件中插入。

• 1、安装依赖

  npm i -D html-webpack-plugin
  

• 2、声明产物出口output

• 3、执行npx webpack

使用Webpack--HMR

Hot Module Replacement 模块热替换 可以实现在编译器内修改代码的同时，浏览器立刻刷新出修改后的效果

• 开启HMR 在webpack_config.js文件中

watch:ture;//一旦改变就可以生成一个新的版本
module.exports={
deServer:{
    hot:ture;
};

• 启动Webpack

npx webpack server

使用Webpack--Tree-Shaking

dead code:

• 代码没有被用到，不可到达
• 代码执行结果不会被用到
• 代码只读不写 tree shaking ：模块导出了，但未被其他模块使用