webpack的学习

已于 2022-12-06 18:48:44 修改
阅读量378 收藏
点赞数
分类专栏： webpack 文章标签： webpack
于 2022-08-31 11:22:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45404030/article/details/126620422
版权

webpack

遇到的问题：

  1. 如何全局引入less
    vue-cli里面的globalVar不知道为啥，我引用不了，只能使用这个。
    在这里插入图片描述

webpack使用的插件

  1. eslint-webpack-plugin（实现eslint校验）
  2. html-webpack-plugin（自动在html中生成main.js文件）
  3. mini-css-extract-plugin（是为了防止闪屏，简而言之就是css文件的解析不会在js文件之后再解析）
  4. css-minimizer-webpack-plugin（是为了解压css文件）
  5. webpack-parallel-uglify-plugin（提高打包速度的插件)
  6. webpack-bundle-analyzer（实现每段内容所加载的时间）

基础篇

*webpack常用的配置
*development模式下的配置
*production模式下的配置

高级篇

*devtool(实现编译之后也还能看到原代码)
*oneOf
*include/exclude
*cache
*Thead
*babel中辅助代码

我们平时使用的es6，promise函数等操作，有时候浏览器并不能识别，这时候通过webpack打包工具解析成浏览器可以识别的东西。

  • 通常面对小图片的时候，我们可以将其转化为base64，减少网络请求。（快了很多) 写在background-image下，转化为base64
  • 在vue项目中配置webpack的时候，首先是在vue.config.js中配置webpack，同时在配置之前，首先应该添加configureWebpack，然后在按照webpack文档来依次配置。
module.exports = {
//	配置webpack
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.png$/,
          type: 'asset',
          parser: {
            dataUrlCondition: {
              maxSize: 4 * 1024 // 4kb
            }
          }
        }
      ]
    }
  }
}
  1. 通过babel将es6语法打包直接转换为可以兼容浏览器的语法。
development模式下的配置

webpack常用的配置

webpack只可以解析js,json文件。
入口地方

  1. entry(需要解析需要解析的内容，将es6语法转化为浏览器可以解析的内容)
    输出地方
  2. output(1.path：解析目标的文件夹；2.filename:存放js文件的地方；3.clean:每次解析后自动更新文件夹里面的内容。
    加载器
  3. module(rules(数组规则):(1.test:需要测试的文件后缀名是什么。2.use:需要用到的是什么包(执行是从右到左)。
    插件
  4. plugins(需要用到的插件是什么.)
    模式
  5. mode（开发的模式什么,一个是development(开发),一个是production(生产))
    服务器
  6. devServer（服务器的配置,vue在这里可以配置跨域的问题,同时也可以设置自动打开的功能。)
    代码部分
//development模式下配置的部分配置项。
// serve启动devServer配置,实现自动更新,--config是文件夹名字
// npx webpack serve --config 文件名是啥
const path = require("path");
// eslint语法插件的引入
const ESLintPlugin = require("eslint-webpack-plugin");
// 自动打包生成html文件（解决js文件更新的问题）
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  // 入口(相对路径)
  entry: "./src/js/main.js",
  // 输出
  output: {
    // 输出路径(绝对路径)(文件名默认dist)
    path:undefined,
    // js文件夹中放js文件
    filename: "js/main.js",
    //images文件夹中放图片路径(保留10位长度图片)
    // assetModuleFilename:'images/[hash:10][ext][query]',
    // 自动清空上次打包结果
    clean: true,
  },
  // 加载器(实现对除了js,json文件外的所有文件进行编译，比如css等)
  module: {
    rules: [
      // css转换
      {
        test: /\.css$/,
        // 执行顺序是从右到左
        use: ["style-loader", "css-loader"],
      },
      // less转换
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      // 当图片小于10kb的时候转化为base64
      {
        test: /\.(png|jpe?g|bmp|gif)/,
        type: "asset", //会转base64
        parser: {
          dataUrlCondition: {
            maxSize: 4 * 1024, // 4kb
          },
        },
        //生成文件的地方
        generator: {
          filename: "static/images/[hash][ext][query]",
        },
      },
      // 把这些后缀名放到一个指定的文件夹里面
      {
        test: /\.(ttf|woff2|woff)$/,
        type: "asset/resource",
        //生成文件的地方
        generator: {
          filename: "static/fonts/[hash][ext][query]",
        },
      },
    ],
  },
  // 插件
  plugins: [
    //都是相对路径
    new ESLintPlugin({
      // 指定需要校验的地方
      context: path.resolve(__dirname, "./src"),
    }),
    //自动添加js文件
    new HtmlWebpackPlugin({
      template: "./public/index.html",
    }),
  ],
  //服务器
  devServer:{
    host:'localhost',
    port:'8080',
    open:true
  },
  // 开发模式(开发模式:development,生产模式:production)
  mode: "development",
};
production模式
  1. 文件压缩（压缩css文件）
  2. css样式的兼容性（需要兼容的内容写在"browserslist"数组中）
  3. 小图片转换为base64
  4. 安装打包加速的插件
  5. html和js文件是自动压缩
