Webpack 笔记 01：开发环境基本配置

最新推荐文章于 2024-07-20 10:36:53 发布
最新推荐文章于 2024-07-20 10:36:53 发布
阅读量509 收藏
点赞数
分类专栏： 前端 文章标签： jquery javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Alice_Lee_Lee/article/details/121632551
版权

Webpack 简介

什么是 Webpack？
  • webpack是一种前端资源构建工具，一个静态模块打包器
  • 在webpack看来，前端所有的资源文件都会作为模块处理
  • 它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)’
Webpack 五个核心概念
  1. Entry：入口指示 Webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图
  2. Output：输出指示 Webpack 打包后的资源 bundles 输出到哪里去，以及如何命名
  3. Loader：让 Webpack 能够去处理那些非JS文件
  4. Plugins：可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等
  5. Mode：指示 Webpack 使用相应模式的配置。
选项描述特点
development会将 process.env.NODE_ENV 的值设置为development能让代码本地调试运行的环境
production会将 process.env.NODE_ENV 的值设置为production能让代码优化上线运行的环境

Webpack开发环境基本配置

1. 打包 JS 和 JSON
// 入口起点文件
import data from "./data.json";
// import './index.css' 命令执行会报错

console.log(data);

function add(x, y) {
  return x + y;
}
console.log(add(1, 2));

运行指令
1.开发环境：webpack ./webpack/02webpack初体验/src/index.js -o ./webpack/02webpack初体验/build/built.js --mode=development（以 ./src/index.js 为入口文件开始打包，打包后输出到 ./build/built.js，整体打包环境为开发环境）
2.生产环境：webpack ./webpack/02webpack初体验/src/index.js -o ./webpack/02webpack初体验/build/built.js --mode=production

结论：

  • webpack可以处理js/json资源，不能处理css/img等其他资源
  • 生产环境和开发环境将ES6模块化编译成浏览器能识别的模块化
  • 生产环境比开发环境多一个压缩js代码
2. 打包样式资源
import "./index.css";
import "./test.less";

配置文件 webpack.config.js

/*
webpack配置文件
    webpack指令运行时会加载其中的配置
    所有的构建工具都是基于Node.js来运行的，模块化默认采用CommonJS
*/
// 用来拼接绝对路径的方法
const { resolve } = require("path");
module.exports = {
  // 入口文件
  entry: "./src/index.js",
  output: {
    filename: "built.js",
    // 路径写绝对路径 __dirname代表当前文件的绝对路径
    path: resolve(__dirname, "build"),
  },
  // loader配置
  module: {
    rules: [
      // 不同文件配置不同的loader
      {
        // 匹配哪些文件
        test: /\.css$/,
        // 使用哪些loader，loader按照从后往前的顺序执行
        use: [
          // 创建style标签，将js中的css样式资源插入进去，添加到页面中生效
          "style-loader", // 需要下载
          //将css文件变成commonjs模块加载到js中，内容是样式字符串
          "css-loader", // 需要下载
        ],
      },
      {
        test: /\.less$/,
        use: [
          "style-loader",
          "css-loader",
          // 将less文件编译成css文件
          "less-loader", // 需要额外再下载less包
        ],
      },
    ],
  },
  plugins: [],
  mode: "development",
};

直接运行 webpack 指令即可

<h1 id="title">大河之剑天上来</h1>
<script src="./built.js"></script>

使用上述代码进行测试打包是否正确

3. 打包 html 资源
/*
需要使用插件来打包html资源
1.下载 2.引入 3.配置插件
*/
const { resolve } = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "built.js",
    path: resolve(__dirname, "build"),
  },
  module: {
    rules: [],
  },
  plugins: [
    // 默认创建一个空的 html 文件，自动引入打包输出的所有资源
    new HtmlWebpackPlugin({
      // 复制这个文件，并自动引入打包输出的所有资源
      template: "./src/index.html",
    }),
  ],
  mode: "development",
};
4. 打包图片资源

