最全【webpack】从零开始配置webpack系列(基础篇)_webpack ，再不刷题就晚了

于 2024-05-16 03:00:39 发布
阅读量562 收藏 13
点赞数 15
文章标签： 大数据 面试 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84181326/article/details/138933816
版权

img
img
img

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化资料的朋友，可以戳这里获取

此时样式就会以 Style 标签的形式在页面上生效

配置

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",
};

添加 Css 资源

  • src/css/index.css
.box1 {
  width: 100px;
  height: 100px;
  background-color: pink;
}
  • src/main.js
import count from "./js/count";
import sum from "./js/sum";
// 引入 Css 资源，Webpack才会对其打包
import "./css/index.css";

console.log(count(2, 1));
console.log(sum(1, 2, 3, 4));
  • public/index.html（打包好的文件）
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>webpack5</title>
  </head>
  <body>
    <h1>Hello Webpack5</h1>
    <!-- 准备一个使用样式的 DOM 容器 -->
    <div class="box1"></div>
    <!-- 引入打包后的js文件，才能看到效果 -->
    <script src="../dist/main.js"></script>
  </body>
</html>
处理 Less 资源

下载包

npm i less-loader -D

功能介绍

  • less-loader：负责将 Less 文件编译成 Css 文件

配置

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",
};

添加 Less 资源

  • src/less/index.less
.box2 {
  width: 100px;
  height: 100px;
  background-color: deeppink;
}
  • src/main.js
import count from "./js/count";
import sum from "./js/sum";
// 引入资源，Webpack才会对其打包
import "./css/index.css";
import "./less/index.less";

console.log(count(2, 1));
console.log(sum(1, 2, 3, 4));
  • public/index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>webpack5</title>
  </head>
  <body>
    <h1>Hello Webpack5</h1>
    <div class="box1"></div>
    <div class="box2"></div>
    <script src="../dist/main.js"></script>
  </body>
</html>
处理 Sass 和 Scss 资源

下载包

npm i sass-loader sass -D

注意：需要下载两个

功能介绍

  • sass-loader：负责将 Sass 文件编译成 css 文件
  • sass：sass-loader 依赖 sass 进行编译

配置

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",
};

添加 Sass 资源

  • src/sass/index.sass
/\* 可以省略大括号和分号 \*/
.box3
  width: 100px
  height: 100px
  background-color: hotpink
  • src/sass/index.scss
.box4 {
  width: 100px;
  height: 100px;
  background-color: lightpink;
}
  • src/main.js
import count from "./js/count";
import sum from "./js/sum";
// 引入资源，Webpack才会对其打包
import "./css/index.css";
import "./less/index.less";
import "./sass/index.sass";
import "./sass/index.scss";

console.log(count(2, 1));
console.log(sum(1, 2, 3, 4));
  • public/index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>webpack5</title>
  </head>
  <body>
    <h1>Hello Webpack5</h1>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <script src="../dist/main.js"></script>
  </body>
</html>
处理 Styl 资源

下载包

npm i stylus-loader -D

功能介绍

  • stylus-loader：负责将 Styl 文件编译成 Css 文件

配置

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",
};

添加 Styl 资源

  • src/styl/index.styl
/\* 可以省略大括号、分号、冒号 \*/
.box 
  width 100px 
  height 100px 
  background-color pink
  • src/main.js
import { add } from "./math";
import count from "./js/count";
import sum from "./js/sum";
// 引入资源，Webpack才会对其打包
import "./css/index.css";
import "./less/index.less";
import "./sass/index.sass";
import "./sass/index.scss";
import "./styl/index.styl";

console.log(count(2, 1));
console.log(sum(1, 2, 3, 4));
  • public/index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>webpack5</title>
  </head>
  <body>
    <h1>Hello Webpack5</h1>
    <!-- 准备一个使用样式的 DOM 容器 -->
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
    <script src="../dist/main.js"></script>
  </body>
</html>

5.更多CSS处理

提取 Css 成单独文件

