webpack学习笔记

最新推荐文章于 2024-04-10 20:21:12 发布
最新推荐文章于 2024-04-10 20:21:12 发布
阅读量155 收藏
点赞数
文章标签： webpack 学习 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/XL984507092/article/details/131940742
版权

config文件

webpack.config.js

const path = require('path');  // nodejs核心模块, 专门用来处理路劲问题
const ESLintPlugin = require('eslint-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { entry } = require('./webpack.dev');

// entry:{
//   // 有多个入口文件，多入口
//   app:"./src/app/js",
//   main:"./src/main/js",
// }



module.exports = {
  // 入口
  entry: "./src/main.js", // 相对路径
  // 输出
  output: {
    // 所有文件的输出路劲
    //  __dirname nodejs的变量， 代表当前文件的文件夹目录
    path: path.resolve(__dirname, 'dist'), // 绝对路径
    // 文件名
    filename: "static/js/main.js",
    // filename: "[name].js", // webpack命名方式，[name]以文件名自己命名
    // clean: true, // 自动清空上次打包的内容  原理：在打包前，将path整个目录内容清空，在进行打包
  },
  // 加载器
  module: {
    rules: [
      // loader的配置
      {
        test: /\.css$/, // 只检测 css 文件
        use: [
          // 执行顺序：从左到右（从下到上）
          "style-loader", // 将 js 中 css 通过创建 style 标签添加到 html 文件中生效
          "css-loader" // 将 css 资源编译成 commonjs 的模块到 js 中
        ],
      },
      {
        test: /\.less$/,
        // loader : "xxx" , // 只能使用一个 loader
        use: [
          // 使用多个 loader
          'style-loader',
          'css-loader',
          'less-loader', // 将 less 编译成 css 文件
        ],
      },
      {
        test: /\.s[ac]ss$/,
        use: [
          'style-loader',
          'css-loader',
          // 将 Sass 编译成 CSS
          'sass-loader',
        ],
      },
      {
        test: /\.styl$/,
        use: ["style-loader", "css-loader", "stylus-loader"],
      },
      {
        test: /\.(png|jpe?g|gif|webp|svg)$/,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            // 小于 10kb 转 base64
            // 优点：减少请求数量 缺点：会变大
            maxSize: 10 * 1024 // 10kb
          }
        },
        generator: {
          // 输入图片的名称
          // [hash: 10] hash值只取前10位  [hash]产生一个id 唯一
          // [ext]  文件扩展名
          // [query]  路径带的参数
          filename: 'static/images/[hash:10][ext][query]'
        }
      },
      {
        test: /\.(ttf|woff2?|mp3|map4|avi)$/,
        type: 'asset/resource',
        generator: {
          // 输入图片的名称
          // [hash: 10] hash值只取前10位  [hash]产生一个id 唯一
          // [ext]  文件扩展名
          // [query]  路径带的参数
          filename: 'static/media/[hash:10][ext][query]'
        }
      },
      {
        test: /\.js$/,
        exclude: /node_modules/, // 排除 node_modules 中的js文件 文件不处理
        use: {
          loader: 'babel-loader',
          // options: {
          //   presets: ['@babel/preset-env']
          // }
        }
      }
    ]
  },
  // 插件
  plugins: [
    // plugin 的配置
    new ESLintPlugin({
      // 检查那些文件
      context: path.resolve(__dirname, 'src')
    }),
    new HtmlWebpackPlugin({
      // 模板： 以 public/index.html 文件创建新的 html 文件
      // 新的 html 文件特点 ： 1. 结构和原来一致，2.自动引入打包输出的资源
      template: path.resolve(__dirname, 'public/index.html'),
    }),
  ],
  // 开发服务器:不会输出资源，在内存中编译打包的
  devServer: {
    host: "localhost", // 启动服务器域名
    port: "3000", // 启动服务器端口号
    open: true, // 是否自动打开浏览器
  },
  // 模式
  mode: "development"
}

webpack.dev.js

