webpack的使用和各种文件的配置

webpack的使用和各种文件的配置 2022-08-21 908

首先定义一个js文件名字必须叫这个webpack.config.js 在这个js文件里面写入这个内容

const path=require(path)//找到path包把他赋值给path
module.exports={
    entry:./src/main.js,//入口文件路径
    output:{
        path:path.resolve(__dirname,dist),//dirname是node里面用来获取上下文拼接字符串，动态生成路径
        filename:bundle.js//生成的文件名字
    }
}

require（“path”）可以理解为在node里面寻找path然后把他赋值给path

这些完成后打开终端输入 npm install 这样在列表中就会生成两个json文件然后会根据package.js的依赖帮助在当前的文件夹安装东西 package.json里面包含了这个项目的全部的信息

接下来在终端中输入webpack就会根据webpack.config.js中的指令生成bundle.js 这个时候很容易报错这是因为webpack.config.js在没在我们指定的文件中在哪个终端中输入命令就吧webpack.config.js放在哪个文件中这样就不用敲路径来生成bundle。js文件了直接输入webpack就可以了如果这样在终端输入的命令太多还有一种方法，在package。json中添加几行代码这样之后在终端输入 npm run build 他会去package.json中找到build对应的指令开始执行