//development模式下配置的部分配置项。
// serve启动devServer配置,实现自动更新,--config是文件夹名字
// npx webpack serve --config 文件名是啥
const path = require("path");
// eslint语法插件的引入
const ESLintPlugin = require("eslint-webpack-plugin");
// 自动打包生成html文件（解决js文件更新的问题）
const HtmlWebpackPlugin = require("html-webpack-plugin");
// 每次解析都是先是js然后才是css或者less文件，这时候可以使用新的插件，实现各忙各的同时加载。
//实现防止闪屏
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
//压缩文件
const CssMinimizerPlugin  = require('css-minimizer-webpack-plugin')
module.exports = {
  // 入口(相对路径)
  entry: "./src/js/main.js",
  // 输出
  output: {
    // 输出路径(绝对路径)(文件名默认dist)
    path: path.resolve(__dirname, "../dist"),
    // js文件夹中放js文件
    filename: "js/bundle.js",
    //images文件夹中放图片路径(保留10位长度图片)
    // assetModuleFilename:'images/[hash:10][ext][query]',
    // 自动清空上次打包结果
    clean: true,
  },
  // 加载器(实现对除了js,json文件外的所有文件进行编译，比如css等)
  module: {
    rules: [
      // css转换
      {
        test: /\.css$/,
        // 执行顺序是从右到左
        //原先是style.loader
        use: [
          //实现css文件解析与js同步。
          MiniCssExtractPlugin.loader,
          "css-loader",
          //解决css兼容性的问题
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  "postcss-preset-env", // 能解决大多数样式兼容性问题
                ],
              },
            },
          },
        ],
      },
      // less转换
      {
        test: /\.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          "less-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  "postcss-preset-env", // 能解决大多数样式兼容性问题
                ],
              },
            },
          },
        ],
      },
      // 当图片小于10kb的时候转化为base64
      {
        test: /\.(png|jpe?g|bmp|gif)/,
        type: "asset", //会转base64
        parser: {
          dataUrlCondition: {
            maxSize: 4 * 1024, // 4kb
          },
        },
        //生成文件的地方
        generator: {
          filename: "static/images/[hash][ext][query]",
        },
      },
      // 把这些后缀名放到一个指定的文件夹里面
      {
        test: /\.(ttf|woff2|woff)$/,
        type: "asset/resource",
        //生成文件的地方
        generator: {
          filename: "static/fonts/[hash][ext][query]",
        },
      },
    ],
  },
  // 插件
  plugins: [
    //都是相对路径
    new ESLintPlugin({
      // 指定需要校验的地方
      context: path.resolve(__dirname, "./src"),
    }),
    //自动添加js文件
    new HtmlWebpackPlugin({
      template: "./public/index.html",
    }),
    //实现css与js隔离开,各自加载各自的.
    new MiniCssExtractPlugin({
      filename: "static/css/main.css",
    }),
  ],
  // 开发模式(开发模式:development,生产模式:production)
  mode: "production",
};

devtool

