webpack学习笔记

已于 2022-04-30 17:23:18 修改
阅读量575 收藏
点赞数
分类专栏： webpack 文章标签： webpack
于 2022-04-30 16:04:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42356513/article/details/124514205
版权

相关命令

打包

webpack

查看打包相关详细信息

webpack --stats detailed

设置打包入口文件

webpack --entry 文件路径

设置打包模式

webpack --mode production/development

修改文件自动打包

webpack --watch

热更新(ctrt+s后页面自动更新内容)

  1. 先安装依赖
npm i webpack-dev-server

  1. 修改配置项

      devServer: {
    // 提供静态文件目录地址,就是热更新时候浏览器编译的文件目录
    static: './dist',
  }

    3.启动项目

    webpack-dev-server

插件

插件提供了一些额外的强大功能,我的理解相当于游戏外挂

html-webpack-plugin

功能: 自动帮你生成html文件,并且让你在生成html时以其他html文件作为模板

npm安装依赖

npm install --save-dev html-webpack-plugin

配置项文档

const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  plugins: [new HtmlWebpackPlugin()],
};

配置项笔记

变量名类型示例描述
titleString我好帅生成的html文件标题
templateString将生成的html文件以哪个现有的html文件作为模板
filenameString | Functionindex.html生成的html文件名
injectString | Booleanbody将生成的js，css文件插入到哪里

mini-css-extract-plugin

功能: css抽离插件(抽离成单独的css文件)

使用:

1.安装依赖

npm i mini-css-extract-plugin -D

2.引入

const MineCssExtractPlugin = require('mini-css-extract-plugin')

3.插件注册

 plugins: [
    new HtmlWebpackPlugin({
      // 标题
      title: 'aavv',
      // 以哪个html为模板
      template: './src/index.html',
      // 生成的html文件名
      filename: 'app.html',
      // 脚本等相关文件注入到哪里
      inject: 'body',
    }),
     // here
    new MineCssExtractPlugin({
      filename: 'css/[contenthash].css',
    }),
    new CssMinimizerPlugin(),
  ],

4.loader使用

{
        test: /\.(css|scss)$/,
        use: [MineCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
      },

css-minimizer-webpack-plugin

css压缩插件

1.安装依赖

npm i css-minimizer-webpack-plugin

2.引入

const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')

3.配置

  // 优化配置
  optimization: {
    minimizer: [new CssMinimizerPlugin()],
  },

terser-webpack-plugin

js代码压缩插件

该插件在webpack5自带,直接引入并配置就行

// js压缩插件webpack5内置该插件无需安装,仅在生产环境有效
const TerserPlugin = require("terser-webpack-plugin");
 optimization: {
    // 通过自定义插件覆盖默认插件配置
    minimizer: [new TerserPlugin()],
      },

Assets Module

资源模块(asset module)是一种模块类型，它允许使用资源文件（字体，图标等）而无需配置额外 loader。其实就是废弃了以前的什么file-loader,url-loader等等资源处理的插件.

asset/resource

将资源原样输出到打包后的文件夹

asset/inline

将图片资源转成base64

asset/source

将文件源代码原样输出

module: {
    // 配置规则
    rules: [
      {
        // 匹配哪些文件
        test: /\.png$/,
        // 同之前的file-loader
        // file-loader 就是一个可以用来处理图片字体等文件资源的 loader，它的处理方式是将资源复制到打包后的文件夹，并重命名。
        type: 'asset/resource',
        // 生成的文件信息
        generator: {
          // 文件名 contenthash:根据文件内容生成hash值
          filename: 'img/[contenthash][ext]',
        },
      },
      {
        test: /\.(svg|png)$/,
        // 目前的理解是图片转成base44
        type: 'asset/inline',
      },
      {
        test: /\.txt$/,
        // 将文件源代码原样输出
        type: 'asset/source',
      },
    ],
  },

loader

loader可以让webpack拥有解析除js和json以外格式的文件比如css，图片文件

加载scss文件

安装依赖

    "css-loader": "^6.7.1",
    "node-sass": "^7.0.1",
    "sass": "^1.50.0",
    "sass-loader": "^12.6.0",
    "style-loader": "^3.3.1",

配置

      {
        test: /\.(css|scss)$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
      },

babel-loader

babel-loader能将es6以及更高的语法转成es5的

安装依赖

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

继续安装依赖

npm i @babel/plugin-transform-runtime
npm install --save @babel/runtime

webpack配置

      {
        test: /\.js$/,
        // 排除node_modules文件夹下的文件
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          // babel-loader的配置项
          options: {
            presets: ['@babel/preset-env'],
            plugins: [['@babel/plugin-transform-runtime']],
          },
        },
      },

