webpack 4.28.4 安装使用 mac系统_mac安装webpack4局部安装-优快云博客

本文详细介绍了一种高效的方法来全局安装Webpack及其CLI，并通过实际案例演示了如何配置Webpack进行项目打包。从创建项目文件夹到编写配置文件，每一步都提供了具体的指令和代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

真是折腾老半天，以下是个人总结，以便看到的朋友们把节约下来的时间能放松一下！?
1.别管三七二十一（我就是局部安装弄老半天没打包出来，而且各种错误,一下安装命令要一摸一样写，不然后面会报错），上来就全局安装webpack 以及 webpack-cli
安装命令

sudo npm install webpack -g
sudo npm install webpack-cli -g

安装好后使用webpack -v 和 webpack-cli -v查看版本（我的4.28.4/3.2.1）
2.新建一个文件夹（名字千万不要是webpack，比如名字叫testwebpack）
里面再创建一个src文件夹里面写一个index.js
在testwebpack文件夹下写一个hello.html
如图所示
在这里插入图片描述
index.js里面内容例如

function hello(str) { alert(str); } hello('hello webpack');

hello.htm里面内容

 <script src="./dist/bundle.js"></script>

3.我在是在visual studio code终端运行npm init -y(生成一个package.json文件)
4.再局部安装webpack和webpack-cli
安装命令

sudo npm install webpack --save-dev
sudo npm install webpack-cli --save-dev

5.最后写webpack.config.js内容 (文件写在testwebpack下面)

 var path = require(”path") module.exports = { entry:"./src/index.js", output:{ path:path.join(__dirname,"./dist"), filename:"bundle.js" } }

大功告成在终端输入webpack就可以look啦！
如果没成功自己可以对照一下文件夹及内容
在这里插入图片描述
最后来一张大功告成的图片?