1、新建项目：webpackDemo
image.png
2、安装
在本地安装webpack
npm install webpack --save --dev
接着安装webpack-cli
npm install webpack-cli --save --dev
此时webpackDemo项目中有依赖文件夹
image.png
3、新建文件
新建文件夹html，包含文件index.html
<html>
<head>
</head>
<body>
<div id="root">
<h1>
hello,webpack</h1>
</div>
</body>
</html>
新建文件夹src，包含文件main.js 以及greeter.js
main.js:
var greeter = require('./Greeter.js');
document.getElementById('root').appendChild(greeter());
greeter.js
module.exports = function() {
var greet = document.createElement('div');
greet.textContent = "Hi ,this is my webpack demo1!";
return greet;
};
4、运行
运行 npm init -y 生成package.json 文件
image.png
接下来，我们将main.js 文件打包，并在index.html 中使用打包后的文件
webpack {entry file/入口文件} {destination for bundled file/存放打包文件的地方}
运行webpack ./src/main.js ./html/bundle
image.png
可以看到，此时运行出现一个警告和一个报错，警告是因为webpack打包的时候分为运行模式和测试模式，此时我们需要指定一个模式，所以要在命令后面加上 --mode development
webpack ./src/main.js ./html/bundle --mode development
运行结果如下：
image.png
此时依旧报错，但是可以看到，模式设置的问题已经解决了。在网上查到，此时这种错误是由于版本过高引起的。解决方法添加 -o
webpack ./src/main.js -o ./html/bundle --mode development
image.png
打包成功！
最后在index.html中添加打包后js的引用
<script src="bundle/main.js"></script>
运行结果如下：
image.png
大功告成~
最后提一下在此过程中，还发现有两个问题：
打包命令：webpack ./src/main.js -o ./html/bundle --mode development中
第一：文件入口和出口的地址问题，不晓得为什么要加上./
第二：出口指定的是文件夹，无法指定文件名称
希望有大佬帮忙解释和解决~
网友评论