postcss-loader

github地址postcss

postcss-loader能让你项目中的css具有一些超能力,该loader有很多插件

autoprefixer

提高兼容性,自动给部分样式加前缀

安装以下依赖

 postcss  postcss-loader autoprefixer

webpack配置

      {
        test: /\.(css|scss)$/,
        use: [MineCssExtractPlugin.loader, 'css-loader', 'sass-loader', 'postcss-loader']
      },

根目录新建postcss.config.js文件

​ 该文件可以理解为对postcss工具的一些配置

使用autoprefixer

module.exports = {
  plugins: {
    autoprefixer: {
    }
  }
}

代码分包

1.动态导入(懒加载)

使用import.then语法

懒加载的好处就是打包的体积不变,但是浏览器对于使用懒加载的模块是不会去加载这些js文件的,用到的时候才会加载这些文件

1.1 魔法注释

/* webpackChunkName: "my-chunk-name" */

相关的块起名字,名字将在打包后的文件夹下看到

/*webpackPrefetch: true */

浏览器会在空闲时间把模块下载下来,存到缓存中

缺点: 不利于网页流量统计

还有一个webpackPreload，但是好像不常用,也是预加载,但是优先级跟别的chunk块是一样的

2.插件配置

    //  一个插件,用来抽离公共代码
     splitChunks: {
       // all不管是异步加载还是同步加载的公共模块都会被抽离
       chunks: 'all',
     },

3.多个入口起点

 entry: {
    // 多个入口打包
    index: './src/index.js',
    // another: './src/lodash.js',
  },

源代码追踪

devtool配置

选项描述
eval加载速度快,但是没有正确显示错误行号
source-map直接打个.map文件出来,会显示源代码错误行号
eval-source-map能够正确追踪到行号,初次加载速度慢
cheap-eval-source-map没有列追踪,只能追踪到行
cheap-module-eval-source-map跟上面差不多,module相当于支持babel这种预编译工具

代码校验

webpack中使用es-lint工具进行代码校验

安装依赖

npm install eslint -S

快速生成配置文件

npx eslint --init

webpack5需要安装EslintWebpackPlugin插件来使webpack在打包时es-lint生效

npm安装 eslint-webpack-plugin

npm install eslint-webpack-plugin --save-dev

然后把插件添加到你的 webpack 配置

const ESLintPlugin = require('eslint-webpack-plugin');

module.exports = {
  // ...
  plugins: [new ESLintPlugin(options)],
  // ...
};

解析(resolve)

设置模块如何被解析

配置别名(alias)

module.exports = {
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  }
	}

优化相关

externals下的配置可以将第三方包打包时排除在外,其中key值为import a from b中的b,value就目前的理解为你全局使用的那个变量.

 externals:{
      jQuery: '$'
    }

可视化分析工具

npm安装依赖

npm install webpack-bundle-analyzer –save-dev

require引入

const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')

安装插件

plugins: [
    // 可视化分析插件
    new BundleAnalyzerPlugin()
  ]

执行命令浏览器打开可视化界面

webpack serve

Tree Shaking

这个选项是webpack默认开启的,import但没有使用的东西,会被视为dead code``webpack将不会打包这些模块,但webpack打包是很智能的,它会自动判断这个模块有没有被使用,就是说你如果import一个css文件,我测试的时候是不管你用没用里面的样式,这个css文件都会参与打包。我发现在打包的时候这个摇树还是很智能的。

sideEffects

该选项接收可以接收的参数有,true,false,数组,并且该配置项在package.json文件夹下,true表示所有的文件都有副作用,不能打包删除,false表示所有的打包文件都没副作用,dead code可以被删除,数组: [“*.js”]，表示所有的js文件都有副作用,不能被剔除。

