webpack笔记整理

chenyou123
135 阅读5分钟

什么是webpack

模块打包器。用户构建前端工程化的构建工具（更适用于单页面应用），将网页依赖变成了webpack依赖，在webpack中，构建成浏览器可以识别的静态资源。

安装

全局安装和本地安装 -》 本地安装

全局安装可以去cmd中直接运行

但是本地安装需要在package.json中定义脚本

所以scripts的作用有以下两点的作用：

保存一些快速启动单词较长的指令

想要运行本地依赖

"scripts":{
    "build": "webpack"
}

image-20220618102018481.png

4.x开始默认入口文件src下面的index.js

如何自定义webpack配置

项目根目录下新建一个webpack.config.js

const path = require("path")

module.exports = {

mode: ''

}

mode: ''

两种模式：production development

production 模式可以压缩 development模式不压缩

entry 入口文件

自定义配置文件

因为自定义的入口文件是src下面的index.js

this.所以我们将入口自定义设置成我们想要的自定义的src下面的mian.js

entry: path.join(__dirname, 'src/main.js')

记住需要引入path const path = require("path")

在终端执行npm run build以后，生成了dist文件，main.js压缩了

image-20220618102848638.png

entry多入口文件

将entry写成一个对象：属性名为入口文件的名称，属性值为具体的地址

entry:{
        entry1: path.join(__dirname, 'src/main.js'),
        entry2: path.join(__dirname, 'src/main2.js')
    }

生成了两个压缩文件

image-20220618103434699.png

output出口

没有自定义设置出口时：

出口自定义为根目录下面的dist文件，压缩文件名为入口文件名。

自定义出口设置：

针对单入口

output:{
        path:path.join(__dirname,'src/build'),
        filename:'bundle.js'
    }

path属性：出口文件的文件地址放在哪里

filename属性：出口文件的文件名

image-20220618104124621.png

多入口

entry:{
        entry1: path.join(__dirname, 'src/main.js'),
        entry2: path.join(__dirname, 'src/main2.js')
    }

output:{
        path:path.join(__dirname,'src/build'),
        filename:'bundle.js'
    }

按照上面的写法，会出现生成两个bundle.js文件，产生冲突！

解决：

webpack预定义一些类似于es6模板字符串语法，同时预设了一些变量

"[预设好的变量]" "[name]"

output:{
        path:path.join(__dirname,'src/build'),
        filename:'[name].js'
    }

这样，生成了两个出口文件 文件名默认为为多入口定义的入口文件名

image-20220618110410707.png

But 还是会有很大的问题！

什么问题：当我们修改文件以后，第二次 打包上线的时候，虽然压缩内容也更新了，可是浏览器打开的内容还是上一次的文件内容，因为浏览器有缓存

"[hash]"构建时 根据文件的内容生成随机数，内容变化时重新生成新的hash值

"[hash:8]" 限制hash值得个数

image-20220618111815051.png

两个文件用的hash值是一样得，如果我改了入口文件中的第一个入口文件得内容，重新打包，那么两个出口文件都会生成新的文件

image-20220618112218947.png

"[chunkhash]"根据每个入口文件内容变化生成单独的hash

"[chunkhash:8]"

image-20220618112310176.png

修改入口main2.js以后：

image-20220618112353763.png

plugins插件 定义网页模板文件

下载

npm i html-webpack-plugin

引入

const HtmlWebpackPlugin = require('html-webpack-plugin')

配置文件中新增plugins属性：

plugins: [
        new HtmlWebpackPlugin()
      ]

设置title的内容和项目html文件的地址

plugins: [
        new HtmlWebpackPlugin({
            // html的title内容
            title: 'webpack',
            // 定义项目html文件的路径
            template: path.join(__dirname, 'public/index.html')
        })
      ]

根目录下新建public文件夹，在public文件夹下新建index.html文件

title使用node模板渲染出页面标题

image-20220618141746228.png

打包生成：

image-20220618141946650.png

webpack loader

解析器

为什么用这个：因为引用css文件时发现不可用，需要解析

功能

在webpack构建项目中 在js引入其他资源时 对其他资源进行解析 不同的资源需要不同的loader来解析 其中解析 .vue结尾文件组件是 vue-loader

配置css-loader

安装

npm i css-loader style-loader -D

配置文件中新增module属性：

module:{
//  不同loader的配置位置
        rules:[
            {
            //  什么类型的文件   所有以.css结尾的文件
                test:/.css$/,
                //  执行顺序从后向前
            use:[
                'style-loader',
                'css-loader'
                // use的使用顺序是从后向前的
            ]
            }
        ]
    }

