webpack4.X创建工程
2019-08-20 本文已影响0人
pawn_c
webpack4.x总结见这里
这里只是讲述如何创建工程。
第一步
创建工程文件夹后在文件夹里初始化
npm init -y
创建完成后在目录里面出现package.json
第二步
创建产品目录dist与源代码目录src两个文件夹
image.png
第三步
在src下创建index.js文件
console.log("hello pawn");
创建index.html页面并编辑内容
<html>
<head>
<title>learn</title>
</head>
<body>
<p>webpack4.xLearn</p>
</body>
第四步
如果没有安装webpack就安装webpack
cnpm install webpack --save-dev
第五步
创建webpack配置文件webpack.config.js
module.exports = {}
第六步
在项目文件夹下输入命令
webpack
打包完成后可以在dist文件夹下生成的main.js
image.png
第七步
在src文件夹下的index里引入
<html>
<head>
<title>learn</title>
<script src ="../dist/main.js"></script>
</head>
<body>
<p>webpack4.xLearn</p>
</body>
最后在浏览器中打开
image.png
注意
webpack4.x提供了约定大于配置的概念：目的是为了尽量减少配置文件的体积；
默认约定了：
- 打包的入口是src ->index.js
- 打包的输入文件是 dist -> main.js
