webpack使用場景，基本配置及引數的功能。
新建一個目錄，然後npm init初始化這個專案，安裝webpack ：npm install webpack --save-dev。
webpack打包預設配置檔名：webpack.config.js
官方文件：webpack.github.io/docs/config…
程式碼：module.export = {
entry : './src/script/main.js', //打包入庫從哪個檔案開始
output : { //指明打包後檔案放到什麼位置
path : './dist/js', //打包後的檔案放到這個目錄下
filename: 'bundle.js' //打包後檔案的名字
}
}
webpack指定打包配置檔案 命令webpack --config webpack.dev.config.js
配合npm指令碼給webpack在命令列使用一些引數。
/package.json
然後在命令列執行
npm run webpackwebpack引數介紹
1.entry 打包入口指示，為了應付各種需求，官方給出三種方式來匹配不同需求。
第一種: 輸入簡單string指定一個簡單入口檔案。所有依賴都在這個一個入口檔案指定。
第二種：是一個陣列 ，webpack為了解決兩個平行互相依賴的檔案，卻想打包到一起。
第三種：是一個物件分key和value。多頁面應用程式會運用這個場景。
2.output 打包出口
[name] name佔位符
[hash] 雜湊值
[checkhash] 類似：保證檔案唯一性的雜湊值，比如md5值。只有當檔案發生改變的時候，這個值會改變。
實際開發專案中
1.webpack外掛 html-webpack-plugin
安裝
npm install html-webpack-plugin --save-devvar htmlWepackPlugin = require('html-webapck-plugin') //引用外掛Loader使用
處理專案中的JS
bable-loader轉換ES6程式碼
通過指定Presets來告訴babel loader轉換某一些特性
如果轉換所有特性可以指定latest（es2015,2016,2017）
怎麼指定外掛呢
給loader指定一個引數Query parameters
1.require（'url-loader？'）//？後面跟引數
2.配置檔案中
loaders: [
{
test: /\.js$/,
loader:'babel',
query:{
presets:['lastest'] //指定loader
}
}
]3.還可以在專案根目錄建 .babelrc 配置檔案
{
"presets":["es2015"]}
4.還可以在package.json檔案指定
此時配置檔案已經告訴webpack通過babel-loader 處理js檔案。
module.loaders定義的引數
● test js正則匹配 條件
● exclude loader排除範圍，比如某一個目錄下不讓它處理
● include loader處理的範圍
● loader
● loaders 把一長串的loader通過一個陣列表示
path是Node的一個api，path物件上有一個方法resolv（解析），dirname是執行環境下的變數，也就是在當前執行環境的路徑，後面是相對路徑。
（dirname）當前的目錄，再加個一個相對路徑（api/src），解析完後得到一個絕對路徑
使用babel-loader來讓webpack配置解析es6的js程式碼，轉化成瀏覽器直接執行的js程式碼。
處理專案中的CSS
匹配css的正則條件 ，css-loader和style-loader 用！串聯起來
postcss loader,後處理css
npm install postcss-loader --save-dev //安裝npm install autoprefixer --save-dev postcss的外掛css的loaer是從右至左執行順序
設定postcss屬性，與module同級，返回postcss的loader需要外掛一個列表陣列
如果在css中通過@import這個語法引入其他模組或者css也要使用postcss-loader，希望專案下css檔案通過統一的方式處理，可以使用postcss-loader的一個引數設定。
處理專案中的LESS檔案
安裝處理less檔案的loader，
npm i less-loader --save-dev專案使用sass同理
處理模板檔案
把模板（靜態html頁面）作為字串引入進來，通過webpack-loader進行打包
安裝
npm install html-loader --save-dev設定loader匹配規則
實際開發中，模板可能會用到一些模板語法。假設是以.ejs或者.tpl結尾的模板。ejs-loader相關的模板並且會返回給一個已經直接編譯好的函式。
配置ejs或者tpl的loader
app.js
處理專案的圖片檔案
會分為幾種情況，第一種情況是css中會有背景圖片，第二種情況是html模板結構中引用某一種檔案。
npm install file-loader --save-dev增加對圖片的規則loader
如何修改圖片打包後的輸出地址
安裝url-loader
npm install url-loader --save-devurl-loader可以指定一個limit，當圖片（檔案）大於指定limit值，會將圖片（檔案）扔給file-loader；當小於limit值，會將圖片（檔案）轉為base64編碼。
有兩種方式處理專案中引用過來的圖片（檔案），一種是url方式通過http請求過來的圖片，一種就是base64的方式。通過http請求載入過來的圖片，可以使瀏覽器做圖片（重複出現）快取。
如何對通過http請求過來的圖片進行壓縮
安裝
npm install image-webapck-loader --save-dev壓縮後的圖片