在安裝webpack前，需要本地環(huán)境支持node.js
簡介：
? ??????????????webpack?是一個現(xiàn)代 JavaScript 應(yīng)用程序的靜態(tài)模塊打包器(module bundler)。當 webpack 處理應(yīng)用程序時，它會遞歸地構(gòu)建一個依賴關(guān)系圖(dependency graph)，其中包含應(yīng)用程序需要的每個模塊，然后將所有這些模塊打包成一個或多個?bundle，它能把各種資源，例如J (含J X)、 coffee、樣式(less/sass)、圖片等都作為模塊來使用和處理。
準備工作：
? ? ? ? ? ? ? ? ? 1.安裝node.js? (https://nodejs.org/en/? ? ?8.11.1版本?)? ? ? ? 安裝完成之后，就自動生成npm(包管理器)? ?
? ? ? ? ? ? ? ? ? 2. node? -v (測試node的版本號) ， npm? -v(測試npm的版本號)? -----這么做的目的是為了測試node環(huán)境有沒有搭建完成
? ? ? ? ? ? ? ? ? 3.安裝cnpm（類似于npm）
? ? ? ? ? ? ? ? ? ? ? ? 3.1 優(yōu)勢：它的服務(wù)器是在中國，運行速度會比較快
? ? ? ? ? ? ? ? ? ? ? ? 2.1? 地址：https://npm.taobao.org/?
? ? ? ? ? ? ? ? ? ? ? ? 2.2 在終端執(zhí)行：?sudo npm install -g cnpm --registry=https://registry.npm.taobao.org
正式開始：
? ? ? ? ? ? 1. 創(chuàng)建文件目錄：myproject ,在myproject里面創(chuàng)建三個子文件夾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)限問題， -g? 全局安裝，是因為可能很多地方都要用到)。
? ? ? ? ? ? 3.安裝打包工具webpack-cli： sudo cnpm install webpack-cli -g。
? ? ? ? ? ? 4.cd + myproject的文件目錄，進入到需要打包的項目。
? ? ? ? ? ? 5.執(zhí)行webpack命令，在build文件夾里就會自動生成bundle.js文件。
? ? ? ? ? ? 6.安裝package.json文件：先 （cd + 文件夾路徑? ）進入文件夾， sudo cnpm init? ?,(一直按回車就行，完成后，文件夾里會出現(xiàn)package.json文件)。
????????????????（package.json 這是一個標準的npm說明文件，里面蘊含了豐富的信息，包括當前項目的依賴模塊，自定義的腳本任務(wù)等等）
? ? ? ? ? ? 7.創(chuàng)建本地服務(wù)器：sudo cnpm install? --save-dev? webpack-dev-sever? -g
? ? ? ? ? ? 8.配置webpack.config.js? 見下圖
? ? ? ? 9.在package.json文件里配置："build":"webpack","start":"webpack-dev-server --open"
? ? 10.在public文件夾里面創(chuàng)建一個index.html文件，里面引入<script src="bundle.js"></script>
? ? 11.在終端輸入:npm start 就可以彈出locahost:xxxx（xxxx是端口號）的調(diào)試頁面
? ? 12.引入css文件，（webpack只能識別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之后,可以實現(xiàn)最終的效果。
