Webpack 知识体系 | 青训营笔记

冰糕
42 阅读2分钟

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

为什么要学习Webpack？

  • 理解前端“工程化”概念、工具、目标
  • 一个团队总要有那么几个人熟悉Webpack，某种程度上可以成为个人的核心竞争力
  • 高端前端必经之路

什么是Webpack

以前

  • 依赖手工，比如有50个JS文件...操作，过程繁琐
  • 当代码文件之间有依赖的时候，就很严格按依赖顺序书写
  • 开发与生产环境一致，难以接入TS或JS新特性
  • 比较难接入Less、Sass等工具
  • JS、图片、CSS资源管理模型不一致

这些都是旧时代非常突出的问题，对于开发效率影响非常大

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

  • 多份资源文件打包成一个Bundle
  • 支持Babel、Eslint、TS、CoffeScript、Less、Sass
  • 支持模块化处理CSS、图片等资源文件
  • 支持HMR+开发服务器
  • 支持持续监听、持续构建
  • 支持代码分离
  • 支持Tree-shaking
  • 支持Sourcemap

使用Webpack

1.安装

 npm i -D webpack webpack-cli

2.编辑配置文件

 //webpack.config.js
 module.exports = {
     entry:'main.js',
     output;{
     filename:"[name].js",
     path:path.join(__dirname,"./dist"),
 },
     module:{
         rules:[{
             test:/.less$/i,
             use:['style-loader','css-loader','less-loader']
         }]
     }
 }

3.执行编译命令

 npx webpack

核心流程——极度简化版

1.png

模块化+一致性

  • 多个文件资源合并成一个，减少http请求数
  • 支持模块化开发
  • 支持高级JS特性
  • 支持Typescript、CoffeeScript方言
  • 统一图片、CSS、字体等其他资源的处理模型

使用Webpack

关于Webpack的使用方法，基本都围绕"配置"展开，而这些配置大致可分为两类：

  • 流程类：作用于流程中某个或若干个环节，直接影响打包效果的配置项
  • 工具类：主流程之外，提供更多工程化能力的配置项

流程类配置

2.png

工具类配置

3.png

按使用频率：

  • 'entry/output'
  • 'module/plugins'
  • 'mode'
  • 'watch/devServer/devtool'

Webpack配置官方文档：webpack.js.org/configurati…

自定义打包的入口与出口

在webpack.config.js配置文件中，通过entry节点指定打包的入口，通过output节点指定打包的出口。

处理CSS

1.安装Loader

 npm add -D css-loader style-loader

2.添加'module'处理css文件

 module.exports = {
     entry:'main.js',
     output;{
     filename:"[name].js",
     path:path.join(__dirname,"./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 path = require('path');
 module.exports = {
     entry:'./src/index',
     output:{
         filename:'[name].js',
         path:path/join(__dirname,'./dirst'),
     },
     module:{
         rules:[{
             test:/.js?$/,
             use:[{
                 loader:'babel-loader',
                 options:{
                     presets:[
                         [
                             '@babel/preset-env'
                         ]
                     ]
                 }
             }]
         }]
     }
 }

生成HTML

1.安装依赖

 npm i -D html-webpack-plugin

2.声明产物出口'output'

 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()]
 }

HMR(自动更新页面)

1.开启HMR

 module.export = {
     //...
     devServer:{
         hot:true
     }
 };

2.启动webpack

npx webpack serve

Tree-Shaking

删除多余未用到的代码

开启tree-shaking：

  • 'mode':"production"
  • 'optimization.usedExports:true'

总结

对于前期学会使用webpack即可，如果晋升为高级程序员，需要慢慢的学会webpack配置文件的内容所代表的含义及用处

avatar
文章
阅读
粉丝