这样设置的话，可以直接看到编译之前错误的代码位置，缺点就是生产模式下，速度太慢，尽量别用。

//使得错误的显示地方不是编译之后的位置，而是原先自己代码的位置
//(development模式下)
devtool:'cheap-module-source-map'
// (production模式下)
// devtool:'source-map'

oneOf

比如寻找后缀名是css，还是less的时候，我们会都遍历一遍，如果通过这个的话，找到一个后缀名的时候，就停止该文件的寻找，直接进行下一个文件的查找。

module:{
    rules:[
      {
        //每一个文件只能被一个loader匹配,匹配到就不再匹配后面的了。
        oneof:[
          {
            test:/\.css$/,
            use:['style-loader','css-loader'],
           generator:{
              filename:'css/main.css'
            }
          },
          {
            test:/\.less$/,
            use:['style-loader','css-loader','less-loader'],
            generator:{
              filename:'less/main.less'
            }
          },
          {
            test:/\.js$/,
            use:['babel-loader']
          }
        ]
      }
    ]
  },
include/exclude

我们在babel编译js文件的时候，并没有排除node_module文件，也会一并带入，而node_module文件是我们引入的包，也就是并不需要编译他，所以排除他，就可以提高我们的打包速度。

eslint当中也可以排除这个。

{
test:/\.js$/,
 use:['babel-loader'],
  //js文件下写。
 //两个只需要写一个就可以，否则报错。
 //exclude:/node_modules/,//排除node_modules下的文件，其他文件都处理
 include:path.resolve(__dirname,'./src'),  //只处理src里面的文件，其他文件不处理
}
cache
`我们在打包的时候，可以对之前编译的内容进行保存，这样下次就需要再进行这个内容的编译。`

eslint当中也可以用这个。

{
            test:/\.js$/,
            use:['babel-loader'],
            // build中常用。
            options:{
              // 开启babel缓存
              cacheDirectory:true,
              //  关闭缓存文件压缩
              cacheCompression:false
            }
          }

Thead

简而言之就是之前是一个打包东西，但是现在通过这个可以进行多人的进行该内容的打包编译，缺点就是你需要多付钱，但是项目大的时候这个很有用。

  1. 先获取自己cpu内核数量
  2. 然后安排干活
  3. 最后开始干活
1.
// nodejs核心模块，直接使用
const os = require("os");
// cpu核数
const threads = os.cpus().length;
//下载包
npm i thread-loader -D
2.
{
	 test: /\.js$/,
	 use: [
	   {
	     loader: "thread-loader", // 开启多进程
	     options: {
	       workers: threads, // 数量
	     },
	   },
	   {
	     loader: "babel-loader",
	     options: {
	       cacheDirectory: true, // 开启babel编译缓存
	     },
	   },
	 ],
}
3.
optimization: {
   minimize: true,
   minimizer: [
     // css压缩也可以写到optimization.minimizer里面，效果一样的
     new CssMinimizerPlugin(),
     // 当生产模式会默认开启TerserPlugin，但是我们需要进行其他配置，就要重新写了
     new TerserPlugin({
       parallel: threads // 开启多进程
     })
   ],
 },

Thead

在这里插入图片描述