index.html

<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<img src="./angular.jpg" alt="angular">

index.less

#box1 {
  width: 100px;
  height: 100px;
  background-image: url("./vue.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

#box2 {
  width: 200px;
  height: 200px;
  background-image: url("./react.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

#box3 {
  width: 300px;
  height: 300px;
  background-image: url("./angular.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

index.js

import "./index.less";

webpack.config.js

const { resolve } = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "built.js",
    path: resolve(__dirname, "build"),
  },
  module: {
    rules: [
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      {
        // 这种方式无法处理html中的img图片
        test: /\.(jpg|png|gif)$/,
        // 下载url-loader 和 file-loader
        loader: "url-loader",
        options: {
          // 图片大小小于8kb，就会被base64处理
          // 优点：减少请求数量（减轻服务器压力）
          // 缺点：图片体积会更大（请求速度慢）
          limit: 8 * 1024,
          // url-loader 默认使用es6模块化解析，而html-loader引入图片是commonJS，解析时会报错
          // 关闭url-loader的es6模块化，使用commonJS来解析
          esModule: false,
          // 图片名是哈希值，会比较长，使用以下方式重命名
          // 含义：取hash的前10位，[ext]表示取文件原来的扩展名
          name: "[hash:10].[ext]",
        },
      },
      {
        test: /\.html$/,
        // 处理html文件中的img图片（负责引入img，从而能被url-loader进行处理）
        loader: "html-loader",
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",
    }),
  ],
  mode: "development",
};

打包后的index.html

<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<img src="830bf3c820.jpg" alt="angular" />
<script src="built.js"></script>
5. 打包其他资源

index.html

<link rel="stylesheet" href="./iconfont.css">

<span class="iconfont icon-auto"></span>
<span class="iconfont icon-data"></span>
<span class="iconfont icon-rmb"></span>
<span class="iconfont icon-play-fill"></span>

index.js

// 引入样式文件
import "./iconfont.css";

在src文件夹中引入字体库的css文件和字体文件

webpack.config.js

const { resolve } = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "built.js",
    path: resolve(__dirname, "build"),
  },
  module: {
    rules: [
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader"],
      },
      // 打包其他资源（除了html/js/css资源以外的资源）
      {
        // 排除某些资源
        exclude: /\.(css|js|html)$/,
        loader: "file-loader",
      }
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",
    }),
  ],
  mode: "development",
};

打包后的html

<link rel="stylesheet" href="./iconfont.css">

<span class="iconfont icon-auto"></span>
<span class="iconfont icon-data"></span>
<span class="iconfont icon-rmb"></span>
<span class="iconfont icon-play-fill"></span>
<script src="built.js"></script>
6. devServer
  • 开发服务器 devServer：自动化（自动编译，自动打开浏览器，自动刷新浏览器）
  • 特点：只会在内存中编译打包，不会有任何输出
  • 启动指令：npx webpack-dev-server 要下载webpack-dev-server包
  • 启动后在浏览器输入 localhost:端口号即可访问

在配置文件中增加下面的对象

mode: "development",
devServer: {
  // 构建后的项目路径
  contentBase: resolve(__dirname, "build"),
  // 启动gzip压缩
  compress: true,
  // 端口号
  port: 12800,
  // 自动打开浏览器
  open: true,
},
7. 开发环境基本配置

webpack.config.js

