1.先安裝nodeJS
命令：官網下載後傻瓜式安裝即可
安裝完成後在任意控制檯執行： node -v，出現版本號說明安裝成功，接着執行npm -v也會出現版本號
2.初始化項目
在項目根目錄執行命令npm init -y初始化項目，會在根目錄出現package.json文件，順便把在根目錄加上dist和src兩個文件夾
3.安裝webpack
我們一般局部安裝來避免各個項目webpack版本衝突
npm i webpack webpack-cli -D
命令意思：安裝webpack（不寫版本號默認最新，要版本號後面加上@x.x，如[email protected]）和webpack-cli，-D=–save-dev意思是在局部、開發環境安裝；之後我們在根目錄新建一個webpack.config.js文件，在dist下創建一個index.html,在src下創建一個index.js，建好的目錄是這個樣子：
然後把後面用到的東西安裝一下：style-loader 和 css-loader 以及jquery
npm i style-loader css-loader --save-dev
npm i jquery -D
我們在index.html和index.js下隨便寫點什麼
我的index.html就寫了個標題<h1 class="box">hole world!</h1>，
index.html:
<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1 class="box">hole world!</h1>
//打包之後js放在body裏
//<script src="./bundle.js"></script>
</body>
</html>
我的js就隨便打印點什麼。
index.js:
//引入css和jquery
import './css/index.css';
import $ from 'jquery';
var list=[1,2,5,6,23,4,8,6,3,458,6];
$.each(list,function (index,item) {
console.log(index+':'+item);
});
index.css:
.box{
background-color: skyblue;
}
ps:沒打包的時候我們引用資源是<link rel="stylesheet" href="xxx">和<script src="xxx"></script>有多少引用就寫多少,但是用webpack的話，我們就遵循webpack的規則來，下面開始打包。
4.打包
打包之前寫一下配置文件webpack.config.js
//引入路徑處理模塊
const path = require('path');
module.exports = {
//入口（我們的js進webpack）
entry: ['./src/index.js'],
mode: "development",//開發環境
//出口（webpack打包之後給我們的js）
output: {
filename: "bundle.js",
//輸出到當前路徑下的‘dist’目錄下
path: path.resolve(__dirname, 'dist')
},
module: {
//加載css時遵循這些規則
rules: [
{
//匹配css文件的正則
test: /\.css$/,
//用哪些loader來加載（使用順序從右往左）
use: [
'style-loader', 'css-loader'
]
}
]
}
};
之後執行命令：npx webpack打包，npx:可執行文件（即執行bin目錄下的webpack），打包成功後我們就看到bundle.js文件了
然後去index.html裏把<script src="./bundle.js"></script>註釋放開，跑一下index.html看看有沒有報錯
