1.創(chuàng)建一個(gè)文件夾（名字可隨意，我的是webpack），里面是再創(chuàng)建一個(gè)叫src的文件夾，src文件夾創(chuàng)建 css,js,image三個(gè)文件夾及index.html和main.js。如圖：
2.index.html和main.js的內(nèi)容
js文件里有一句 import $ from ‘jQuery’ 。它的意思是引入jQuery，下面我們來(lái)引入jQuery：
打開(kāi)PHPstorm的控制臺(tái)（我用的是PHPstorm，webstorm也可以）輸入一下命令安裝 cnpm i jquery
然后敲回車(chē) ，安裝好了后會(huì)發(fā)現(xiàn)項(xiàng)目文件夾多了node_modules文件夾，下載好的jQuery就在里面
這回都準(zhǔn)備好了，我們看一下頁(yè)面是否應(yīng)用到了我們?cè)趍ain.js定義的樣式
結(jié)果并沒(méi)有我們相象的效果，而且報(bào)了一個(gè)錯(cuò)說(shuō)是語(yǔ)法錯(cuò)誤，原來(lái)import $ from ‘jQuery是es6的語(yǔ)法，現(xiàn)在瀏覽器并不支持，解決辦法如下。
3.項(xiàng)目初始化一下 npm init -y
回車(chē)后看到項(xiàng)目文件夾多了一個(gè)package.json。先不管他是干啥用的，我們下一步：
命令行我們把main.js編譯成我們現(xiàn)在能用的版本：webpack ./src/main.js ?./dist/bundle.js
敲回車(chē)，報(bào)錯(cuò)了，編譯失敗
繼續(xù)我們的解決辦法:
更換打包命令為: webpack ./src/main.js -o ./dist/bundle.js 。繼續(xù)敲回車(chē)發(fā)現(xiàn)紅色錯(cuò)誤沒(méi)有了，但是黃色警告還在。這時(shí)看項(xiàng)目文件夾已經(jīng)多了一個(gè)dist文件，而且里面也有了一個(gè)bundle.js的編譯文件。
有黃色警告肯定還是不行啊，我們來(lái)繼續(xù)解決：
4.package.json配置
接下來(lái)，找到package.json.添加上”dev”和”build”這兩個(gè)信息以及他們的值：
? “scripts”: {
??? “test”: “echo \”Error: no test specified\” && exit 1”,
???"dev":"webpack --mode development",
??? "bulid":"webapck --mode production"
? }
5.全局安裝webpack-cli
npm i --save-dev webpack-cli -g
然后命令行輸入命令? npm run dev，敲回車(chē)后又是一堆錯(cuò) 他媽的！
沒(méi)辦法，繼續(xù)解決唄！
src文件夾再建一個(gè)js文件，叫index.js（里面什么都不用寫(xiě)）。然后繼續(xù)上一步npm run dev 回車(chē)。
這回終于不報(bào)錯(cuò)了，而且dist文件夾也多了個(gè)main.js。我們先別管它干什么的。
這回用下面命令，重新編譯 webpack ./src/main.js -o ./dist/bundle.js --mode development
這回打開(kāi)頁(yè)面看看有沒(méi)有變化:
? ? ? ? 草他媽?zhuān)∵€是沒(méi)變！
傻呀你！既然都編譯好了能用的bundle.js，那你還引用main.js尼瑪呢！煞筆！
以后main.js有啥變動(dòng) 直接webpack ./src/main.js -o ./dist/bundle.js --mode development編譯就行了！
6.不覺(jué)得每次都得寫(xiě)那么多東西編譯，很麻煩嗎？我們來(lái)繼續(xù)優(yōu)化一下
項(xiàng)目根目錄新建一個(gè)webpack.config.js
來(lái)，打開(kāi)這個(gè)文件 ，我們來(lái)寫(xiě)一些東西：
const path=require('path');
module.exports={
entry:path.join(__dirname,'./src/main.js'),
? ? output: {
path:path.join(__dirname, './dist'),
? ? ? ? filename:'bundle.js'
? ? },
? ? mode:'development'
}
然后重新 npm run dev 回車(chē)（類(lèi)似于刷新作用，配置文件有改動(dòng)都要這樣做一下）
以后編譯 直接輸入webpack就行了！
