了解webpack|青训营笔记

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

什么是webpack

本质一种前端资源编译，打包工具

webpack配置

1. 安装

   npm i -D webpack webpack-cli
   

2. 编辑配置文件

   module.exports={
       //声明入口：要打包的文件
       entry:'index.js',
       //最终打包放在那里dist文件夹中里
       output:{
           filename:"[name].js",
           //项目打包后的存放位置
           path:path.join(__diename,"./dist"),
       },
       module:{
           rules:[{
               test:/.less$/i,
               use:['style-loader','css-loader','less-loader']
           }]
       }
   }
   

3. 执行编译命令

   npx webpack
   

核心流程--流程类

1. 入口处理

   从entry文件开始，启动

2. 依赖解析

   会去解析import和require这些依赖

3. 资源解析

   将png，css等非标准的JS资源转为JS内容

4. 资源合并打包

   将转译后的资源内容打包，变为可直接在浏览器运行的文件

我们会循环调用步骤2和3，知道所有的资源处理完成

webpack主要干了两件事:模块化和一致性

• 将多个文件合并为一个，减少了Http请求
• 支持模块化开发(import，required)
• 支持高级JS特性
• 支持TS

使用webpack

流程类

处理css

1. 首先我们需要下载loader

   npm add -D css-loader style-loader
   

2. 配置

   module.exports={
       //声明入口：要打包的文件
       entry:'index.js',
       //最终打包放在那里dist文件夹中里的【name】.js，name自定义
       output:{
           filename:"[name].js",
           //项目打包后的存放位置
           path:path.join(__diename,"./dist"),
       },
       module:{
           rules:[{
               test:/.css$/i,
               use:['style-loader','css-loader']
           }]
       }
   }
   

接入babel

作用：将高版本的代码转为低版本的代码，起到兼容性作用

1. 安装依赖

   npm i -D @babel/core @babel/preset-env babel-loader
   

2. 声明output

   const paht =require("path");
   module.exports={
       entry:"./src/index",
       output:{
           filename:"[name].js",
           path.join(__dirname,"./dist"),
       },
       moduel:{
           rules:[{
           test::/.js?$/,
           use:[{
               loader:'babel-loader',
               options:{
               presets:[
                   ['@babel/preset-env']
                  ]
               }
             }]
          }]
      }
   }
   

3. 执行

   npx webpack
   

处理HTML

1. 安装插件

   npm i -D html-webpack-pligin
   

2. 配置moudle

   const path = require('path') 
   //声明插件
   const HTMLWebpackPlugin = require('html-webpack-plugin') 
   module.exports = { 
       entry: './src/index', 
       output: { 
             filename: '[name].js', 
           path: path.join(__dirname, './dist') 
       }, 
       plugins: [new HTMLWebpackPlugin()]
   }
   

3. 执行

   npx webpack
   

它会自动在你定义的output文件夹里顶一个index.html文件，这是他自动生成的

工具类

HMR(模块热替换)

可以使我们写的代码不用刷新，就可以立刻将更新的结果展示在页面上

1. 开启HMR

   只需要将devServer里面的属性hot设置为true

   设置watch:true，意思就是他会持续的去看是不是发生变化

   const path = require('path') 
   const HTMLWebpackPlugin = require('html-webpack-plugin') 
   module.exports = { 
       entry: './src/index', 
       mode: 'development', 
       devtool: false, 
       watch: true  //结果立刻呈现
       devServer: {
           hot: true, // 核心配置项 
           open: true 
       }, 
       output: {
           filename: '[name].js', 
           path: path.join(__dirname, './dist')
       },
       module: { 
           rules: [{ test: /.css$/, use: ['style-loader', 'css-loader'] 
           }] 
       }, 
       plugins: [new HTMLWebpackPlugin()], 
   }
   

2. 启动

   npx webpack serve
   

使用Tree-Shaking（树摇）

用于删除dead code

什么是Dead Code

• 代码没有被用到
• 代码的执行结果没有被用到
• 代码只读不写

生产环境下配置

// webpack.config.js
module.exports = {
  // ...
  mode: 'development',
  optimization: {
    usedExports: true,
  }
};

// webpack.config.js
module.exports = {
  // ...
  mode: 'production',
};

参考链接：摇树|网络包 (webpack.js.org)