1、新建项目:webpackDemo
2、安装
在本地安装webpack
npm install webpack --save --dev
接着安装webpack-cli
npm install webpack-cli --save --dev
此时webpackDemo项目中有依赖文件夹
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 文件
接下来,我们将main.js 文件打包,并在index.html 中使用打包后的文件
webpack {entry file/入口文件} {destination for bundled file/存放打包文件的地方}
运行webpack ./src/main.js ./html/bundle
可以看到,此时运行出现一个警告和一个报错,警告是因为webpack打包的时候分为运行模式和测试模式,此时我们需要指定一个模式,所以要在命令后面加上 --mode development
webpack ./src/main.js ./html/bundle --mode development
运行结果如下:
此时依旧报错,但是可以看到,模式设置的问题已经解决了。在网上查到,此时这种错误是由于版本过高引起的。解决方法添加 -o
webpack ./src/main.js -o ./html/bundle --mode development
打包成功!
最后在index.html中添加打包后js的引用
<script src="bundle/main.js"></script>
运行结果如下:
大功告成~
最后提一下在此过程中,还发现有两个问题:
打包命令:webpack ./src/main.js -o ./html/bundle --mode development中
第一:文件入口和出口的地址问题,不晓得为什么要加上./
第二:出口指定的是文件夹,无法指定文件名称
希望有大佬帮忙解释和解决~