const { resolve } = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/js/index.js",
  output: {
    filename: "js/built.js",
    path: resolve(__dirname, "build"),
  },
  module: {
    rules: [
      {
        // 处理css资源
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        // 处理less资源
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      {
        // 处理图片资源
        test: /\.(jpg|png|gif)$/,
        loader: "url-loader",
        options: {
          limit: 8 * 1024,
          esModule: false,
          name: "[hash:10].[ext]",
          outputPath: "imgs",
        },
      },
      {
        // 处理html中的img资源
        test: /\.html$/,
        loader: "html-loader",
      },
      {
        // 处理其他资源
        exclude: /\.(css|js|html|less|jpg|png|gif)$/,
        loader: "file-loader",
        options: {
          name: "[hash:10].[ext]",
          outputPath: "media",
        },
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",
    }),
  ],
  mode: "development",
  devServer: {
    contentBase: resolve(__dirname, "build"),
    compress: true,
    port: 12800,
    open: true,
  },
};

配置时要注意文件路径

补充

1. clean-webpack-plugin

默认情况下，webpack是用新打包的文件替换以前打包的文件。使用该插件，可以先将以前打包的文件删除，再放入新打包的文件

const { CleanWebpackPlugin } = require("clean-webpack-plugin");
plugins: [
  new CleanWebpackPlugin(),
],
2. 打包 ts 资源
{
  test: /\.ts$/,
  use: ["ts-loader"],
  exclude: /node_modules/,
},

关于版本问题包的版本可以参考 https://blog.csdn.net/Alice_Lee_Lee/article/details/122481482

