在安裝webpack前，需要本地環(huán)境支持node.js

簡(jiǎn)介：

? ??????????????webpack?是一個(gè)現(xiàn)代 JavaScript 應(yīng)用程序的靜態(tài)模塊打包器(module bundler)荤堪。當(dāng) webpack 處理應(yīng)用程序時(shí)合陵，它會(huì)遞歸地構(gòu)建一個(gè)依賴關(guān)系圖(dependency graph)，其中包含應(yīng)用程序需要的每個(gè)模塊澄阳，然后將所有這些模塊打包成一個(gè)或多個(gè)?bundle拥知，它能把各種資源，例如J (含J X)碎赢、 coffee低剔、樣式(less/sass)、圖片等都作為模塊來(lái)使用和處理肮塞。

準(zhǔn)備工作：

? ? ? ? ? ? ? ? ? 1.安裝node.js? (https://nodejs.org/en/? ? ?8.11.1版本?)? ? ? ? 安裝完成之后襟齿，就自動(dòng)生成npm(包管理器)? ?

? ? ? ? ? ? ? ? ? 2. node? -v (測(cè)試node的版本號(hào)) ， npm? -v(測(cè)試npm的版本號(hào))? -----這么做的目的是為了測(cè)試node環(huán)境有沒(méi)有搭建完成

? ? ? ? ? ? ? ? ? 3.安裝cnpm（類似于npm）

? ? ? ? ? ? ? ? ? ? ? ? 3.1 優(yōu)勢(shì)：它的服務(wù)器是在中國(guó)枕赵，運(yùn)行速度會(huì)比較快

? ? ? ? ? ? ? ? ? ? ? ? 2.1? 地址：https://npm.taobao.org/?

? ? ? ? ? ? ? ? ? ? ? ? 2.2 在終端執(zhí)行：?sudo npm install -g cnpm --registry=https://registry.npm.taobao.org

正式開(kāi)始：

? ? ? ? ? ? 1. 創(chuàng)建文件目錄：myproject ,在myproject里面創(chuàng)建三個(gè)子文件夾build? src? public 猜欺，和webpak.gonfig.js文件，build里面是打包后的文件拷窜，src是自己創(chuàng)建的源文件（初始化的src文件夾里有index.html,main.js,modulea.js文件）开皿，public是調(diào)試文件涧黄。

? ? ? ? ? ? 2.安裝webpack環(huán)境：sudo cnpm install webpack -g (sudo? 是為了防止權(quán)限問(wèn)題， -g? 全局安裝赋荆，是因?yàn)榭赡芎芏嗟胤蕉家玫?笋妥。

? ? ? ? ? ? 3.安裝打包工具webpack-cli： sudo cnpm install webpack-cli -g。

? ? ? ? ? ? 4.cd + myproject的文件目錄窄潭，進(jìn)入到需要打包的項(xiàng)目春宣。

? ? ? ? ? ? 5.執(zhí)行webpack命令，在build文件夾里就會(huì)自動(dòng)生成bundle.js文件嫉你。

? ? ? ? ? ? 6.安裝package.json文件：先 （cd + 文件夾路徑? ）進(jìn)入文件夾月帝， sudo cnpm init? ?,(一直按回車(chē)就行，完成后均抽，文件夾里會(huì)出現(xiàn)package.json文件)嫁赏。

????????????????（package.json 這是一個(gè)標(biāo)準(zhǔn)的npm說(shuō)明文件，里面蘊(yùn)含了豐富的信息油挥，包括當(dāng)前項(xiàng)目的依賴模塊潦蝇，自定義的腳本任務(wù)等等）

? ? ? ? ? ? 7.創(chuàng)建本地服務(wù)器：sudo cnpm install? --save-dev? webpack-dev-sever? -g

? ? ? ? ? ? 8.配置webpack.config.js? 見(jiàn)下圖

? ? ? ? 9.在package.json文件里配置："build":"webpack","start":"webpack-dev-server --open"

? ? 10.在public文件夾里面創(chuàng)建一個(gè)index.html文件，里面引入<script src="bundle.js"></script>

? ? 11.在終端輸入:npm start 就可以彈出locahost:xxxx（xxxx是端口號(hào)）的調(diào)試頁(yè)面

? ? 12.引入css文件深寥，（webpack只能識(shí)別js）

? ? ? ? ? ?安裝依賴 ：sudo cnpm install style-loader css-loader --save

? ? ? ? ? ? （? ??

????????????????????1.在src文件夾下創(chuàng)建css文件攘乒，

? ? ? ? ? ? ? ? ? ? 2.在main.js中引入css 文件??require("./mycss.css");

????????????????）

? ? ? ? ? ? webpack.config.js文件配置

13，加入css之后,可以實(shí)現(xiàn)最終的效果惋鹅。