Css 文件目前被打包到 js 文件中，当 js 文件加载时，会创建一个 style 标签来生成样式

这样对于网站来说，会出现闪屏现象，用户体验不好

我们应该是单独的 Css 文件，通过 link 标签加载性能才好

下载包

npm i mini-css-extract-plugin -D

配置

  • webpack.prod.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

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: [MiniCssExtractPlugin.loader, "css-loader"],
      },
      {
        test: /\.less$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"],
      },
      {
        test: /\.s[ac]ss$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
      },
      {
        test: /\.styl$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "stylus-loader"],
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      // 以 public/index.html 为模板创建文件
      // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
      template: path.resolve(__dirname, "../public/index.html"),
    }),
    // 提取css成单独文件
    new MiniCssExtractPlugin({
      // 定义输出文件名和目录
      filename: "static/css/main.css",
    }),
  ],
  // devServer: {
  // host: "localhost", // 启动服务器域名
  // port: "3000", // 启动服务器端口号
  // open: true, // 是否自动打开浏览器
  // },
  mode: "production",
};
Css 兼容性处理

下载包

npm i postcss-loader postcss postcss-preset-env -D

配置

  • webpack.prod.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

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: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  "postcss-preset-env", // 能解决大多数样式兼容性问题
                ],
              },
            },
          },
        ],
      },
      {
        test: /\.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  "postcss-preset-env", // 能解决大多数样式兼容性问题
                ],
              },
            },
          },
          "less-loader",
        ],
      },
      {
        test: /\.s[ac]ss$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  "postcss-preset-env", // 能解决大多数样式兼容性问题
                ],
              },
            },
          },
          "sass-loader",
        ],
      },
      {
        test: /\.styl$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  "postcss-preset-env", // 能解决大多数样式兼容性问题
                ],
              },
            },
          },
          "stylus-loader",
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      // 以 public/index.html 为模板创建文件
      // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
      template: path.resolve(__dirname, "../public/index.html"),
    }),
    // 提取css成单独文件
    new MiniCssExtractPlugin({
      // 定义输出文件名和目录
      filename: "static/css/main.css",
    }),
  ],
  // devServer: {
  // host: "localhost", // 启动服务器域名
  // port: "3000", // 启动服务器端口号
  // open: true, // 是否自动打开浏览器
  // },
  mode: "production",
};

控制兼容性

我们可以在 package.json 文件中添加 browserslist 来控制样式的兼容性做到什么程度。

{
  // 其他省略
  "browserslist": ["ie >= 8"]
}

以上为了测试兼容性所以设置兼容浏览器 ie8 以上。

实际开发中我们一般不考虑旧版本浏览器了，所以我们可以这样设置：

{
  // 其他省略
  "browserslist": ["last 2 version", "> 1%", "not dead"]
}

合并配置

  • webpack.prod.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

// 获取处理样式的Loaders
const getStyleLoaders = (preProcessor) => {
  return [
    MiniCssExtractPlugin.loader,
    "css-loader",
    {
      loader: "postcss-loader",
      options: {
        postcssOptions: {
          plugins: [
            "postcss-preset-env", // 能解决大多数样式兼容性问题
          ],
        },
      },
    },
    preProcessor,
  ].filter(Boolean);
};

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: getStyleLoaders(),
      },
      {
        test: /\.less$/,
        use: getStyleLoaders("less-loader"),
      },
      {
        test: /\.s[ac]ss$/,
        use: getStyleLoaders("sass-loader"),
      },
      {
        test: /\.styl$/,
        use: getStyleLoaders("stylus-loader"),
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      // 以 public/index.html 为模板创建文件
      // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
      template: path.resolve(__dirname, "../public/index.html"),
    }),
    // 提取css成单独文件
    new MiniCssExtractPlugin({
      // 定义输出文件名和目录
      filename: "static/css/main.css",
    }),
  ],
  // devServer: {
  // host: "localhost", // 启动服务器域名
  // port: "3000", // 启动服务器端口号
  // open: true, // 是否自动打开浏览器
  // },
  mode: "production",
};
Css 压缩