一只野生的小飞龙
关注
专栏目录
webpack的配置与使用
qq_45112567的博客
06-14 527
安装配置webpack 先再项目中使用npm init -y 命令初始化一个package.json文件； 新建一个名字为src文件夹，将静态资源放入该文件夹中； 运行npm install webpack webpack-cli -D 命令，安装webpack相关的包； 再项目根目录中，创建名为webpack.config.js 的webpack文件； 在webpack的配置文件中，初始化基本配置； module.exports={ mode:'development'//项目上线时需要将这个改为prod
webpack里的module选项配置
weixin_34198762的博客
12-03 443
webpack里的module 有loaders选项和noParse选项，noParse选项配置不需要解析的目录和文件   module:{ loaders:[], noParse: [ path.join(__dirname + '/client/node_modules/jquery/'), path.join(__dirname + '/client/lib/**') ] } 　...
vue.config.js 配置configureWebpack 和 chainWebpack 以及一些常用配置
a123456234的博客
08-08 1898
configureWebpack 允许你在 Vue CLI 项目中直接修改 Webpack 的配置。它可以通过一个对象或一个函数来实现。如果你使用的是一个函数，那么它会接收默认的 Webpack 配置作为参数，并且你应该返回一个修改过的配置对象。是 Vue CLI 提供的一种更强大的方式来修改 Webpack 的配置。与不同，使用 Webpack Chain API，它允许你以一种声明式的方式来修改 Webpack 配置。
Vue脚手架配置webpack（configureWebpack，chainWebpack）
coding...
04-08 9559
Vue CLI 内部的 webpack 配置是通过 webpack-chain 维护的。这个库提供了一个 webpack 原始配置的上层抽象，使其可以定义具名的 loader 规则和具名插件，并有机会在后期进入这些规则并对它们的选项进行修改。在vue.config.js文件下配置webpack，其他的就不说了，主要是configureWebpack以及chainWebpack，两个在文件内是可以同时使用的。选项提供一个对象，该对象将会被 webpack-merge 合并入最终的 webpack 配置。
webpack配置与打包优化
hjdjhh的博客
12-30 2210
什么是跨域 浏览器，端口，域名有一项不同就会产生跨域 解决跨域 先在vue脚手架的根目录下创建 vue.congif.js 文件 vue的脚手架会自动进行webpack配置，而vue.congif.js 文件就是进行修改默认的该配置的 配置的思路 创建vue.congif.js 文件，里面的devServer 是进行开发环境的服务器配置的，里面有proxy是用来 进行代理的转发，在proxy里的 target 设置转发的网址 跨域转发 因为跨域的问题，axios是无法请求...
configureWebpack与chainWebpack
文摘资讯
12-29 7655
vue.config.js 中 configureWebpack 与 chainWebpack 区别configureWebpack 和 chainWebpack的作用相同，唯一的区别就是...
webpack学习笔记
09-26
webpack学习笔记，总结了实际开发过程中的实际问题，并进行了梳理，便于直接查找使用；同时也对于目前市面上的资源进行了借鉴，梳理成为可以简单查找，就可以找到对应的思路，便于使用，方面了自己，也节省了时间。
webpack学习文档
08-03
### Webpack 学习文档 #### 一、Webpack 概述 Webpack 是一款由德国开发者 Tobias Koppers 开发的开源项目，它最初被设计为一个模块打包器(module bundler)。随着时间的发展，Webpack 已经成为了前端开发领域中最...
webpack 学习文件
12-03
**Webpack 学习详解** Webpack 是一款现代 JavaScript 应用程序的静态模块打包工具。它将应用程序视为由多个模块组成，这些模块可以是 JavaScript 文件、CSS 文件、图片或任何其他资源。Webpack 将这些模块相互关联...
webpack学习资料
11-25
在深入Webpack的学习中，我们需要了解以下几个关键概念： 1. **Entry（入口）**：Webpack 构建的起点，它是你的应用的主文件，可以是单个文件或多个文件。通过配置entry属性，你可以指定多个入口点，创建多个独立的...
Webpack学习心得
zcylxzyh的博客
03-03 392
Webpack学习心得1、安装webpack2、webpack基本使用3、webpack配置文件 1、安装webpack 2、webpack基本使用 3、webpack配置文件 在根路径下自己创建
configureWebpack和chainWebpack的配置方式
Tom__cy的博客
03-16 3214
对象写法 const path = require("path"); function resolve(dir) { return path.join(__dirname, dir) } function getPlugins() { let plugins = [] if (process.env.VUE_APP_ENV === 'test') { plugins.push( // 添加插件 ) } if (process.env.VUE_APP_ENV
configureWebpack、chainWebpack配置vue.config.js
热门推荐
weixin_43443341的博客
09-30 4万+
configureWebpack、chainWebpack配置vue.config.js引入问题修改htmlWebpackPlugin.options.titlechainWebpack修改Loader选项添加Loader选项替换规则的LoaderconfigureWebpack 引入问题 我们使用vue create waf-console-vue创建一个Vue项目时，新生成的项目我们可以看到在public/index.html中有这样的内容： <title><%= htmlWebpac
webpack 配置
weixin_44785498的博客
02-07 1146
vue 中的 webpack 配置 publicPath 部署应用包时的基本 URL，这个值也可以被设置为空字符串 (’’) 或是相对路径 (’./’)，这样所有的资源都会被链接为相对路径，这样打出来的包可以被部署在任意路径。 Default: ‘/’ 例如： module.exports = { // 基本路径 publicPath: '/c/' } 那么，我们在使用本地服务器的时候，需要访问 http://localhost:8080/c/ 注意： ./ 和 / 的区别 如果设置 pu
vue项目中vue.config.js中配置webpack详解
wzy_PROTEIN的博客
05-13 3286
vue-cli3以前的版本中把webpack的配置都写在config文件中，可以vue-cli3以上的版本中没有了config目录，可以将配置webpack的文件写在vue.config.js文件里面。是一个可选的配置文件，如果项目的 (和同级的) 根目录中存在这个文件，那么它会被自动加载。你也可以使用中的vue字段，但是注意这种写法需要你严格遵照 JSON 的格式来写。
VueCli中自定义配置webpack
weixin_46972979的博客
05-10 1375
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
vue.config.js 文件中webpack配置，webpack 多种应用场景配置, 优化及多页面应用开发
gcyaozuodashen的博客
12-07 1万+
vue cli3 webpack精讲
vue-cli里的webpack配置，有configurewebpack和chainwebpack，他们都是对webpack进行配置，但是配置的方式不一样
Frank_colo的博客
09-27 926
vue.config.js文件里和webpack有关的是 configurewebpack和 chainwebpack。在vue2的项目里，会用到官方的vue-cli脚手架，会有vue.config.js这个配置文件。chainwebpack是通过链式调用的形式来改配置，它改的更细。configurewebpack是通过操作对象的形式来改配置。configurewebpack是通过操作对象的形式来改配置。chainwebpack是函数，这个函数的参数就是配置对象。configurewebpack是对象。
Webpack配置全解析（基础篇）
2401_84435152的博客
04-29 2442
我们也可以在项目目录新建一个html引入打包后的bundle.js文件查看效果。配置文件命令行的打包方式仅限于简单的项目，如果我们的项目较为复杂，有多个入口，我们不可能每次打包都把入口记下来；因此一般项目中都使用配置文件来进行打包；
webpack学习思维导图
最新发布
08-27
Webpack是一个强大的模块打包工具，它主要用于现代JavaScript应用的静态资源管理和优化。学习Webpack可以按照以下思维导图进行： 1. **基础概念** - 安装与配置：理解Webpack的基本安装过程，如npm安装、配置文件（webpack.config.js）的结构。 - 工作原理：模块解析、加载器（loader）、插件系统等核心组件。 2. **模块管理** - 输入与输出：Webpack如何处理模块的输入路径和输出路径。 - CommonJS & ES6模块化：熟悉CommonJS和ES6模块的区别及Webpack对它们的支持。 3. **打包流程** - 静态分析：了解Webpack是如何构建依赖树的。 - 缓存机制：认识Webpack的缓存策略，提高构建速度。 4. ** loader 技术** - 转换器：解释如何使用loaders转换各种文件类型，如CSS预处理器、图片压缩等。 - 自定义loader：如果需要，学习如何创建自定义loader来处理特定需求。 5. **优化与性能** - UglifyJS、terser：学习如何压缩代码以减小体积。 - SplitChunksPlugin：理解代码分割和懒加载的优化技术。 6. **常见插件** - HtmlWebpackPlugin：生成HTML模板并自动注入打包后的JS和CSS。 - MiniCssExtractPlugin：分离CSS到单独文件。 7. **高级主题** - HMR（热更新）：实时刷新模块变化。 - tree-shaking：移除未使用的代码。 8. **实践项目**：通过实际搭建项目来巩固所学知识，例如React、Vue等框架的前端项目。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值