小白入门（webpack基本配置）

这篇文章承接上篇 小白入门（webpack基本使用）

1.前言

从上篇文章我们学习到基本的五大核心概念，那他是怎么用的呢？往下看

还记得上篇的打包入口文件吗，我们是不是要在终端里下面这句话

PS D:\webpack-demo> npx webpack ./src/main.js --mode=development

 为了方便更改，我们今天要学的是如何写配置文件

2.操作

我们需要在根目录下创建一个名webpack.config.js的配置文件，切记！配置文件必须放在根目录并且文件名必须正确

接下来输入以下代码，看看注释以便理解

const path=require("path");//node.js核心模块，专门用来处理路径问题
module.exports={
    // 选择入口文件
    entry:"./src/main.js",//相对路径，打包src中main.js文件为入口文件
    // 输出
    output:{
        //文件输出路径
        //__dirname node.js的变量，代表当前文件的文件夹目录
        path:path.resolve(__dirname,"dist"),//绝对路径，在目录里创建或指向dist文件夹，把打包好的main.js入口文件放入
        //打包后的文件的文件名
        filename:'main.js' //叫什么都行
    },
    // 加载器
    module:{
        rules:[
            //loader的配置
        ]
    },
    // 插件
    plugins:[
        //plugin的配置
    ],
    // 模式，开发者模式
    mode:"development"
}

接再来，我们打包文件就可以只用在终端输入一条语句，他会自动在指向路径中找到webpack的配置文件

PS D:\webpack-demo> npx webpack

运行后的效果，跟我们之前打包入口文件进行打包方法一样,打包src中main.js文件为入口文件

到这里就结束了，我会持续更新！