1污筷、現(xiàn)在本地創(chuàng)建項(xiàng)目目錄
2、然后在index.html中寫(xiě)入html的結(jié)構(gòu)
3音诫、想要先安裝jquery纽竣，先npm init -y一下蜓氨，npm install jquery -S【項(xiàng)目目錄安裝穴吹，必須是小寫(xiě)的jquery港令，否則會(huì)報(bào)錯(cuò)】顷霹，在index.html引入main.js
4击吱、在main.js中寫(xiě)入內(nèi)容如下：
import $ from 'jquery'; //ES6新語(yǔ)法覆醇，瀏覽器不支持
$('li:odd').css('backgroundColor','red');
$('li:even').css('backgroundColor',{
return '#' + 'D97634'
})
使用webpack處理一下，轉(zhuǎn)換成瀏覽器可以識(shí)別的文件：
a: 先全局安裝一下webpack=>npm install webpack@3.5.5 -g
b: 在終端中執(zhí)行：webpack ./src/main.js【要處理的文件的目錄】 ./dist/bundle.js【要輸出的文件的目錄以及文件名】鞋仍，會(huì)在dist中生成一個(gè)bundle.js文件威创，然后在index.html中引入的main.js文件改成 bundle.js
這樣的話每次打包時(shí)候都需要執(zhí)行 webpack ./src/main.js ./dist/bundle.js
c: 為了不手動(dòng)指定入口和出口文件那婉，在項(xiàng)目根目錄中新建一個(gè)webpack.config.js（基于node的，所以** **node.js的命令都可以識(shí)別）
const path = require('path');
//通過(guò)node中的模塊操作寞奸，向外暴露一個(gè)配置對(duì)象
module.exports = {
entry: path.join(__dirname,'./src/main.js'), //入口文件枪萄，表示webpack要打包哪個(gè)文件
output: { //輸出文件相關(guān)的配置
path: path.join(__dirname,'./dist'), //指定打包好的文件瓷翻，輸出的哪個(gè)目錄去
filename: 'bundle.js' //輸出文件名
}
}
這樣的話齐帚，就可以在終端中直接執(zhí)行命令：webpack就可以直接打包了对妄，但是還有個(gè)小問(wèn)題剪菱。就是它不 會(huì)自動(dòng)更新孝常，需要手動(dòng)刷新一下构灸。下面我們就來(lái)解決這個(gè)問(wèn)題冻押。來(lái)配置webpack-dev-server
4洛巢、使用webpack-dev-server實(shí)現(xiàn)自動(dòng)打包編譯
直接安裝webpack最高版本的時(shí)候锹锰，可能會(huì)遇到報(bào)錯(cuò)的情況恃慧，如果對(duì)于版本沒(méi)有要求的話渺蒿，可以降低版本：
npm install webpack@3.5.5 -D 如果還會(huì)有報(bào)錯(cuò)出現(xiàn)的話茂装，可以試試使用cnpm安裝
需要先在終端中安裝webpack-dev-server：具體操作如下：
4.1 npm/cnpm install webpack-dev-server -D出現(xiàn)下面的提示：【其實(shí)此步驟容易出現(xiàn)報(bào)錯(cuò)少态，所以呢彼妻，把webpack-dev-server版本修改為@2.9.1=>webpack-dev-server@2.9.1時(shí)侨歉，就不會(huì)報(bào)錯(cuò)】
4.2 npm/cnpm install webpack -D【此步驟也是容易出錯(cuò)的，所以安裝的時(shí)候要和上邊的版本保持一致颊艳，webpack@3.5.5版本】
4.3 需要在package.json中配置dev
最后直接執(zhí)行：npm run dev運(yùn)行成功白修，但是需要注意的是此時(shí)打包成的bundle.js文件不是磁盤(pán)中存在bundle.js文件，而是一個(gè)與src dist node_module同級(jí)的看不見(jiàn)的文件祖很，在index.html引入的路徑也要修改以下=》<script src="/bunlde.js"></script>
此時(shí)假颇，正常打包笨鸡，但是不自動(dòng)打開(kāi)瀏覽器
發(fā)布出來(lái)形耗，方便自己查看激涤，有什么不對(duì)的地方倦踢，希望留言糾正修改。（程序員菜鳥(niǎo)一枚）
