1、現(xiàn)在本地創(chuàng)建項(xiàng)目目錄
2什湘、然后在index.html中寫入html的結(jié)構(gòu)
3、想要先安裝jquery赎离，先npm init -y一下逛犹，npm install jquery -S【項(xiàng)目目錄安裝，必須是小寫的jquery，否則會(huì)報(bào)錯(cuò)】虽画，在index.html引入main.js
3舞蔽、在main.js中寫入內(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文件不是磁盤中存在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ì)的地方锉屈，希望留言糾正修改。（程序員菜鳥一枚）
