安裝
1,安裝node.js? ?（地址：?https://nodejs.org/en/download/）同普通軟件安裝即可
終端上輸入：node -v 、 npm -v即可查看當(dāng)前安裝版本
2，mac 下安裝webpack直接使用npm install -g webpack 報(bào)錯(cuò)，解決方式：
????sudo npm install webpack -g --unsafe-perm=true --allow-root
3,安裝完webpack ，運(yùn)行webpack -v會提示你安裝webpack-cli ,命令
sudo npm install webpack-cli? -g --unsafe-perm=true --allow-root
4，輸入webpack-cli 會直接輸出版本號，安裝成功
安裝cnpm:(可選)
sudo npm i -g cnpm --registry=https://registry.npm.taobao.org? --unsafe-perm=true --allow-root
項(xiàng)目中使用：
1，初始化生成package.json文件
npm init -y
2,安裝webpack到該目錄：?
npm install --save-dev webpack?
npm install --save-dev webpack-cli
3，使用webpack 編譯
????4.0之后命令是：webpack ./src/app.js? --output-filename? bundle.js --output-path ./build
4，配置文件，使用webpack直接編譯
webpack 配置文件在根目錄下，名稱為webpack.config.js
//配置文件
//執(zhí)行webpack執(zhí)行步驟
/**
* 1，首先webpack 發(fā)現(xiàn)，我們并沒有通過的命令的形式給她指定入口和出口
* 2，webpack就會去項(xiàng)目的根目錄中，查找一個(gè)叫做? webpack.config.js的配置文件
* 3，當(dāng)找到配置文件后，webpack會解析執(zhí)行這個(gè)配置文件，當(dāng)解析完配置文件后，就得到了配置文件的配置對象
* 4，當(dāng)webpack拿到配置文件之后，就拿到了配置對象中指定的入口和出口，然后進(jìn)行打包構(gòu)建
*/
5，使用webpack-dev-server實(shí)現(xiàn)自動(dòng)打包功能
安裝：npm install webpack-dev-server -D
使用配置：在package.json中添加配置
運(yùn)行命令：npm? run? dev
刪除掉本地的bundle文件，使用根路徑的bundle
更改js文件之后，保存不需要刷新瀏覽器直接可以看到現(xiàn)象。
（在文件目錄中看不到bundle.js文件，直接托管到了電腦的內(nèi)存中，速度更快，可以認(rèn)為與src dist 在同一級目錄）
6，webpack-dev-server常用參數(shù)
webpack-dev-server --open? 自動(dòng)打開瀏覽器
webpack-dev-server --port 3000 設(shè)置端口
webpack-dev-server --contentBase? src? 打開主頁
webpack-dev-server --hot? 頁面無刷新重載
第一種方式：在package.json中更新配置：
webpack-dev-server --open --port 3000 --contentBase src? --hot
第二種方式：在webpack.config.js中配置：
const webpack =require('webpack')//啟動(dòng)熱更新，第2步
7，html-webpack-plugin插件使用
作用：1，自動(dòng)根據(jù)指定模版頁面在內(nèi)存中生成一個(gè)頁面 2，自動(dòng)把打包好的bundle.js追加到頁面中
安裝：npm i??html-webpack-plugin -D
使用：在webpack.config.js中配置
const htmlWebpackPlugin =require('html-webpack-plugin')
（使用此種方式可以將頁面中引入的bundle.js文件刪除，會自動(dòng)將該文件追加到頁面）
8，loader使用
情景：頁面中引入css會發(fā)起二次請求，不推薦。在js文件使用import '../css/index.css' 導(dǎo)入css文件，webpack編譯會報(bào)錯(cuò)，它默認(rèn)只能打包處理js文件，不能處理其他文件。如果處理其他類型文件，需要安裝loader加載器
安裝：npm i? style-loader css-loader -D
使用：在webpack.config.js文件中進(jìn)行配置
webpack loader的處理過程
less-loader，scss-loader使用
url-loader使用
安裝：npm i? url-loader file-loader -D
配置：在webpack.config.js中的moudle-rules添加
????????{test:/\.(jpg|png|bmp|jpeg)$/, use:'url-loader'}
傳遞參數(shù)：{test:/\.(jpg|png|bmp|jpeg)$/, use:'url-loader?{limit:1000}'}//限制是否轉(zhuǎn)換為base64字符串
處理字體文件的處理:
{test:/\.ttf|eot$/,use:'url-loader' }
9，babel使用
情景：webpack 只能處理部分的ES6新語法，對于處理不了的語言結(jié)構(gòu)需要借助loader把新語法轉(zhuǎn)換成舊語法然后交給webpack進(jìn)行打包處理
安裝：第一套包：cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
? ? ? ? ?第二套包：cnpm i babel-preset-env babel-preset-stage-0 -D
配置：
在項(xiàng)目跟目錄新建.babelrc文件，配置如下：
然后重新啟動(dòng)項(xiàng)目即可正常顯示。
webpack.config.js配置文件：
