webpack基础配置--学习笔记

最新推荐文章于 2024-05-02 18:27:13 发布
最新推荐文章于 2024-05-02 18:27:13 发布
阅读量85 收藏
点赞数
文章标签： webpack 前端 node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zws793838827/article/details/129308257
版权

1.基本使用

Webpack 是一个静态资源打包工具。

它会以一个或多个文件作为打包的入口，将我们整个项目所有文件编译组合成一个或多个文件输出出去。输出的文件就是编译好的文件，就可以在浏览器段运行了。我们将 Webpack 输出的文件叫做 bundle。

2.开始使用

2-1 下载依赖

初始化 package.json

npm init -y

下载

npm i webpack webpack-cli -D

创建 src文件目录

webpack_code # 项目根目录（所有指令必须在这个目录运行）
    └── src # 项目源码目录
        ├── js # js文件目录
        │   ├── count.js
        │   └── sum.js
        └── main.js # 项目主文件

启用 ：

npx webpack: 是用来运行本地安装 Webpack 包的。

./src/main.js: 指定 Webpack 从 main.js 文件开始打包，不但会打包 main.js，还会将其依赖也一起打包进来。

--mode=xxx：指定模式（环境）。

开发环境

npx webpack ./src/main.js --mode=development

生产环境

npx webpack ./src/main.js --mode=production

3.基本配置

3.1核心概念

  1. entry（入口）

指示 Webpack 从哪个文件开始打包

  1. output（输出）

指示 Webpack 打包完的文件输出到哪里去，如何命名等

  1. loader（加载器）

webpack 本身只能处理 js、json 等资源，其他资源需要借助 loader，Webpack 才能解析

  1. plugins（插件）

扩展 Webpack 的功能

  1. mode（模式）

主要由两种模式：

  • 开发模式：development
  • 生产模式：production

#

在项目根目录下新建文件：webpack.config.js

module.exports = {
  // 入口
  entry: "",
  // 输出
  output: {},
  // 加载器
  module: {
    rules: [],
  },
  // 插件
  plugins: [],
  // 模式
  mode: "",
};

4.处理样式资源

4-1 处理 Css 资源

下载包  

npm i css-loader style-loader -D
const path = require("path");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
  },
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  plugins: [],
  mode: "development",
};

4-2 处理 Less资源

下载包

npm i less-loader -D
const path = require("path");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
  },
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
    ],
  },
  plugins: [],
  mode: "development",
};

4-3 处理 SASS SCSS 资源

下载包

npm i sass-loader sass -D
const path = require("path");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
  },
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      {
        test: /\.s[ac]ss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
    ],
  },
  plugins: [],
  mode: "development",
};

4-4 处理 styl 资源

下载包

npm i stylus-loader -D
const path = require("path");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
  },
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      {
        test: /\.s[ac]ss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.styl$/,
        use: ["style-loader", "css-loader", "stylus-loader"],
      },
    ],
  },
  plugins: [],
  mode: "development",
};

4-5 处理图片资源

const path = require("path");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
  },
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      {
        test: /\.s[ac]ss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.styl$/,
        use: ["style-loader", "css-loader", "stylus-loader"],
      },
      {
        test: /\.(png|jpe?g|gif|webp)$/,
        type: "asset",
      },
    ],
  },
  plugins: [],
  mode: "development",
};

优化后

const path = require("path");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
  },
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      {
        test: /\.s[ac]ss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.styl$/,
        use: ["style-loader", "css-loader", "stylus-loader"],
      },
      {
        test: /\.(png|jpe?g|gif|webp)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024, // 小于10kb的图片会被base64处理
          },
        },
        generator: {
          // 将图片文件输出到 static/imgs 目录中
          // 将图片文件命名 [hash:8][ext][query]
          // [hash:8]: hash值取8位
          // [ext]: 使用之前的文件扩展名
          // [query]: 添加之前的query参数
          filename: "static/imgs/[hash:8][ext][query]",
        },
      },
    ],
  },
  plugins: [],
  mode: "development",
};

4-6 处理字体图标，音频视频等资源