下载包

npm i css-minimizer-webpack-plugin -D

配置

  • webpack.prod.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

// 获取处理样式的Loaders
const getStyleLoaders = (preProcessor) => {
  return [
    MiniCssExtractPlugin.loader,
    "css-loader",
    {
      loader: "postcss-loader",
      options: {
        postcssOptions: {
          plugins: [
            "postcss-preset-env", // 能解决大多数样式兼容性问题
          ],
        },
      },
    },
    preProcessor,
  ].filter(Boolean);
};

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: getStyleLoaders(),
      },
      {
        test: /\.less$/,
        use: getStyleLoaders("less-loader"),
      },
      {
        test: /\.s[ac]ss$/,
        use: getStyleLoaders("sass-loader"),
      },
      {
        test: /\.styl$/,
        use: getStyleLoaders("stylus-loader"),
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      // 以 public/index.html 为模板创建文件
      // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
      template: path.resolve(__dirname, "../public/index.html"),
    }),
    // 提取css成单独文件
    new MiniCssExtractPlugin({
      // 定义输出文件名和目录
      filename: "static/css/main.css",
    }),
    // css压缩
    new CssMinimizerPlugin(),
  ],
  // devServer: {
  // host: "localhost", // 启动服务器域名
  // port: "3000", // 启动服务器端口号
  // open: true, // 是否自动打开浏览器
  // },
  mode: "production",
};

6.处理 js 资源

有人可能会问，js 资源 Webpack 不能已经处理了吗，为什么我们还要处理呢？

原因是 Webpack 对 js 处理是有限的，只能编译 js 中 ES 模块化语法，不能编译其他语法，导致 js 不能在 IE 等浏览器运行，所以我们希望做一些兼容性处理。

其次开发中，团队对代码格式是有严格要求的，我们不能由肉眼去检测代码格式，需要使用专业的工具来检测。

  • 针对 js 兼容性处理，我们使用 Babel 来完成
  • 针对代码格式，我们使用 Eslint 来完成

我们先完成 Eslint，检测代码格式无误后，在由 Babel 做代码兼容性处理

Eslint

可组装的 JavaScript 和 JSX 检查工具。

这句话意思就是：它是用来检测 js 和 jsx 语法的工具，可以配置各项功能

我们使用 Eslint，关键是写 Eslint 配置文件，里面写上各种 rules 规则，将来运行 Eslint 时就会以写的规则对代码进行检查

配置文件

配置文件由很多种写法：

.eslintrc.*

 ：新建文件，位于项目根目录


	+ `.eslintrc`
	+ `.eslintrc.js`
	+ `.eslintrc.json`
	+ 区别在于配置格式不一样
* `package.json` 中 `eslintConfig`：不需要创建文件，在原有文件基础上写


ESLint 会查找和自动读取它们，所以以上配置文件只需要存在一个即可


具体配置


我们以 `.eslintrc.js` 配置文件为例：

module.exports = {
// 解析选项
parserOptions: {},
// 具体检查规则
rules: {},
// 继承其他规则
extends: [],
// …
};


1. parserOptions 解析选项

parserOptions: {
ecmaVersion: 6, // ES 语法版本
sourceType: “module”, // ES 模块化
ecmaFeatures: { // ES 其他特性
jsx: true // 如果是 React 项目，就需要开启 jsx 语法
}
}


2. rules 具体规则


* `"off"` 或 `0` - 关闭规则
* `"warn"` 或 `1` - 开启规则，使用警告级别的错误：`warn` (不会导致程序退出)
* `"error"` 或 `2` - 开启规则，使用错误级别的错误：`error` (当被触发的时候，程序会退出)

