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
結果：
點擊前
點擊後
自此就入門完成，我是個菜鳥，花了一個下午才搞定入門。