const path = require('path');  // nodejs核心模块, 专门用来处理路劲问题
const ESLintPlugin = require('eslint-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin")

// nodejs核心模块，直接使用
const os = require("os");
// cpu核数
const threads = os.cpus().length;
const TerserWebpackPlugin = require("terser-webpack-plugin");


// 启动 npx webpack serve --config ./config/webpack.dev.js

module.exports = {
  // 入口
  entry: "./src/main.js", // 相对路径
  // 输出
  output: {
    // 所有文件的输出路劲
    // 开发模式没有输出
    path: undefined,
    // 文件名
    filename: "static/js/main.js",
    // clean: true, // 自动清空上次打包的内容  原理：在打包前，将path整个目录内容清空，在进行打包
  },
  // 加载器
  module: {
    rules: [
      // loader的配置
      {
        // 每个文件只能被其中一个loader处理
        oneOf: [
          {
            test: /\.css$/, // 只检测 css 文件
            use: [
              // 执行顺序：从左到右（从下到上）
              "style-loader", // 将 js 中 css 通过创建 style 标签添加到 html 文件中生效
              "css-loader" // 将 css 资源编译成 commonjs 的模块到 js 中
            ],
          },
          {
            test: /\.less$/,
            // loader : "xxx" , // 只能使用一个 loader
            use: [
              // 使用多个 loader
              'style-loader',
              'css-loader',
              'less-loader', // 将 less 编译成 css 文件
            ],
          },
          {
            test: /\.s[ac]ss$/,
            use: [
              'style-loader',
              'css-loader',
              // 将 Sass 编译成 CSS
              'sass-loader',
            ],
          },
          {
            test: /\.styl$/,
            use: ["style-loader", "css-loader", "stylus-loader"],
          },
          {
            test: /\.(png|jpe?g|gif|webp|svg)$/,
            type: 'asset',
            parser: {
              dataUrlCondition: {
                // 小于 10kb 转 base64
                // 优点：减少请求数量 缺点：会变大
                maxSize: 10 * 1024 // 10kb
              }
            },
            generator: {
              // 输入图片的名称
              // [hash: 10] hash值只取前10位  [hash]产生一个id 唯一
              // [ext]  文件扩展名
              // [query]  路径带的参数
              filename: 'static/images/[hash:10][ext][query]'
            }
          },
          {
            test: /\.(ttf|woff2?|mp3|map4|avi)$/,
            type: 'asset/resource',
            generator: {
              // 输入图片的名称
              // [hash: 10] hash值只取前10位  [hash]产生一个id 唯一
              // [ext]  文件扩展名
              // [query]  路径带的参数
              filename: 'static/media/[hash:10][ext][query]'
            }
          },
          {
            test: /\.js$/,
            // exclude: /node_modules/, // 排除 node_modules 中的js文件 文件不处理
            include: path.resolve(__dirname, '../src'),
            loader: 'babel-loader',
            use: [
              {
                loader: "thread-loader", // 开启多线程
                options: {
                  works: threads, // 进程数量
                }
              },
              {
                loader: 'babel-loader',
                options: {
                  // presets: ['@babel/preset-env'],
                  cacheDirectory: true, // 开启 babel 缓存,
                  cacheCompression: false, // 关闭缓存文件压缩,
                  plugins: ["@babel/plugin-transform-runtime"], // 减少代码体积
                }
              }
            ]
            // use: {
            // options: {
            //   presets: ['@babel/preset-env']
            // }
            // }
          },
        ]
      }
    ]
  },
  // 插件
  plugins: [
    // plugin 的配置
    new ESLintPlugin({
      // 检查那些文件
      context: path.resolve(__dirname, '../src'),
      exclude: "node_modules",
      cache: true, // 开启缓存
      cacheLocation: path.resolve(__dirname, "../node_modules/.cache/eslintcache"),
      // threads,  // 开启多线程和设置线程数量
    }),
    new HtmlWebpackPlugin({
      // 模板： 以 public/index.html 文件创建新的 html 文件
      // 新的 html 文件特点 ： 1. 结构和原来一致，2.自动引入打包输出的资源
      template: path.resolve(__dirname, '../public/index.html'),
    }),
    new HtmlWebpackPlugin({
      // 模板： 以 public/index.html 文件创建新的 html 文件
      // 新的 html 文件特点 ： 1. 结构和原来一致，2.自动引入打包输出的资源
      template: path.resolve(__dirname, '../public/index.html'),
    }),
  ],
  // 开发服务器:不会输出资源，在内存中编译打包的
  devServer: {
    host: "localhost", // 启动服务器域名
    port: "3000", // 启动服务器端口号
    open: true, // 是否自动打开浏览器
    hot: false, // false 关闭 HMR true 开启 HMR
  },
  // 模式
  mode: "development",
  devtool: "cheap-module-source-map",
}

webpack.prod.js

const path = require('path');  // nodejs核心模块, 专门用来处理路劲问题
const ESLintPlugin = require('eslint-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin")
// nodejs核心模块，直接使用
const os = require("os");
// cpu核数
const threads = os.cpus().length;
const TerserWebpackPlugin = require("terser-webpack-plugin");
const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");


// 启动 npx webpack serve --config ./config/webpack.prod.js


function getStyleLoader(pre) {
  return [
    // 执行顺序：从左到右（从下到上）
    MiniCssExtractPlugin.loader, // 将 js 中 css 通过创建 style 标签添加到 html 文件中生效
    "css-loader", // 将 css 资源编译成 commonjs 的模块到 js 中
    {
      loader: "postcss-loader",
      options: {
        postcssOptions: {
          plugins: [
            "postcss-preset-env", // 能解决大多数样式兼容性问题
          ],
        },
      },
    },
    pre,
  ].filter(Boolean)
}


module.exports = {
  // 入口
  entry: "./src/main.js", // 相对路径
  // 输出
  output: {
    // 所有文件的输出路劲
    //  __dirname nodejs的变量， 代表当前文件的文件夹目录
    path: path.resolve(__dirname, '../dist'), // 绝对路径
    // 文件名
    filename: "static/js/main.js",
    clean: true, // 自动清空上次打包的内容  原理：在打包前，将path整个目录内容清空，在进行打包
  },
  // 加载器
  module: {
    rules: [
      // loader的配置
      {
        oneOf: [
          {
            test: /\.css$/, // 只检测 css 文件
            use: getStyleLoader()
          },
          {
            test: /\.less$/,
            // loader : "xxx" , // 只能使用一个 loader
            use: getStyleLoader("less-loader")
          },
          {
            test: /\.s[ac]ss$/,
            use: getStyleLoader("sass-loader")
          },
          {
            test: /\.styl$/,
            use: getStyleLoader("stylus-loader"),
          },
          {
            test: /\.(png|jpe?g|gif|webp|svg)$/,
            type: 'asset',
            parser: {
              dataUrlCondition: {
                // 小于 10kb 转 base64
                // 优点：减少请求数量 缺点：会变大
                maxSize: 10 * 1024 // 10kb
              }
            },
            generator: {
              // 输入图片的名称
              // [hash: 10] hash值只取前10位  [hash]产生一个id 唯一
              // [ext]  文件扩展名
              // [query]  路径带的参数
              filename: 'static/images/[hash:10][ext][query]'
            }
          },
          {
            test: /\.(ttf|woff2?|mp3|map4|avi)$/,
            type: 'asset/resource',
            generator: {
              filename: 'static/media/[hash:10][ext][query]'
            }
          },
          {
            test: /\.js$/,
            // exclude: /node_modules/, // 排除 node_modules 中的js文件 文件不处理
            include: path.resolve(__dirname, '../src'),
            use: [
              {
                loader: "thread-loader", // 开启多线程
                options: {
                  works: threads, // 进程数量
                }
              },
              {
                loader: 'babel-loader',
                options: {
                  // presets: ['@babel/preset-env'],
                  cacheDirectory: true, // 开启 babel 缓存,
                  cacheCompression: false, // 关闭缓存文件压缩
                  plugins: ["@babel/plugin-transform-runtime"], // 减少代码体积
                }
              }
            ]
          }
        ]
      }
    ]
  },
  // 插件
  plugins: [
    // plugin 的配置
    new ESLintPlugin({
      // 检查那些文件
      context: path.resolve(__dirname, '../src'),
      exclude: "node_modules", // 默认值
      cache: true, // 开启缓存
      cacheLocation: path.resolve(__dirname, "../node_modules/.cache/eslintcache")
    }),
    new HtmlWebpackPlugin({
      // 模板： 以 public/index.html 文件创建新的 html 文件
      // 新的 html 文件特点 ： 1. 结构和原来一致，2.自动引入打包输出的资源
      template: path.resolve(__dirname, '../public/index.html'),
    }),
    // 提取css成单独文件
    new MiniCssExtractPlugin({
      // 定义输出文件名和目录
      filename: "static/css/main.css",
    }),
    new CssMinimizerPlugin(),
    new TerserWebpackPlugin({
      parallel: threads, // 开启多线程和设置线程数量
    }),
  ],
  optimization: {
    // 压缩的操作
    minimizer: [
      // 压缩 css
      new CssMinimizerPlugin(),
      // 压缩 js
      new TerserWebpackPlugin({
        parallel: threads, // 开启多线程和设置线程数量
      }),
      // 压缩图片
      new ImageMinimizerPlugin({
        minimizer: {
          implementation: ImageMinimizerPlugin.imageminGenerate,
          options: {
            plugins: [
              ["gifsicle", { interlaced: true }],
              ["jpegtran", { progressive: true }],
              ["optipng", { optimizationLevel: 5 }],
              [
                "svgo",
                {
                  plugins: [
                    "preset-default",
                    "prefixIds",
                    {
                      name: "sortAttrs",
                      params: {
                        xmlnsOrder: "alphabetical",
                      },
                    },
                  ],
                },
              ],
            ],
          },
        },
      }),
    ]
  },
  // 模式
  mode: "production",
  devtool: "source-map",
}

鹤鸣的日常
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Webpack加载器（Loaders）的执行顺序
why404
06-28 992
在Webpack中，加载器的执行顺序是从右往左、从下往上的。为什么会选择这样的执行顺序呢？本文将介绍Webpack加载器执行顺序的原因和解释，并通过一个CSS加载器的示例来说明。
webpack深入学习笔记
EmotionComputer
05-01 776
webpack4.0 以后需要安装webpack-cli，CLI => 命令行接口(command line interface)，其实webpack-cli也不是必须的，但是在webpack启动的时候需要它，它的作用就是在例如执行webpack --config webpack.config.js时将参数传给webpack。参考:https://www.webpackjs.com/api/cli/ 执行webpack， 首先去看webpack命令后面有没有指定配置文件，若没有， 再去寻找当..
Webpack的Loader和Plugin
最新发布
qq_37464878的博客
04-10 880
1.总类型前置loader普通loader内联loader后置loader2.默认类型默认为normal类型3.修改类型配置时可以通过enforce修改类型。Plugin在Webpack工作流程插入操作来扩展Webpack功能。
webpack执行流程知识点总结
Vivien_CC的博客
01-11 1411
假设你有一个 webpack.config.js 文件，其中定义了一些 webpack 配置选项，还有一些 shell 脚本参数，你想将它们整合到一个 options 对象中，然后将这个对象传递给下一个流程。
webpack5（一）
Mqyyy的博客
08-23 383
如果需要webpack进行打包，那么必须在入口文件进行引入。css/less/sass/stylus 都有自己对应的loader，不同的是，如果使用预处理器，预处理器的loader会先将预处理器处理为css文件，然后再继续执行，即将css代码编译成coomonjs模块放入js，再将js中的css文件通过创建style标签的方式加入到html中。1.npm install 需要下载的loader2.配置方式/内联方式（不推荐）module: {rules: [
webpack的执行流程
qq_21522331的博客
12-25 864
1.初始化compiler：new Compiler(cnofig)， config就是webpack.config.js文件的内容 2.开始编译：调用compiler的run方法开始编译 3.确定入口：根据config的entry找到所有的入口文件 4.编译模块：从入口文件触发，调用所有配置的loader对模块进行编译，并且还要收集模块依赖的模块，不断递归进行编译 5.完成模块编译：在经过第4步使用Loader编译完所有模块后，得到每个模块编译的内容和它们的依赖关系 6.输出资源：根据入口和模块之间的依
webpack学习笔记（二）
11-29
对webpack学习过程中的一些记录目前只包括webpack的基本配置相关的一些东西后期会更新webpack中的一些编译原理及一些插件的实现
webpack学习笔记之代码分割和按需加载的实例详解
12-01
本文介绍了webpack学习笔记之代码分割和按需加载的实例详解，分享给大家，也给自己留个笔记 为什么需要代码分割和按需加载 代码分割就是我们根据实际业务需求将代码进行分割，然后在合适的时候在将其加载进入文档中...
webpack-study:webpack学习笔记
03-20
Webpack五个核心概念一，参赛入口（Entry）指示Webpack以哪个文件为入口起点开始打包，分析内置内部依赖图。二，输出输出（输出）指示Webpack打包后的资源包输出到那里去，以及如何命名。三，装载机加载程序让...
webpack的使用步骤及插件使用方法
下雨打伞干嘛的博客
12-05 720
webpack、loader及plugin使用方法
webpack filemanager-webpack-plugin 打多个zip时，出现循环打包情况
会飞的程序猿
12-10 317
项目中用filemanager-webpack-plugin插件多次打zip会有问题，所以就有了在webpack 打包结束后，再执行打zip包操作的方案 package.json "scripts": { "build:prd": "node build/build.js --env=prd && node packageZip.js --env=prd" }, packageZip.js const fs = require('fs') const argv = req.
Vue学习——webpack执行流程以及实时打包插件的原理（2）
Hoorus的窝
04-26 500
前端学习
【Webpack-2】loader 和 plugin 的区别是什么？
sparks42的博客
10-08 452
不同的作用 Loader直译为"加载器"。Webpack将一切文件视为模块，但是webpack原生是只能解析js文件，如果想将其他文件也打包的话，就会用到loader。 所以Loader的作用是让webpack拥有了加载和解析非JavaScript文件的能力。 Plugin直译为"插件"。Plugin可以扩展webpack的功能，让webpack具有更多的灵活性。 在 Webpack 运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在合适的时机通过 Webpack 提供的 API 改变输
filemanager-webpack-plugin：项目webpack打包后移动dist里的文件夹
吴纯玲的博客
09-02 1507
某个vue项目打包后，有些静态资源的存放位置不太符合预期，导致访问这些资源的时候404。 希望改变打包后这些资源的存放位置，使其能够被正确访问。 一开始考虑的是copy-webpack-plugin - npm插件，但这个插件的本质是复制文件，虽然也能实现最终效果，但不符合程序员节能的思想，不想存在两份一模一样的文件，只想做移动操作。 最后，选用filemanager-webpack-plugin - npm
filemanager-webpack-plugin 对构建前后文件进行操作
weixin_45239190的博客
05-05 960
这个 Webpack 插件允许您在构建前或构建后复制、归档(.zip/.tar/.tar.gz)、移动、删除文件和目录。
webpack loader和plugin编写
weixin_34239592的博客
10-11 529
1 基础回顾 首先我们先回顾一下webpack常见配置，因为后面会用到，所以简单介绍一下。 1.1 webpack常见配置 // 入口文件 entry: { app: './src/js/index.js', }, // 输出文件 output: { filename: '[name].bundle.js', path: path.resolve(__dir...
html-webpack-plugin用法全解
weixin_33692284的博客
10-27 345
本文只在个人博客和 SegmentFault 社区个人专栏发表，转载请注明出处 个人博客: https://zengxiaotao.github.io SegmentFault 个人专栏: https://segmentfault.com/blog... html-webpack-plugin 可能用过的 webpack 的童鞋都用过...
写一个Webpack Plugin？其实很简单，看这些你就明白了
量子前端的博客
07-04 1264
Webpack Plugin原理
前端学习笔记 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、付费专栏及课程。

余额充值