css-loader作用：在js中解析css

style-loader作用：将解析好的css 创建一个style标签 定义在style标签中插入到head中

使用顺序：先使用css-loader 然后使用style-loader use中的使用顺序是从后向前的

配置sass loader

安装loader

npm i sass sass-loader -D

sass 编译sass语法

（编译sass 除了sass包还有一个node-sass特别不建议使用 资源服务减慢 经常下载不下来 node新版本不支持 node-sass会报错）

sass-loader将sass或者scss文件解析成css文件

配置文件新增module属性

module:{
        rules:[
            {
                test:/.(sass|scss)$/,
            use:[
                'style-loader',
                'css-loader',
                'sass-loader'
                // 使用顺序是从后向前的
            ]
            }
        ]
    }

新建一个sass文件，在main.js文件中引入此sass文件，重新打包即可，打开html查看样式是否更改

image-20220618152046614

image-20220618152046614.png

配置less

同sass，参照上文

clean-webpack-plugin

功能：每次build前删除上次build的代码

安装

npm i clean-webpack-plugin -D

引入

const { CleanWebpackPlugin } = require('clean-webpack-plugin')

plugins: [
        new HtmlWebpackPlugin({
            // html得title内容
            title: 'webpack',
            // 定义项目html文件的位置
            template: path.join(__dirname, 'public/index.html')
        }),
        new CleanWebpackPlugin()
      ]

配置Babel

Babel是干啥的？ es6转成es5

新建一个b.js文件，定义一个类Person （es6语法）

image-20220618154725034.png

打包完成以后，还是es6的语法

image-20220618154641978.png

咋办？

安装

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

@babel/core ：基于core.js封装的常用js工具函数的一个库

@babel/preset-env：es6转es5的预设包

module属性下配置：

module:{
        rules:[
            {
                test: /.m?js$/,
                exclude: /node_modules/,
                use: {
                  loader: 'babel-loader',
                  options: {
                    presets: [
                      ['@babel/preset-env', { targets: "defaults" }]
                    ]
                  }
                }
              }
        ]
    }

转成了es5的语法：

image-20220618160203472.png

静态资源处理

静态资源：比如 字体图标 音频 视频

静态资源：开发时一般存储在src/assets中，但是build以后，assets就没有了，静态资源该如何处理

在webpack5.x以前静态资源处理 安装file-loader和url-loader来处理 5.x以后内置了静态资源的处理模块

image-20220618170856790.png

在module属性下配置：

module:{
        rules:[
              {
                test: /.(png|svg|jpg|jpeg|gif)$/i,  // 处理图片
                type: 'asset',
                generator:{
                    filename: 'static/imgs/[hash][ext]'
                },
                parser: {
                    dataUrlCondition: {
                    //  转换成base64最大体积限制
                        maxSize: 4 * 1024   // 4kb   图片小于4kb时，压缩后的文件中没有image文件，超出4kb时，没有产生image文件
                    }
                }
              },
              {
                test: /.(mp3|mp4|wmv)$/i,  //  音频视频
                type: 'asset',
                generator:{
                    filename: 'static/aa/[hash][ext]'
                }
              },
              {
                test: /.(ttf|eot|svg)$/i,  //  字体图标格式
                type: 'asset',
                generator:{
                    filename: 'static/fonts/[hash][ext]'
                }
              },
        ]
    }

没有超出maxSize值：线上图片

image-20220620091112780.png

超出maxSize值：本地图片

image-20220620091206333.png

webpack-dev-server启动开发环境服务器

安装

npm i webpack-dev-server -D

配置文件中新增属性devServer

// 配置服务器
      devServer: {
        // index.html存储目录
        static: {
          directory: path.join(__dirname, 'public'),
        },
        compress: true,   //  使用启功gzpi压缩
        // port: 9000
        proxy: {
​
        }
      }

在脚本中添加serve（不理解，见上文）：

"scripts": {
    "build": "webpack",
    "serve": "webpack-dev-server"
  },

通过http://localhost:8080/路径访问（ps：端口号因人而异的去改变）

引入后缀名省略以及自定义别名设置

在配置文件中新增resolve属性

resolve: {
        // 定义哪些文件引入时可以省略后缀名
        extensions: ['.js', '.json', '.vue'],
        // 自定义路径别名
        alias: {
          "@": path.join(__dirname, 'src')
        }
      }

修改了src路径为@：

image-20220620095035522.png

avatar
文章
阅读
粉丝