0
点赞
收藏
分享

微信扫一扫

webpack5基础--02_基本配置( 5 大核心概念)

冶炼厂小练 03-01 08:45 阅读 4

基本配置

在开始使用 Webpack 之前,我们需要对 Webpack 的配置有一定的认识。

5 大核心概念

  1. entry(入口)

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

  1. output(输出)

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

  1. loader(加载器)

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

  1. plugins(插件)

扩展 Webpack 的功能

  1. mode(模式)

主要由两种模式:

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

准备 Webpack 配置文件

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

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

Webpack 是基于 Node.js 运行的,所以采用 Common.js 模块化规范

修改配置文件

  1. 配置文件
// Node.js的核心模块,专门用来处理文件路径
const path = require("path");

module.exports = {
  // 入口
  // 相对路径和绝对路径都行
  entry: "./src/main.js",
  // 输出
  output: {
    // path: 文件输出目录,必须是绝对路径
    // path.resolve()方法返回一个绝对路径
    // __dirname 当前文件的文件夹绝对路径
    path: path.resolve(__dirname, "dist"),
    // filename: 输出文件名
    filename: "main.js",
  },
  // 加载器
  module: {
    rules: [],
  },
  // 插件
  plugins: [],
  // 模式
  mode: "development", // 开发模式
};
  1. 运行指令
npx webpack

此时功能和之前一样,也不能处理样式资源

小结

Webpack 将来都通过 webpack.config.js 文件进行配置,来增强 Webpack 的功能

举报

相关推荐

0 条评论