Polyfills

项目打包时不一定所有的高级语法特性都会被转为浏览器能识别的es5以以前的语法,这时候polyfills(垫片)就很好的解决了这一个问题,让某些浏览器不支持的语法(api)变得能够支持

thread-loader

插件地址

这个loader能够让其它loader另开线程打包,说的简单点,就是对于那些打包时耗时比较长的loader,采用thread-loader另开线程,增加打包速度,每个另开线程的启动时间为600ms,慎用!

一些配置

const path = require('path')
// 插件
// html自动生成插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
// css抽离插件
const MineCssExtractPlugin = require('mini-css-extract-plugin')
// css压缩插件
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
// js压缩插件webpack5内置该插件无需安装,仅在生产环境有效
const TerserPlugin = require('terser-webpack-plugin')
// eslint-插件
const ESLintPlugin = require('eslint-webpack-plugin')
// 可视化分析插件
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
module.exports = {
  // 打包的入口文件
  entry: {
    // 多个入口打包
    index: './src/index.js'
    // another: './src/lodash.js'
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  },
  output: {
    // 生成的js名字
    filename: 'js/[name].[contenthash].js',
    // 输出的文件目录
    path: path.resolve(__dirname, 'dist'),
    // 每次打包清除dist文件夹下面的内容
    clean: true,
    // 默认输出的静态资源文件名
    assetModuleFilename: 'images/[contenthash][ext]',
    // 打包后生成的资源路径前缀
    publicPath: './'
  },
  devServer: {
    // 提供静态文件目录地址,就是热更新时候浏览器编译的文件目录
    static: './dist'
  },
  // 追踪源代码出错位置
  devtool: 'inline-source-map',
  // 开发环境 | 生产环境
  mode: 'production',

  plugins: [
    new HtmlWebpackPlugin({
      // 标题
      title: 'aavv',
      // 以哪个html为模板
      template: './src/index.html',
      // 生成的html文件名
      filename: 'app.html',
      // 脚本等相关文件注入到哪里
      inject: 'body'
    }),
    // css抽离插件
    new MineCssExtractPlugin({
      filename: 'css/[contenthash].css'
    }),
    // 代码校验插件
    new ESLintPlugin()
    // 可视化分析插件
    // new BundleAnalyzerPlugin()
  ],
  module: {
    // 配置规则
    rules: [
      // {
      //   // 匹配哪些文件
      //   test: /\.png$/,
      //   // 同之前的file-loader
      //   // file-loader 就是一个可以用来处理图片字体等文件资源的 loader，它的处理方式是将资源复制到打包后的文件夹，并重命名。
      //   type: 'asset/resource',
      //   // 生成的文件信息
      //   generator: {
      //     // 文件名 contenthash:根据文件内容生成hash值
      //     filename: 'img/[contenthash][ext]',
      //   },
      // },
      {
        test: /\.(svg|png)$/,
        // 目前的理解是图片转成base44
        type: 'asset/inline'
      },
      {
        test: /\.txt$/,
        // 将文件源代码原样输出
        type: 'asset/source'
      },
      {
        test: /\.jpg$/,
        // 让webpack自己选转base64还是转成图片存到打包后的文件夹
        type: 'asset',
        // 解析器
        parser: {
          // 资源转换规则
          dataUrlCondition: {
            // 图片小于2M转base64
            maxSize: 2 * 1024 * 1024
          }
        }
      },
      {
        test: /\.(css|scss)$/,
        use: [MineCssExtractPlugin.loader, 'css-loader', 'sass-loader', 'postcss-loader']
      },
      {
        test: /\.js$/,
        // 排除node_modules文件夹下的文件
        exclude: /node_modules/,
        use: [
          'thread-loader',
          {
            loader: 'babel-loader',
            // babel-loader的配置项
            options: {
            // 支持一系列es6语法
              presets: ['@babel/preset-env'],
              // 支持async await语法
              plugins: [['@babel/plugin-transform-runtime']]
            }
          }]
      }
    ]
  },
  // 优化配置
  optimization: {
    // 通过自定义插件覆盖默认插件配置
    minimizer: [new CssMinimizerPlugin(), new TerserPlugin()],
    // 一个插件,用来抽离公共代码
    splitChunks: {
      // all不管是异步加载还是同步加载的公共模块都会被抽离
      // chunks: 'all',
      // 哪些模块需要缓存,一般第三方模块需要缓存
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all'
        }
      }
    }
    // 对于import却没有使用的模块，不参与打包
    // usedExports: true
  },
  // 排除打包的依赖
  externals: {
    lodash: '_'
  }
}

