webpack基本概念

2023-03-09 71 阅读1分钟

入口（entry）

默认值是"./src/index.js",也可以使用配置文件来指定一个（或多个）不同的入口点

module.exports = {
  entry: './path/to/my/entry/file.js',
};

出口（output）

默认值是"./dist/main.js",默认生成的路径地址是"dist"

const path = require('path');

module.exports = {
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash:8].js',
    clean: true
  },
};

loader

webpack 只能理解 JavaScript 和 JSON 文件
loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效模块

module.exports = {
  module: {
    rules: [{ test: /\.vue$/, use: 'vue-loader' }],
  },
};

在 require()/import 语句中被解析为 '.vue' 的路径时，在对它打包之前，先 use(使用) vue-loader 转换一下。

插件（plugin）

打包优化，资源管理，注入环境变量

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
};

在上面的示例中，html-webpack-plugin 为应用程序生成一个 HTML 文件，并自动将生成的所有 bundle 注入到此文件中

模式（mode）

默认值是"production",可选参数为production，development，none

module.exports = {
  mode: 'production',
};