rules: {
semi: “error”, // 禁止使用分号
‘array-callback-return’: ‘warn’, // 强制数组方法的回调函数中有 return 语句，否则警告
‘default-case’: [
‘warn’, // 要求 switch 语句中有 default 分支，否则警告
{ commentPattern: ‘^no default$’ } // 允许在最后注释 no default, 就不会有警告了
],
eqeqeq: [
‘warn’, // 强制使用 === 和 !==，否则警告
‘smart’ // https://eslint.bootcss.com/docs/rules/eqeqeq#smart 除了少数情况下不会有警告
],
}


3. extends 继承


开发中一点点写 rules 规则太费劲了，所以有更好的办法，继承现有的规则。


现有以下较为有名的规则：


* [Eslint 官方的规则open in new window](https://bbs.csdn.net/topics/618545628)：`eslint:recommended`
* [Vue Cli 官方的规则open in new window](https://bbs.csdn.net/topics/618545628)：`plugin:vue/essential`
* [React Cli 官方的规则open in new window](https://bbs.csdn.net/topics/618545628)：`react-app`

// 例如在React项目中，我们可以这样写配置
module.exports = {
extends: [“react-app”],
rules: {
// 我们的规则会覆盖掉react-app的规则
// 所以想要修改规则直接改就是了
eqeqeq: [“warn”, “smart”],
},
};


  

##### 在 Webpack 中使用


1. 下载包

npm i eslint-webpack-plugin eslint -D


2. 定义 Eslint 配置文件


* .eslintrc.js

module.exports = {
// 继承 Eslint 规则
extends: [“eslint:recommended”],
env: {
node: true, // 启用node中全局变量
browser: true, // 启用浏览器中全局变量
},
parserOptions: {
ecmaVersion: 6,
sourceType: “module”,
},
rules: {
“no-var”: 2, // 不能使用 var 定义变量
},
};


3. 修改 js 文件代码


* main.js

import count from “./js/count”;
import sum from “./js/sum”;
// 引入资源，Webpack才会对其打包
import “./css/iconfont.css”;
import “./css/index.css”;
import “./less/index.less”;
import “./sass/index.sass”;
import “./sass/index.scss”;
import “./styl/index.styl”;

var result1 = count(2, 1);
console.log(result1);
var result2 = sum(1, 2, 3, 4);
console.log(result2);


4. 配置


* webpack.config.js

const path = require(“path”);
const ESLintWebpackPlugin = require(“eslint-webpack-plugin”);

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: /.cssKaTeX parse error: Expected 'EOF', got '}' at position 92: …oader"], }̲, { …/,
use: [“style-loader”, “css-loader”, “less-loader”],
}
]
},
plugins: [
new ESLintWebpackPlugin({
// 指定检查文件的根目录
context: path.resolve(__dirname, “src”),
}),
],
mode: “development”,
};


  

##### VSCode Eslint 插件


打开 VSCode，下载 Eslint 插件，即可不用编译就能看到错误，可以提前解决


但是此时就会对项目所有文件默认进行 Eslint 检查了，我们 dist 目录下的打包后文件就会报错。但是我们只需要检查 src 下面的文件，不需要检查 dist 下面的文件。


所以可以使用 Eslint 忽略文件解决。在项目根目录新建下面文件:


* `.eslintignore`

忽略dist目录下所有文件

dist


  

#### Babel


JavaScript 编译器。


主要用于将 ES6 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中


##### 配置文件


配置文件由很多种写法：


