记一次webpack分享

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第2天，点击查看活动详情

一. webpack 基本介绍

官网图片

• bundle your assets
• bundle your scripts
• bundle your imgages
• bundle your styles

二. 入门案例

2.1 Demo1

webpack打包,webpack 最原始的打包方法

• 缺点：

  • 每次都要输入入口文件 + 打包地址，太麻烦，影响开发效率

 webpack 入口js文件 打包地址
 webpack --entry ./src/main.js -o ./dist

2.2 Demo2

webpack.config.js配置文件

• 添加 webpack.config.js文件，配置入口文件和打包地址

  • 配置完成即可直接通过 webpack命令进行打包
  • 运行 webpack命令的时候，会自动寻找配置文件，没有找到会报错

• 缺点：

  • 每次修改都要手动打包，太繁琐

 webpack

2.3 Demo3

webpack-dev-server的使用

• 提供一个简单的web开发服务器
• 将打包文件生成在虚拟内存中

• 缺点：

  • 每次更新之后需要手动打开浏览器
  • 需要手动切换运行目录

• 添加参数

  • --open：自动打开浏览器
  • --port：指定端口号
  • --contentBase：指定基本目录
  • --hot：热更新，使 bundle.js 在原基础上更新，不用生成一个新的

 webpack-dev-server
 webpack-dev-server --open --port 3000 --contentBase src --hot

三. webpack 核心

3.1 loader

本质： loader的本质是一个 function

作用： 用来处理和打包各种静态资源

重在处理

3.2 plugin插件

本质： plugin的本质是一个对象

作用： 使 webpack更强大

重在拓展

四. 进阶案例

4.1 Demo4

htmlWebpackPlugin插件：

• 在内存中，自动生成入口 index.html页面，并自动引入打包好的文件，无需我们再手动引入

配置

 // webpack.config.js
 ​
 const htmlWebpackPlugin = require('html-webpack-plugin')
 ​
 plugins:[
     new htmlWebpackPlugin({
         template:path.join(__dirname,'./src/index.html'),
         filename:'index.html'
    })
 ],

4.2 Demo5

loader的使用

Webpack默认只能打包处理Js类型的文件，无法处理其它的非Js类型的文件

如果要处理非Js类型的文件，我们需要手动安装一些合适的第三方loader加载器

• 提供对静态资源，如图片，字体，CSS文件等的处理
• 不同的静态资源需要的 loader不一样
• loader之间，通过链式的传递

  module:{
         rules:[
            {test:/.css$/,use:['style-loader','css-loader']},
            {test:/.less$/,use:['style-loader','css-loader','less-loader']},
            {test:/.scss$/,use:['style-loader','css-loader','sass-loader']},
            {test:/.(png|jpg|jepg|gif)$/,use:'url-loader?limit=1000&name=[hash:8]-[name]-[ext]'},
            {test:/.(eot|svg|woff|woff2|ttf)$/,use:'url-loader'},
            {test:/.js$/,use:'babel-loader',exclude:/node_modules/},
        ]
    }

4.3 Demo7:手写loader

1. 新建文件夹，my-loader

2. 初始化文件夹：npm init -y

3. 在my-loader文件夹下新建loaders文件夹，存放我们的loader文件

   • 我们创建一个Loader，功能是替换掉我们js文件中的某个字符串
   • 新建 replaceLoader，文件内容如下

    // replaceLoader.js
    // 
    module.exports = function(source){
        return source.replace('Allanma','world')
    ​
    }
   

4. 新建src文件夹

   • 新建index.js文件，随便写点代码，例如

    // index.js
    ​
    console.log('hello Allanma')
   

5. 在项目目录下面新建 webpack.config.js 文件

   • 指定 mode以及打包入门和出口
   • 为js文件配置我们自己写好的loader

    const path = require('path')
    ​
    module.exports = {
        mode: 'development',
        entry: {
            main: './src/index.js'
       },
        output: {
            path: path.resolve(__dirname,'./dist'),
            filename: '[name].js'
       },
        module: {
            rules: [
                       {
                            loader: path.resolve(__dirname,'./loaders/replaceLoader.js')
                       }
                   ]
               }
           ]
       }
    }
   

