webpack教程

Webpack在生產環境中有一個重要的作用就是減少http的請求數，就是把多個文件打包到一個js裏，這樣請求數就可以減少好多

1、安裝
先裝好node和npm，因爲webpack是一個基於node的項目。然後
npm install -g webpack 全局安裝

官方不建議全局安裝webpack，所以還要進行本地安裝

2、進入項目文件夾，比如webpack_demo，然後新建一個package.json的文件在項目根目錄下
npm init //詢問一些問題:按回車選擇默認值 自動生成文件package.json
npm install --save-dev webpack //本地安裝，
目前是開發環境，所以需要加上-dev，用戶運行不需要依賴這個包
如果用戶運行需要依賴這個包，那麼就不加-dev，直接是--save，保存到生產環境
至此，webpack安裝完成

3、在項目根目錄下，建立
src源代碼文件夾——開發環境
dist生產環境文件夾

• ./是當前目錄
• ../是父級目錄
• /是根目錄

3、在命令行中分別執行以下命令，安裝對應的插件（--save-dev作用是安裝的插件的同時，將插件名寫入package.json的devDependencies列表中）
npm install webpack --save-dev
npm install jquery --save-dev
npm install style-loader css-loader --save-dev
npm install extract-text-webpack-plugin –-save-dev

4、webpack ./src/entery.js -o dist/bundle.js --mode development 在終端（命令行）中使用webpack打包
下面介紹使用配置文件進行打包

5、創建webpack.config.js

module.exports={
    //入口文件的配置項
    entry:{},
    //出口文件的配置項
    output:{},
    //模塊：例如解讀CSS,圖片如何轉換，壓縮
    module:{},
    //插件，用於生產模版和各項功能
    plugins:[],
    //配置webpack開發服務功能
    devServer:{}
}

• entry：配置入口文件的地址，可以是單一入口，也可以是多入口。
• output：配置出口文件的地址，在webpack2.X版本後，支持多出口配置。
• module：配置模塊，主要是解析CSS和圖片轉換壓縮等功能。
• plugins：配置插件，根據你的需要配置不同功能的插件。
• devServer：配置開發服務功能，後期我們會詳細講解。
• [name]的意思是根據入口文件的名稱，打包成相同的名稱，有幾個入口文件，就可以打包出幾個文件

配置文件參數說明：

• entry： 是 頁面入口文件配置 （html文件引入唯一的js 文件）
• output：對應輸出項配置
• path ：入口文件最終要輸出到哪裏，
• filename：輸出文件的名稱

• publicPath：公共資源路徑

• webpack：普通打包
• webpack -p：壓縮打包
• webpack -p -w：監聽所有需要打包的代碼，只要有代碼被改動並保存後，就會自動進行打包

6、熱更新
a.在webpack.config.js裏面配置devServer
devServer:{
contentBase:path.resolve(__dirname,'dist') //基本目錄結構，監聽哪裏的代碼
host:'10.1.28.102', //ip地址，不建議填localhost 命令行ipconfig查看ipv4的值即是ip地址
compress:true, //服務器壓縮參數，是否啓用服務器壓縮，一般啓用
port:1717 //任何喜歡的數字
}
b.安裝服務：npm install webpack-dev-server --save-dev
c.配置package.json
"scripts": {
"server": "webpack-dev-server",
},
d.運行命令：npm run server
注意：是conteneBase，不是contentPath
運行命令是npm run server，不是webpack-dev-server

6、live-server
本地開發常常需要搭建臨時的服務，第一時間我們會想到用http-server。
但現在流行修改文件瀏覽器自動刷新hot socketing（熱拔插），如live-reload。
若想瀏覽器自動打開項目，用opener。
現在live-server實現了三個插件的所有功能，並且很簡單就能啓動一個看起來很專業的本地服務

• 初始化npm:npm init
• 安裝live-server：cnpm install -g live-server
• 啓動live-server：live-server

如果你比較懶，可以在package.json中增加start中增加新的腳本

"scripts": {
  "server": "live-server ./ --port=9090"
}

然後執行 npm run server
瀏覽器會自動打開，並且當你修改本地文件，瀏覽器都會立即同步

7、const path = require('path');
path.resolve(__dirname,'dist'); //dist目錄所在的絕對路徑

8、模塊：CSS文件打包Loaders
Loaders是Webpack最重要的功能之一，他也是Webpack如此盛行的原因。通過使用不同的Loader，Webpack可以利用腳本和工具，從而對不同的文件格式進行特定處理。
注意：所有的Loaders都需要在npm中單獨進行安裝，並在webpack.config.js裏進行配置。
Loaders的配置參數：

• test：用於匹配處理文件的擴展名的表達式，這個選項是必須進行配置的；
• use：loader名稱，就是你要使用模塊的名稱，這個選項也必須進行配置，否則報錯；
• include/exclude:手動添加必須處理的文件（文件夾）或屏蔽不需要處理的文件（文件夾）（可選）；
• query：爲loaders提供額外的設置選項（可選）。

8.1、打包css文件，

首先在src文件夾下，建立一個css文件夾，在文件夾下需要打包的css文件
css文件建立好後，需要引入到入口文件中，纔可以打包到，這裏我們引入到entry.js中。

style-loader：用來處理css文件中的url()等
安裝：npm install style-loader --save-dev

css-loader：用來將css插入到頁面的style標籤
安裝：npm install css-loader --save-dev

兩個loader都下載安裝好後，我們就可以配置我們loaders了。
修改webpack.config.js中module屬性中的配置代碼如下（三種寫法）：

第一種寫法：直接用use。
module:{
    rules:[
        test:'/\.css$/',
        use:['style-loader','css-loader']
    ]
}
第二種寫法：把use換成loader。
module:{
    rules:[
        test:'/\.css$/',
        loader:['style-loader','css-loader']
    ]
}
第三種寫法：用use+loader的寫法：
module:{
    rules:[
        {
            test:/\.css$/,
            use:[
                {
                    loader:'style-loader'
                },
                {
                    loader:'css-loader'
                }
            ]
        }
    ]
}

9、插件配置：配置JS壓縮