webpack-5项核心概念的配置

在项目的根目录下创建webpack.config.js文件

webpack5项核心概念的配置

// 在nodejs中处理绝对路径需要使用path模块中的resolve，resolve是用来拼接绝对路径的方法
const { resolve } = require('path')
module.exports = {
    // 入口文件
    entry: './src/index.js',
    output: {
        // 输出文件名
        filename: 'built.js',
        // 输出文件路径-写路径是要写绝对路径
        // __dirname是nodejs的变量，代表当前文件的目录绝对路径，在这里当前文件指的就是webpack.config.js
        // 第二个参数，当前路径下的哪个文件中，这里指的就是打包后的资源输出到当前路径下的build文件夹中
        //连上上面的filename，就是打包资源输出到当前文件路径下的build文件夹中的built.js文件中
        path: resolve(__dirname, 'build')
    },
    // loader的配置
    module: {
        rules: [
            // 在rules中写详细的loader配置
        ]
    },
    // 插件
    plugins: [
        // 详细的plugins配置
    ],
    // 模式:开发环境development 生产环境：production
    mode: 'development',
}