6. 最后打包文件，发现dist目录下的main.js文件中最终打印的事 hello world，即替换成功

4.4 Demo8:手写一个Plugin

在本章，我们将介绍如何实现一个简单的plugin，让大家知道基本的实现的基本思路

插件功能： 在打包文件的时候，帮我们生成一个版本文件，记录我们的版本相关信息

1. 创建文件夹，my-plugin，使用 npm init -y 命令初始化文件夹,并安装webpack和webpack-cli模块

2. 创建webpack.config.js，配置基本的webpack打包配置

 // webpack.config.js
 const path = require('path')
 ​
 module.exports = {
     mode: 'development',
     entry: {
         main: path.resolve(__dirname,'./src/index.js')
    },
     output: {
         path: path.resolve(__dirname,'./dist'),
         filename: '[name].js'
    }
 }

3. 项目根目录创建 src文件夹，并在src文件夹下面创建index.js文件，用于测试

 // index.js
 console.log('hello world')

4. 在项目根目录创建plugings文件夹，用来存储plugin文件

5. 在plugins文件夹下创建一个类（注意：这里不同于loader，loader是function，而plugin是一个类）

 // copyright-webpack-plugin.js
 ​
 class CopyrightWebpackPlugin{
     // 如下为构造函数，可以通过 options参数获取plugin中传递过来的options参数，同时，在plugin被new的时候，会调用，在这里非必要，如果我们不显示声明，会有默认的构造函数
     // constructor(options){
     //     console.log(options)
     //     console.log('插件被使用了...')
     // }
 
     // 插件发生作用调用的方法，这里存在很多类似于生命周期的钩子函数，具体清参考webpack官网，documentation下的，API目录下的Plugins中的Compiler Hooks
     //这里实现的功能是，在打包完成之前，通过向compilation.assets对象中添加一个属性，来实现创建我们版本文件的目的
     apply(compiler){
         compiler.hooks.emit.tapAsync('Copyright-webpack-plugin',(compilation,callback)=>{
             compilation.assets['copyright.txt']={
                 source: function(){
                     return 'copyright by mapengfei'
                },
                 size: function(){
                     return 22
                   
                }
            }
             callback()
        })
    }
 }
 ​
 module.exports = CopyrightWebpackPlugin

6. 使用plugin

 // webpack.config.js
 ​
 const copyrightWebpackPlugin = require('./plugins/copyright-webpack-plugin')
 ​
 module.exports = {
     //...
     plugins: [
         new copyrightWebpackPlugin()
    ]
 }

五.拓展-性能优化

5.1 code splitting ---Demo6

代码分割：通过代码分割，提取重复引用以及不会更改的核心内库，合理的使用缓存，避免每次打包之后都要重新加载全部的内容

• 比较使用 code splitting 前后打包代码的 Size大小

5.2 tree-shaking

用来删除打包过程中，没有使用到的代码，减小 bundle.js 体积，提升效率

• 通过比较使用 tree-shaking 前后打包代码的体积
• 通过比较打包之后 bundle.js 中的内容

5.3 Prefetching和Preloading

Prefetching和Preloading的作用

• 首次加载的时候，只需要加载核心代码
• 在页面展示出来之后，即网络空闲的时候，加载后续界面调用需要用到的代码

区别：

• prefetching：在界面界面核心代码加载完成之后，空闲的时候加载文件
• preloading：和核心代码块一起加载

六. 总结

1. webpack 是什么，有什么用？

• Webpack 是一个前端的打包工具，通过对打包资源的整合和对打包过程的控制，可以提升打包性能，提高前端加载性能

2. webpack 的核心有哪些，分别用来做什么？

• Webpack 的核心有 Loader 和 Plugin
• loader 主要用来处理各种静态资源，比如图片，CSS，图标，字体等，重在处理现有代码
• Plugin主要是对webpack进行一些功能的拓展，重在拓展

3. webpack 主要是通过什么方式进行性能优化？

• webpack主要通过对打包流程的控制，比如打包文件的生成方式，打包文件的体积，文件内容的优化等

最后附上代码Demo截图，需要的小伙伴可评论区留言，留下私信方式，我私发给你