博客

欢迎访问我的博客www.smartxy.cc

疯狂的夏铭予
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【webpack5】 autoprefixer不生效
小笼包不是包的博客
01-29 2212
【webpack5】 autoprefixer不生效 一、问题 一些新css特性需要加前缀来兼容浏览器： transform: rotate(30deg); 应该被转为： /* -moz、-ms、-o、-webkit*/ -webkit-transform: rotate(30deg); transform: rotate(30deg); 官方文档指导下配置（不生效）： webpack.config.js module: { rules: [{ test: /\.css
【专项学习】 —— Webpack5从入门到精通课程学习（七）
柳柳66的博客
03-09 316
这篇主要介绍《webpack详细配置》。(demo代码github地址) 知识点包括： webpack详细配置之entry webpack详细配置之output webpack详细配置之module webpack详细配置之resolve webpack详细配置之devserver webpack详细配置之optimization webpack4至webpack5详细变化 一、webpa...
02-TerserWebpackPlugin：优化你的 JavaScript 代码
最新发布
weixin_46002095的博客
05-30 1085
TerserWebpackPlugin 是一个 Webpack 插件，用于通过 Terser 压缩和优化 JavaScript 代码。Terser 是一个用于 ES6+ 代码的 JavaScript 压缩工具，它基于 UglifyJS，但添加了对现代 JavaScript 特性的支持。TerserWebpackPlugin 利用 Terser 的强大功能，帮助开发者生成更小、更高效的 JavaScript 文件，从而提升网页加载速度和用户体验。
webpack5 使用Thead多进程打包提升打包构建速度
周家大小姐
11-17 765
它的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用，但它也能够胜任转换（transform）、打包（bundle）或包裹（package）任何资源(resource or asset)。当项目越来越庞大时，打包速度越来越慢，甚至于需要一个下午才能打包出来代码。我们想要继续提升打包速度，其实就是要提升 js 的打包速度，因为其他文件都比较少。我们可以开启多进程同时处理 js 文件，这样速度就比之前的单进程打包更快了。多进程打包：开启电脑的多个进程同时干一件事，速度更快。
postcss简介
追风Programer的博客
01-22 3526
前言 css预处理器在目前的开发中是很受欢迎的，但是它们也有一些缺点。在今天的介绍中，我们将探讨postcss的优势以及它是如何工作的，还有其一些丰富而且实用的插件。 css预处理器的价值和局限性 大多数CSS开发人员都非常熟悉css预处理器，像sass、less、stylus等，以及伴随着这些预处理器出现的一些概念，比如file partials, nesting, variables 和 mixins等。随着css的发展，预处理器的一些功能正在渐渐的被原生css所实现，但是还有大量非常实用的功能对于开发
Vue PostCss插件——autoprefixer配置完成后无效，已解决
足各路
06-25 9848
在配置autoprefixer时，按照之前的配置可以成功补全css浏览器前缀，但是结合postcss-pxtorem插件，px可以成功转换为rem，但css前缀无效。 经过几个小时的鼓捣，终于让我发现了蛛丝马迹。哈哈哈，很开心，好激动！！ 一起来看一看博主陷入的困境吧。 1. autoprefixer的配置 根目录postcss.config.js文件中，配置代码如下： module.exports = { plugins: { 'autoprefixer': { overrid.
webpack学习笔记（二）
11-29
对webpack学习过程中的一些记录目前只包括webpack的基本配置相关的一些东西后期会更新webpack中的一些编译原理及一些插件的实现
webpack学习笔记之代码分割和按需加载的实例详解
12-01
本文介绍了webpack学习笔记之代码分割和按需加载的实例详解，分享给大家，也给自己留个笔记 为什么需要代码分割和按需加载 代码分割就是我们根据实际业务需求将代码进行分割，然后在合适的时候在将其加载进入文档中...
webpack-study:webpack学习笔记
03-20
Webpack五个核心概念一，参赛入口（Entry）指示Webpack以哪个文件为入口起点开始打包，分析内置内部依赖图。二，输出输出（输出）指示Webpack打包后的资源包输出到那里去，以及如何命名。三，装载机加载程序让...
webpack：:scroll:一些节点教程-《 Webpack学习笔记》
02-06
Webpack 是一个流行的模块...通过《Webpack学习笔记》这样的教程，你可以逐步掌握Webpack的基础和进阶用法，将其有效地应用于项目中，实现高效、模块化的前端开发。在学习过程中，不断实践和查阅官方文档是至关重要的。
webpack学习笔记（以防丢失）.md
06-04
webpack学习笔记（以防丢失）.md
webpack学习笔记之优化缓存、合并、懒加载
08-29
本篇学习笔记重点探讨了 Webpack 的优化策略，包括缓存管理、文件合并以及懒加载，旨在提升项目的构建速度和用户体验。 一、缓存优化 Webpack 在每次构建时都会重新处理所有模块，这可能导致编译时间过长，特别是...
webpack:完整详细的Webpack学习笔记：Webpack核心 + Webpack性能优化 + 项目实战
05-17
Webpack使用教程（基础） [TOC] 在开始之前，我们先来看以下Webpack官网首页给我们提供的图片，并思考一下该图片用意 一.Webpack基本介绍 1.1 概念的引入 思考：在网页中，我们经常会引入哪些常见的静态资源 JS .js ...
Webpack与Vue学习笔记
12-15
记录自己学习webpack与Vue的过程
JavaScript基础学习笔记
10-25
JavaScript 基础学习笔记 本资源摘要信息基于黑马视频记录的学习笔记，涵盖了 JavaScript 基础知识点，包括 HTML、CSS、JavaScript、DOM、事件处理等内容。 HTML 和 CSS 基础 * HTML 结构：head、body、title、...
terser-webpack-plugin
qq_42594589的博客
08-12 1000
npm run build 的时候报错 Cannot read property 'javascript' of undefined 这是因为terser-webpack-plugin与webpack版本不一致造成的； 在webpack.json中把terser-webpack-plugin改成跟webpack大版本一致，然后运行npm install 问题解决！ ...
【前端工程化】五：webpack5快速入门（三）
Whoopsina的博客
02-23 412
区分打包环境 由于我们在不同环境下的配置不同，所以我们需要将不同环境的配置分别写在不同的文件中，并提取公共配置； 对于不同环境下，我们传入不同的参数； "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack", "serve": "webpack serve", "build2": "webpack --config ./config/webpa
webpack4使用笔记之plugin
weixin_34013044的博客
01-24 2317
webpack4 常用plugin clean-webpack-plugin html-webpack-plugin mini-css-extract-plugin terser-webpack-plugin(webpack4内置) optimize-css-assets-webpack-plugin webpack-bundle-an...
前端学习笔记 javascript
08-31
对于前端学习笔记，我可以给你一些常见的主题和要点，帮助你开始学习前端开发。 1. HTML基础： - 了解HTML的基本结构和标签 - 学习如何创建和组织网页内容 - 掌握常用的HTML标签，如标题、段落、链接、图像等 2. CSS样式： - 学习如何使用CSS来为网页添加样式 - 掌握CSS选择器和属性 - 学习如何设置文字样式、颜色、背景、布局等 3. JavaScript基础： - 理解JavaScript的基本概念和语法 - 学习如何操作DOM元素，实现网页交互 - 掌握常用的JavaScript函数和事件处理 4. 响应式设计： - 学习如何使用媒体查询和弹性布局创建响应式网页 - 掌握移动优先设计和流体网格布局 5. 前端框架和工具： - 了解流行的前端框架，如React、Angular、Vue等 - 学习使用前端构建工具，如Webpack、Gulp等 - 掌握前端调试工具和浏览器开发者工具的使用 这些是前端学习的一些基本知识点，你可以根据自己的兴趣和需求深入学习和实践。记得不断练习和实践，通过实际项目来提升自己的前端开发能力。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值