webpack入门
1、安装node.js
点击进入官网下载最新版本的node.js
按照安装指引安装即可。
可以cmd，输入node验证成功与否
2、安装webpack
cmd，输入如下指令，-g表示全局安装
npm install webpack -g
完成后再输入，安装打包工具
npm install webpack-cli –g
验证：
3、使用
VS下写好HTML文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../dist/bundle.js"></script><!--这行代码后面生成bundle.js再写入-->
</head>
<body>
<p>点击我，我将变成红色！</p>
</body>
</html>
在终端下面输入如下代码初始化，生成package.json
npm init -y
安装jq到项目,生成package-lock.json和node_modules文件夹
npm i jquery -s
编写main.js
import $ from 'jquery'
$(document).ready(function(){
$("p").click(function(){
$(this).css('color','red');
});
});
在项目的目录下编写webpack.config.js
const path = require('path')
module.exports = {
entry:path.join(__dirname,'./src/main.js'),//输入目录
output:{
path:path.join(__dirname,'./dist'),//输出目录
filename:'bundle.js' //文件名，对应HTML的js文件
},
mode: 'development'
}
终端输入webpack
结果：
点击前
点击后
自此就入门完成，我是个菜鸟，花了一个下午才搞定入门。