* ```
babel.config.*

：新建文件，位于项目根目录

+ `babel.config.js`
+ `babel.config.json`

.babelrc.*

 ：新建文件，位于项目根目录


	+ `.babelrc`
	+ `.babelrc.js`
	+ `.babelrc.json`
* `package.json` 中 `babel`：不需要创建文件，在原有文件基础上写


Babel 会查找和自动读取它们，所以以上配置文件只需要存在一个即可


##### 具体配置


我们以 `babel.config.js` 配置文件为例：

module.exports = {
// 预设
presets: [],
};


1. presets 预设


简单理解：就是一组 Babel 插件, 扩展 Babel 功能


* `@babel/preset-env`: 一个智能预设，允许您使用最新的 JavaScript。
* `@babel/preset-react`：一个用来编译 React jsx 语法的预设
* `@babel/preset-typescript`：一个用来编译 TypeScript 语法的预设


##### 在 Webpack 中使用


1. 下载包

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


2. 定义 Babel 配置文件


* babel.config.js

module.exports = {
presets: [“@babel/preset-env”],
};


3. 修改 js 文件代码


* main.js

import count from “./js/count”;
import sum from “./js/sum”;
// 引入资源，Webpack才会对其打包
import “./css/iconfont.css”;
import “./css/index.css”;
import “./less/index.less”;
import “./sass/index.sass”;
import “./sass/index.scss”;
import “./styl/index.styl”;

const result1 = count(2, 1);
console.log(result1);
const result2 = sum(1, 2, 3, 4);
console.log(result2);


4. 配置


* webpack.config.js

const path = require(“path”);
const ESLintWebpackPlugin = require(“eslint-webpack-plugin”);

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: /.cssKaTeX parse error: Expected 'EOF', got '}' at position 92: …oader"], }̲, { …/,
use: [“style-loader”, “css-loader”, “less-loader”],
},
{
test: /.js$/,
exclude: /node_modules/,
use: {
loader: ‘babel-loader’,
options: {
presets: [‘@babel/preset-env’]
}
}
}
]
},
plugins: [
new ESLintWebpackPlugin({
// 指定检查文件的根目录
context: path.resolve(__dirname, “src”),
}),
],
mode: “development”,
};


  

### 7.处理字体图标资源


##### 添加字体图标资源


* src/fonts/iconfont.ttf
* src/fonts/iconfont.woff
* src/fonts/iconfont.woff2
* src/css/iconfont.css
	+ 注意字体文件路径需要修改
* src/main.js

import { add } from “./math”;
import count from “./js/count”;
import sum from “./js/sum”;
// 引入资源，Webpack才会对其打包
import “./css/iconfont.css”;
import “./css/index.css”;
import “./less/index.less”;
import “./sass/index.sass”;
import “./sass/index.scss”;
import “./styl/index.styl”;

console.log(count(2, 1));
console.log(sum(1, 2, 3, 4));


* public/index.html
webpack5

Hello Webpack5


##### 配置

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: /.cssKaTeX parse error: Expected 'EOF', got '}' at position 92: …oader"], }̲, { …/,
type: “asset/resource”,
generator: {
filename: “static/media/[hash:8][ext][query]”,
},
},
],
},
plugins: [],
mode: “development”,
};


`type: "asset/resource"`和`type: "asset"`的区别：


1. `type: "asset/resource"` 相当于`file-loader`, 将文件转化成 Webpack 能识别的资源，其他不做处理
2. `type: "asset"` 相当于`url-loader`, 将文件转化成 Webpack 能识别的资源，同时小于某个大小的资源会处理成 data URI 形式


  

### 8.处理图片资源


过去在 Webpack4 时，我们处理图片资源通过 `file-loader` 和 `url-loader` 进行处理


现在 Webpack5 已经将两个 Loader 功能内置到 Webpack 里了，我们只需要简单配置即可处理图片资源


#### 配置

const path = require(“path”);

module.exports = {
entry: “./src/main.js”,
output: {
path: path.resolve(__dirname, “dist”),
filename: “main.js”,
},
module: {
rules: [
{
// 用来匹配 .css 结尾的文件
test: /.cssKaTeX parse error: Expected 'EOF', got '}' at position 92: …oader"], }̲, { …/,
type: “asset”,
},
],
},
plugins: [],
mode: “development”,
};


#### 添加图片资源


* src/images/1.jpeg
* src/images/2.png
* src/images/3.gif



![img](https://img-blog.csdnimg.cn/img_convert/b52722c5ded8d1f9a1355d489279d63c.png)
![img](https://img-blog.csdnimg.cn/img_convert/bbc919c1d5d6c1f7691fddf8c31f9258.png)

**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618545628)**


**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**

woff2?)$/,
        type: "asset/resource",
        generator: {
          filename: "static/media/[hash:8][ext][query]",
        },
      },
    ],
  },
  plugins: [],
  mode: "development",
};

type: "asset/resource"和type: "asset"的区别：

  1. type: "asset/resource" 相当于file-loader, 将文件转化成 Webpack 能识别的资源，其他不做处理
  2. type: "asset" 相当于url-loader, 将文件转化成 Webpack 能识别的资源，同时小于某个大小的资源会处理成 data URI 形式

8.处理图片资源

过去在 Webpack4 时，我们处理图片资源通过 file-loader 和 url-loader 进行处理

现在 Webpack5 已经将两个 Loader 功能内置到 Webpack 里了，我们只需要简单配置即可处理图片资源

配置
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: /\.(png|jpe?g|gif|webp)$/,
        type: "asset",
      },
    ],
  },
  plugins: [],
  mode: "development",
};
添加图片资源
  • src/images/1.jpeg
  • src/images/2.png
  • src/images/3.gif

[外链图片转存中…(img-ixp65fSq-1715799617296)]
[外链图片转存中…(img-I4qD2WzO-1715799617297)]

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

2401_84181326
关注
  • 15
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【webpack】从零开始配置webpack系列(基础篇)_webpack
2401_84181286的博客
04-30 446
指示 Webpack 从哪个文件开始打包指示 Webpack 打包完的文件输出到哪里去，如何命名等webpack 本身只能处理 js、json 等资源，其他资源需要借助 loader，Webpack 才能解析扩展 Webpack 的功能。
webpack配置完全指南
gogo2027的博客
11-15 534
对于入门选手来讲，webpack 配置项很多很重，如何快速配置一个可用于线上环境的 webpack 就是一件值得思考的事情。其实熟悉 webpack 之后会发现很简单，基础的配置可以分为以下几个方面：entry、output、mode、resolve、module、、plugin、source map、等，本文就来重点分析下这些部分。较小的输出包体积浏览器中更快的代码执行速度忽略开发中的代码不公开源代码或文件路径易于使用的输出资产浏览器调试工具快速增量编译可加快开发周期。
webpack从零开始学习一
山有木兮木有枝 心悦君兮君不知
04-08 252
1.新建项目 npm init或者npm init -y -y 的含义：yes的意思，在init的时候省去了敲回车的步骤，生成的默认的package.json 2.安装webpack、webpack-cli npm installwebpackwebpack-cli -D 3.新建webpack.config.js配置文件 备注：执行npm installwebpackwebpack-cli -D后生成node_modules->bin->webpack.cmd a.m...
从零开始学习webpack4---(更新中)
ky1in93的博客
06-05 3367
内容取自官网：https://www.valentinog.com/blog/webpack-4-tutorial/webpack4主打的就是0配置。特性1：webpack 4不需要配置文件。它会查找./src/index.js  作为默认入口点。而且，它会在./dist/main.js中吐出这个包。特性2：生产和开发模式"scripts": { "dev": "webpack --mode d...
webpack配置
cdy_1的博客
08-26 533
webpack基本配置
webpack4 从零学习常用配置(小结)
10-16
本篇文章主要针对Webpack 4的基础配置进行总结，帮助开发者快速理解和掌握其核心概念。 **核心部分** 1. **Entry（入口）** 入口(entry)是Webpack构建流程的起点，它定义了应用程序的主文件或多个入口文件。在...
webpack-4-go:Webpack-4-从零开始实战手册（基础篇）
03-11
Webpack-4-从零开始实战手册（基础篇） 前言： 2018年2月底的WebPack维护团队发布了 。其中移除了像CommonsChunkPlugin ，预设支援mode模式切换等改动进而比起webpack3打包速度有大大的提升。如果你对的WebPack还很...
使用webpack 4打包使用—基础篇
01-08
webpack 4打包使用—基础篇 文章目录webpack 4打包使用—基础篇全局安装webpack4打包项目webpack-dev-serverwebpack-dev-server 的命令参数 全局安装webpack4 npm i webpack -g npm i webpack-cli -g webpack4在...
ltadpoles#web-document#webpack基础配置1
07-25
前言虽然一直在接触 webpack ，不过都是在项目开发时遇到问题去看看文档，并没有系统化地学习、消化。这篇文章将从 webapck 最基本的配置开始说起，直到
webpack项目开发配置1
08-04
在本篇文章中，我们将详细介绍如何配置 Webpack 项目开发环境，包括安装 Node.js、创建项目、安装 Webpack、创建 Webpack 配置文件等步骤。 Node.js 安装 在开始配置 Webpack 项目之前，需要首先安装 Node.js。...
webpack配置详解
Kotoba209_的博客
05-22 2385
webpack 基础配置总结文件大致结构entry**output****mode****loader****module****Plugins**sourceMapWebpackDevServerBabel处理ES6配置React打包环境多⻚⾯打包通⽤⽅案⽂件监听配置别名 resolve.aliasresolve.extensions配置使⽤静态资源路径publicPath(CDN)压缩css压缩HTMLdevelopment vs Production模式区分打包基于环境变量区分tree Shakin
Webpack（4）Mode模式
悦涵仙子的技术笔记本
08-23 402
告知 webpack 使用相应模式的内置优化，值有两个：development 或 production 之中的一个 在配置中提供 mode 选项： module.exports = { mode: 'production' }; 或者从 CLI 参数中传递： webpack --mode=production 支持以下字符串值： 选项 描述 development right-aligned 会将 process.env.NODE_ENV 的值设为 development。启用 N
Webpack 配置详解（含 4）——从 0 配置一套开发模板
小猪的博客
05-08 1574
前言源代码熟悉 webpack 与 webpack4 配置。webpack4 相对于 3 的最主要的区别是所谓的零配置，但是为了满足我们的项目需求还是要自己进行配置，不过我们可以使用一些 webpack 的预设值。同时 webpack 也拆成了两部分，webpack 和 webpack-cli，都需要本地安装。我们通过实现一个 vue 的开发模板（vue init webpack 模板，其实跟 v...
webpack常用基本配置
allloners的博客
03-29 879
loader配置 css配置 module: { rules: [ // 详细loader配置 { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] } ]
【webpack5】常用配置
为了皮肤，争取早日到Lv4。
04-15 1124
webpack常用功能提供的配置选项。
Webpack【Webpack中模式(Mode)、Webpack中使用DevServer、Webpack中devtool增强调试过程】(二)-全面详解（学习总结---从入门到深化）
最新发布
12-09 713
Webpack【Webpack中模式(Mode)、Webpack中使用DevServer、Webpack中devtool增强调试过程】(二)-全面详解（学习总结---从入门到深化）
webpack 浅析-- htmlWebpackPlugin 插件
s310558652的博客
03-17 3530
htmlWebpackPlugin  可以自动的创建 html  文件 动态的引用文件名包含 hash 值得文件 1，使用 npm install html-webpack-plugin --save-dev 安装插件 2，在配置文件中的使用 引用插件 var htmlWebpackPlugin = require('html-webpack-plugin'); 插件简单的配置 mod
htmlWebpackPlugin的使用
MrZZhou的博客
06-20 4720
用途 它将创建一个html文件，将打包好的各种如js、css模块引用进去,并通过提供的各种参数完成多种处理npm链接 —GitHub 使用 $ npm install html-webpack-plugin –save-dev 然后比如在webpack配置文件中require 并添加实例 常用属性使用template：指定将创建的html所使用的模板； inject：指定输出的文件
学习webpack,看这一篇就够了
09-18
这篇文章主要介绍了webpack的基础知识和使用方法。首先，它解释了webpack的基本概念，如入口和出口文件、loader和plugin等。然后，它详细介绍了如何配置webpack的各个参数和插件，包括如何使用Babel处理ES6语法，...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值