Webpack5新手入门简单配置

1.初始化项目

yarn init -y

2.安装依赖

yarn add -D webpack@5.75.0 webpack-cli@5.0.0

3.新建index.js

说明:写入下面的一句话

javascript 复制代码
console.log("hello webpack");

4.执行命令

说明:如果没有安装webpack脚手架就不能执行yarn webpack(webpack-cli)

yarn webpack

5. 打包后生成dist文件夹

6.修改package.json

说明:为yarn webpack起别名

javascript 复制代码
{
  "devDependencies": {
    "webpack": "5.75.0",
    "webpack-cli": "5.0.0"
  },
  "scripts": {
    "build":"webpack"

  }
}

7.打包

yarn build

8.新建webpack.config.js

说明:注释写在了代码里面了

javascript 复制代码
const path=require("path")
module.exports={
    mode:"production" , //设置打包模式,生产模式也就是项目上线配置,development模式是开发着模式
    entry:"./src/index.js",   //入口文件  默认 ./src/index.js,多个打包文件用数组包裹,也可以对象写(可以指定打包后的文件)
    output:{
        // 配置打包后的地址
        path:path.resolve(__dirname,"dist"), // __dirname表示表示当前模块文件夹的路径  必须要绝对路径
        filename:"main.js" ,  //打包后文件名
        clear:true,   //自动清理打包目录  filename: '[name].js', [name]表示任意文件名
    }
}
相关推荐
IT_陈寒3 分钟前
Java并发编程避坑指南:7个常见陷阱与性能提升30%的解决方案
前端·人工智能·后端
HBR666_17 分钟前
AI编辑器(FIM补全,AI扩写)简介
前端·ai·编辑器·fim·tiptap
牧码岛21 分钟前
服务端之NestJS接口响应message编写规范详解、写给前后端都舒服的接口、API提示信息标准化
服务器·后端·node.js·nestjs
excel22 分钟前
一文读懂 Vue 组件间通信机制(含 Vue2 / Vue3 区别)
前端·javascript·vue.js
JarvanMo26 分钟前
Flutter 应用生命周期:使用 AppLifecycleListener 阻止应用崩溃
前端
我的xiaodoujiao1 小时前
从 0 到 1 搭建 Python 语言 Web UI自动化测试学习系列 9--基础知识 5--常用函数 3
前端·python·测试工具·ui
李鸿耀3 小时前
Flex 布局下文字省略不生效?原因其实很简单
前端
皮蛋瘦肉粥_1214 小时前
pink老师html5+css3day06
前端·css3·html5
华仔啊9 小时前
前端必看!12个JS神级简写技巧,代码效率直接飙升80%,告别加班!
前端·javascript
excel9 小时前
dep.ts 逐行解读
前端·javascript·vue.js