Webpack打包简单的js文件

初始化一个新的npm

步骤一:

初始化npm项目,创建一个package.json文件

npm init -y
步骤二:

添加打包脚本:在scripts部分添加一个命令来运行webpack

"scripts": {
    "build": "webpack --config webpack.config.js"
  },
步骤三:

安装Webpack

npm install --save-dev webpack webpack-cli
步骤四:

创建一个简单的Javascript文件,比如src/index.js

console.log('Hello,Webpack!');
步骤五:

配置Webpack,创建一个名为webpack.config.js的文件

const path = require('path');   // 《引入path模块》如 join()、basename()、dirname()、extname() 等,
​
module.exports = {
  mode: 'development',  // 设置模式为开发模式,可以设置为 'production' 以启用压缩等优化
  entry: './src/index.js',  // 设置入口文件为 './src/index.js'
  output: {     //设置输出目录为 path.resolve(__dirname, 'dist')
    path: path.resolve(__dirname, 'dist'),  // 输出目录
    filename: 'bundle.js'   // 设置输出文件为 'bundle.js'
  }
};
步骤六:

打包项目:

npm run build
相关推荐
随云6325 分钟前
WebGL编程指南之着色器语言GLSL ES(入门GLSL ES这篇就够了)
前端·webgl
寻找09之夏1 小时前
【Vue3实战】:用导航守卫拦截未保存的编辑,提升用户体验
前端·vue.js
非著名架构师1 小时前
js混淆的方式方法
开发语言·javascript·ecmascript
多多米10052 小时前
初学Vue(2)
前端·javascript·vue.js
敏编程2 小时前
网页前端开发之Javascript入门篇(5/9):函数
开发语言·javascript
柏箱2 小时前
PHP基本语法总结
开发语言·前端·html·php
新缸中之脑2 小时前
Llama 3.2 安卓手机安装教程
前端·人工智能·算法
hmz8562 小时前
最新网课搜题答案查询小程序源码/题库多接口微信小程序源码+自带流量主
前端·微信小程序·小程序
看到请催我学习2 小时前
内存缓存和硬盘缓存
开发语言·前端·javascript·vue.js·缓存·ecmascript
blaizeer3 小时前
深入理解 CSS 浮动(Float):详尽指南
前端·css