真是折腾老半天,以下是个人总结,以便看到的朋友们把节约下来的时间能放松一下!?
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啦!
如果没成功自己可以对照一下文件夹及内容
最后来一张大功告成的图片?