Webpack的5大核心概念

1、entry（入口）

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

        

module.exports = {
  entry: "./src/main.js",//相对路径或者绝对路径
  output: {},
  module: {},
  plugins: [],
  mode: "development",
};

2、output（输出）

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

        

const path = require("path");//node的核心模块
module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),//当前目录，使用绝对路径
    filename: "main.js",
  },
  module: {},
  plugins: [],
  mode: "development",
};

3、loader（加载器）

        Webpack本身只能处理JS、JSON等资源，其他资源需要借助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"],
      },
    ],
  },
  plugins: [],
  mode: "development",
};

4、plugins（插件）

        扩展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"],
      },
    ],
  },
  plugins: [
    new ESLintWebpackPlugin({
      // 指定检查文件的根目录
      context: path.resolve(__dirname, "src"),
    }),
 ],
  mode: "development",
};

5、mode（模式）

        主要有两种模式：

        开发模式（development）：编译代码，使浏览器能够识别运行，代码质量检查，让代码更加健壮。

        生产模式（production）：优化代码运行性能，优化代码打包速度