const path = require("path");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
    clean: true, // 自动将上次打包目录资源清空
  },
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      {
        test: /\.s[ac]ss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.styl$/,
        use: ["style-loader", "css-loader", "stylus-loader"],
      },
      {
        test: /\.(png|jpe?g|gif|webp)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024, // 小于10kb的图片会被base64处理
          },
        },
        generator: {
          // 将图片文件输出到 static/imgs 目录中
          // 将图片文件命名 [hash:8][ext][query]
          // [hash:8]: hash值取8位
          // [ext]: 使用之前的文件扩展名
          // [query]: 添加之前的query参数
          filename: "static/imgs/[hash:8][ext][query]",
        },
      },
      {
        test: /\.(ttf|woff2?|map4|map3|avi)$/,
        type: "asset/resource",
        generator: {
          filename: "static/media/[hash:8][ext][query]",
        },
      },
    ],
  },
  plugins: [],
  mode: "development",
};

zws793838827
关注
webpack：:scroll:一些节点教程-《 Webpack学习笔记》
02-06
Webpack 是一个流行的模块...通过《Webpack学习笔记》这样的教程，你可以逐步掌握Webpack的基础和进阶用法，将其有效地应用于项目中，实现高效、模块化的前端开发。在学习过程中，不断实践和查阅官方文档是至关重要的。
一看就会的保姆级webpack配置介绍
weixin_48357279的博客
05-02 1880
webpack基本介绍 webpack官网 webpack是一个现代 JavaScript 应用程序的静态模块打包器(module bundler) 现代 javascript 应用程序的 静态模块打包器 (module bundler) 静态: 文件资源 模块: node环境, 引入文件, 遵守模块化语法 除了合并代码, 还可以翻译和压缩代码 less/sass -> css ES6/7/8 -> ES5 html/css/js -> 压缩...
webpack5基础使用（1）-介绍、打包文件、处理样式资源（css、less）文件、配置文件内容、eslint工具检测语法、babel工具es6语法转es5
lalala_dxf的博客
07-22 2231
webpack5是一个静态资源打包工具。会以一个或多个文件作为打包的入口，将整个项目所有文件编译组合成一个或多个文件输出出去。输出的文件就是编译好的文件，就可以直接在浏览器端运行了进一步来说就是当开发时，肯定会使用框架、es6模块化语法、less/sass等css预处理器等语法，而这类语法浏览器识别不了，需要进一步编译成js、css等语法浏览器才能够识别，而这一步就由打包工具完成。常见打包工具Grunt、Gulp、Parcel、Webpack、Rollup、Vite…等。...
webpack打包常用配置项
weixin_41166682的博客
09-05 1636
文件结构：最基础版 先安装 npm i webpack webpack-cli --dev。安装好后需要在webpack.config.js文件中配置它。sass和less预处理的loader也可以这样配置。运行命令：npx webpack 进行打包。
Webpack是什么？
q850593913的博客
02-09 317
-------------------------------------2021.02.09------------------------------------------- 本文章包含的内容 了解全局 - Webpack是什么？有什么用？ 定义目标 - 用Webpack打包一个最简单的文件 1. Webpack是什么？有什么用？ a. 是一个打包工具 可以根据多个文件的依赖关系将多个文件打包成一个或者多个文件，正如官网首页演示的图一样 b. 是一个语法转换工具 可以借助loader或者插件将代
（一）webpack 介绍
Luckyzhoufangbing的博客
12-12 210
1. 什么是webpack webpack是一个开源的js模块打包工具，其最核心的功能是解决模块之间的依赖，把各个模块按照核心的功能和规则组织在一起，最终合并成一个js文件（或者多个），这个过程就叫做模块打包 2. 什么是模块 比如在项目中引入一个npm包，比如封装了一个实现特定功能的js文件，这些都可以称之为模块，一般来说，一个模块负责一个功能 3. 不使用模块化缺点 以前都是把 sc...
Learning-Notes:学习笔记
05-25
学习笔记 后端开发 Java maven netty Redis Spring Spring4新特性 Spring使用注意事项 Spring验证Validation SpringBoot 开发知识 相关技术名词 开发技术框架工具整理 架构知识 开发过程注意事项整理 常用开发技巧 ...
vue-cli+webpack记事本项目创建
08-30
【Vue CLI + Webpack 记事本项目创建详解】 在前端开发中，Vue.js 是一个非常流行的轻量级框架，而 Vue CLI 和 ...这个项目不仅提供了实际应用的体验，也是学习 Vue.js、Webpack、Vuex 和 Vue Router 的绝佳实践。
vue学习笔记，学习vue从0-1的步骤
09-21
`vue-cli`是一个脚手架工具，可以快速初始化项目结构，包括配置Webpack和Babel等。 6. **Vue CLI 3**：Vue CLI 3 提供了一个更简洁、更快捷的命令行界面，用于创建项目、添加插件和服务。使用`vue create`命令可以...
webpack 零基础入门教程.zip
11-01
通过深入学习和实践本教程提供的"Webpack 3 零基础入门教程"，你将能够熟练地使用Webpack进行项目构建，为现代前端开发打下坚实的基础。无论你是新手还是经验丰富的开发者，这个教程都将帮助你更好地理解和利用...
webpack安装与使用
IT菜鸟
06-09 1427
webpack安装与使用
10分钟快速掌握webpack模块打包工具的常见用法
爱学习的小王的博客
10-03 805
10分钟快速学会webpack打包工具
webpack知识点总结（基础应用篇）
Vivien_CC的博客
12-19 1310
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。Webpack是一个模块打包器。在Webpack中会将前端的所有资源文件（js/json/css/img/less/...）都作为模块处理。它将根据模块的依赖关系进行分析，生成对应的资源实际上， webpack-cli 给我们提供了丰富的终端命令行指令，可以通过npx webpack --help 查看帮助信息。
2024年大数据最全【webpack】从零开始配置webpack系列(基础篇)_webpack (1)
最新发布
2401_84187537的博客
05-02 1026
打开终端，来到项目根目录。此时会生成一个基础的文件。
webpack安装及配置
hkduan的博客
06-18 695
现在js发展太快了，根本看不懂啊。于是乎想做做功课，于是乎看到了这些“奇怪”的写法，原来好多都是遵循了 ECMASCRIPT6，好吧，在本地看看怎么用的吧。写在本地的环境下， 发现各种报错，根本不能用。还在纳闷呢，这个例子是怎么能写成这个样，还在那教人的呢？误人子弟？怎么跑呢？各种搜索才发现，原来我们一般常用的js是遵循的ES5规范，由于浏览器 支持等各种原因，我们需要将最新的ES6语法变成ES5...
Webpack
nknmn
11-18 231
【代码】Webpack。
npx使用及原理
GMLGDJ的博客
03-09 4204
反过来，如果忽略本地的同名模块，强制安装使用远程模块，可以使用--ignore-existing参数。比如，本地已经全局安装了create-react-app，但还是想使用远程模块，就用这个参数。npx 的原理很简单，就是运行的时候，会到先到 node_modules/.bin路径 中查找命令如果没有再去 全局环境变量$PATH 里面，检查命令是否存在。如果想让 npx 强制使用本地模块，不下载远程模块，可以使用--no-install参数。Node安装后自带npm模块，可以直接使用npx命令。
nodejs,npm,npx,webpack等概念总结
weixin_53315593的博客
03-16 450
nodejs,npm,webpack等知识点梳理
深度解锁Webpack系列(基础篇)
油墨香^-^的博客
09-06 185
这显然不是我们源码中对应的行号，点进去的话，会发现代码是被编译后的，我当前的代码非常简单，还能看出来，项目代码复杂后，“亲妈”看编译后都费劲，这不利于我们开发调试，不是我们想要的，我们肯定还是希望能够直接对应到源码的。鱼和熊掌都想要，虽然很多时候，能吃个鱼就不错了，但是这里是可以的哦，删除html的loader，像下面这样编写图片的地址就可以啦。的默认配置很好用，但是有的时候，我们会有一些其它需要啦，例如，我们不止一个入口文件，这时候，该怎么办呢？是默认导出的，现在不是，所以引用的时候，需要注意一下。
Vue-cli快速入门：安装、模板选择与Webpack理解
Vue学习笔记进阶篇主要探讨了Vue ...总结来说，本篇学习笔记详细介绍了Vue CLI的安装步骤、其在Vue开发中的作用以及如何利用Webpack模板创建并配置Vue项目，这对于理解和使用Vue框架进行项目开发是非常重要的基础知识。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值