基础教程
首先要保证装了nodejs和npm
第一步:创建文件夹,命名为demo
第二步:win+R,输入cmd,进入命令行窗口,
第三步:进入demo的文件目录下,首先输入d:
进入D盘;再输入cd /GW/demo
进入demo
第四步:npm init
,初始化项目,demo文件夹下会出现一个package.json文件第五步:安装webpack4和webpack-cli
命令行输入npm install webpack --save-dev
和npm install webpack-cli --save-dev
安装完成后demo文件夹目录结构如下:
第六步:demo文件夹下新建文件index.html和webpack.config.js(webpack配置文件),以及新建文件夹src和app,如下:
第七步:webpack.config.js输入如下:
const path = require("path");
module.exports ={
mode:"development",
devtool:"source-map",
entry:{
app:path.resolve(__dirname,"src/index.js"),
},
output:{
path:path.resolve(__dirname,"app"),
filename:'[name].bundle.js'
},
module:{
rules:[]
}
}
其中,entry代表入口文件,“src/index.js”为入口文件。output规定打包后输出文件,app为输出文件存放目录,“[name].bundle.js”代表输出文件名
第八步:demo/src目录下创建index.js文件,index.js写入如下代码行:
document.getElementById("root").innerHTML = "hello";
index.html中编写如下:
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="root"></div>
<script src="./app/app.bundle.js"></script>
</body>
</html>
package.json中"scripts"添加"build":“webpack”,整体如下
第九步:命令行输入npm run build
运行完成后可见demo/app文件夹下会出现app.bundle.js文件,此时打包成功,打开index.html会出现如下: