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]表示任意文件名
    }
}
相关推荐
梅孔立2 分钟前
服务器不支持node.js16以上版本安装?用Docker轻松部署Node.js 20+环境运行Strapi项目
服务器·docker·node.js
wordbaby3 分钟前
一行看懂高阶函数:用 handleConfirm 拿下 DatePicker 回调
前端·react.js
XiaoMu_0014 分钟前
基于Node.js和Three.js的3D模型网页预览器
javascript·3d·node.js
卿·静10 分钟前
Node.js对接即梦AI实现“千军万马”视频
前端·javascript·人工智能·后端·node.js
Mintopia23 分钟前
🚀 Next.js 全栈 Web Vitals 监测与 Lighthouse 分析
前端·javascript·全栈
Mintopia26 分钟前
🤖 AIGC + CMS:内容管理系统智能化的核心技术支撑
前端·javascript·aigc
lvlv_feifei27 分钟前
N8N macOS (Apple Silicon) 完整安装配置教程
node.js·workflow
HelloGitHub29 分钟前
这款开源调研系统越来越“懂事”了
前端·开源·github
whysqwhw32 分钟前
hippy的主要原理
前端
子兮曰34 分钟前
🚀95%的前端开发者都踩过坑:JavaScript循环全解析,从基础到高阶异步迭代
前端·javascript·性能优化