Alice_LMY
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webpack-features:快速配置Webpack
05-08
预设适用于具有以下功能的大多数应用程序：ESNext语法，CSS和媒体文件加载，生产/开发环境，浏览器/node.js目标及其他（请参阅选项）。 预设对项目的结构做出以下假设： src/index.js应用程序的入口点 src/index....
webpack：:scroll:一些节点教程-《 Webpack学习笔记》
02-06
Webpack 是一个流行的模块...通过《Webpack学习笔记》这样的教程，你可以逐步掌握Webpack的基础和进阶用法，将其有效地应用于项目中，实现高效、模块化的前端开发。在学习过程中，不断实践和查阅官方文档是至关重要的。
webpack开发环境的基本配置（二）
weixin_40359716的博客
03-12 222
1. 创建配置文件 创建文件 webpack.config.js 配置内容如下 const { resolve } = require('path'); // node 内置核心模块，用来处理路径问题。 module.exports = { entry: './src/js/index.js', // 入口文件 output: { // 输出配置 filename: './built.js', // 输出文件名 path: resolve(__dirname, 'build/js')
Webpack 笔记 02：生产环境基本配置
Alice_Lee_Lee的博客
11-30 455
Webpack生产环境基本配置 1. 提取css成单独文件 webpack.config.js const HtmlWebpackPlugin = require("html-webpack-plugin"); const { resolve } = require("path"); // mini-css-extract-plugin 单独提取css文件 const MiniCssExtractPlugin = require("mini-css-extract-plugin"); module.exp
webpack学习笔记01 生产环境的基本配置-开发环境的基本配置
好好学习天天向上
05-10 529
文章目录webpack 学习笔记面试题 webpack 学习笔记 面试题 webpack内容比较杂乱，先整理面试题，在学习的时候可以抓住重点。 Webpack的打包过程？ Webpack的 vendor 和model 有什么区别吗？ Webpack 的 loader的作用？ Webpack loader 和 plugin 的区别 Webpack 做过哪些优化手段？有哪些优化手段？ Webpack 插件的执行顺序（加载机制）？ Webpack中怎么实现组件异步加载 Webpack如何配置压缩代码？压缩了
webpack基本使用和开发环境配置
weixin_51249285的博客
03-02 1023
webpack基本使用和开发环境配置
Webpack5学习笔记（二）：Webpack开发环境基本配置
哇哇小仔的博客
03-19 313
Webpack5学习笔记（二）：webpack开发环境基本配置 Author: 哇哇小仔 Date: 2021-03-18 Webpack版本：webpack 5.24.4 webpack-cli 4.5.0 第3章：webpack开发环境基本配置 3.1 创建配置文件 创建文件 webpack.config.js 配置内容如下 const {resolve} = require('path'); // node内置核心模块，用来处理路径问题 module.exports
Webpack 笔记 03：性能优化
Alice_Lee_Lee的博客
12-01 315
什么是 Webpack？ webpack是一种前端资源构建工具，一个静态模块打包器 在webpack看来，前端所有的资源文件都会作为模块处理 它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle) ...
webpack学习笔记：搭建基本的前端开发环境
weixin_34220963的博客
07-02 101
完成日常中需要的基础前端构建需求：构建 HTML、CSS、JS 文件、使用 CSS 预处理器来编写样式、处理和压缩图片、使用 Babel、方便开发调试的静态服务 安装和使用 我们使用 npm 或者 yarn 来安装 webpack，可以作为一个全局的命令来使用： npm install webpack webpack-cli -g # 或者 yarn global add webpack w...
webpack打包学习笔记02-webpack管理资源与开发环境相关配置
冷故事的博客
06-02 124
管理资源 还是使用之前的文件，这里不做修改 加载css npm install --save-dev style-loader css-loader webpack.config.js const path = require('path') module.exports = { entry: './src/index.js', output: { filenam...
webpack-notes:第9周Webpack讲座的注意事项
04-29
从基本的Express应用程序开始，然后开发更复杂的Rails应用程序，您可能会接触到您可能不了解的项目配置。 在您的最终项目中，很可能您使用了现有的项目模板。 今天，我想向您展示一种创建自己的自定义项目配置的...
webpack4配置demo
12-18
这个“webpack4配置demo”是一个针对初学者的教程，旨在帮助开发者理解并掌握如何使用Webpack 4 搭建开发环境。 Webpack 的核心概念包括入口（entry）、输出（output）、加载器（loaders）和插件（plugins）。在...
Solidity-以太坊区块链-Truffle-webpack-开发入门 (一) 环境配置
01-07
本教程全部来自官网，去年2018年底翻译了全部的文档，过了一年了我对当初的学习没什么印象了，不知道有没有错，但确定的是区块链模拟成功的了，所以大家基本不用担心我的笔记有什么大问题，现在2019年底了，我就把我...
webpack笔记三：使用 source map 以及开发环境的配置
weixin_34319374的博客
04-09 320
首先配置好简单的开发环境： npm init -y cnpm install webpack webpack-cli -D 目录如下： 一、在webpack中使用source map 在实际开发过程中，我们在使用webpack打包的时候，打包完成的bundle.js报错信息是很难Debug的，这时候就需要Source Map来还原真实的...
TinyVue v3.17.0 正式发布，推出了一款基于 Quill 2.0 的富文本编辑器，功能强大、开箱即用！
OpenTiny的博客
07-17 1244
本文由体验技术团队Kagol老师原创~我们非常高兴地宣布，2024年6月26日，TinyVue 发布了 v3.17.0 🎉。TinyVue 每次大版本发布，都会给大家带来一些实用的新特性，上一个版本我们重构了 chart-core，新增 CircleProcessChart 圆环进度图等6个新的图表组件，并增加了 Statistic 数据统计组件。表格图片超链接复制粘贴插入表情文件上传@提醒斜杆菜单v-auto-tip。
react 快速入门思维导图
weixin_44565776的博客
07-18 334
只要掌握了这些react技能，基本就可以熟练使用react了
Vue3企业级项目开发实战课-笔记记录
最新发布
tuku0801的专栏
07-20 822
实践 Vue 3 自研组件库开发、Node.js 服务端开发、Vue 3 结合 Node.js 的全栈项目开发以及全栈项目的单元测试等大厂常见的项目技术场景
Webpack中文指南：配置与使用详解
9. **开发环境与生产环境**：Webpack 提供了开发服务器（Dev Server）和热模块替换（Hot Module Replacement），便于开发时快速迭代。而在生产环境中，可以使用`--mode production`开启优化，如代码压缩、去除注释等...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值