階段1-第三章-webpack-高級配置（一）

1.HTML 中img標籤的圖片資源處理

html-withimg-loader 
只要在html中正常引用圖片便可，webpack會找到對應的資源打包，html裏的img標籤的路徑資源打包，而且把資源從新命名，使用的是url的圖片配置、

• live-server 在當前文件夾起服務

2.多頁面應用的打包：

webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports={
    // 1.修改成多入口
    entry:{
        index:'./src/index.js',
        other:'./src/other.js'
    },
    output:{
        path:path.resolve('/dist'),
        // 2.多入口沒法對應一個固定的出口，因此修改filename爲[name]變量
        filename:[name].js   //[name] output 這裏能夠根據傳入的name 來輸出對應的文件名,index.js和other.js
    },
    plugin:[  // 根目錄下面的index.html是根據html-webpack-plugin 插件生成的。
                //根據index.html templare 生成的filename index.html
          // 3.若是用了html插件，須要手動配置多入口對應的html文件，將制定其對應的輸出文件      
        new HtmlWebpackPlugin({
            filename:'index.html',
            template:'./src/index.html',
            chunks:['index','main']  // 只引入要添加的chunks
        }),
        new HtmlWebpackPlugin({
            filename:'other.html',
            template:'./src/other.html',
            chunks:['other']   
        })
    ]    
}

3. 第三方庫的兩種引入方式

// 能夠掛載多個全局變量
能夠經過 expose-loader 進行全局變量的注入，同時也可使用內置插件webpack.ProvidePlugin 對每一個模塊的閉包空間，注入一個變量，制動加載模塊，而不用導出import 或 require

expose-loader    全局變量   //  一般和第三方庫結合使用時會用到，由於第三方庫回去尋找全局jquery變量
npm i expose-loader -D
webpack.ProvidePlugin

4.development和production不一樣配置文件的打包

webpack-merge
npm i webpack-merge -D
    webpack.base.js
    webapck.prod.js   // 優化配置，代碼拆分，代碼壓縮，加密
    webpack.dev.js
步驟以下：
-   將開發環境和生產環境公用的配置放入base中，不一樣的配置各自放入prod和dev中 
-   而後在dev和prod中使用webpack-merge 把本身的配置與base的配置進行合併並導出
-  將 package.json中的腳本參數進行修改，經過--config手動指定特定的配置文件

webpack.dev.js

const merge  = require('webpack-merge');
 const baseConfig =  require('./webpack.base.js')
 module.exports = merge(baseConfig,{
     mode:'developlment'
     devServer:{
         open:true,
         hot: true,
         compress: true,
         port: 3000,
        proxy:{
            '/api': {
                target: "http://localhost:9999",
                pathRewrite: {
                    // 轉發請求時不會攜帶 '/api'
                    // 實際請求的是http://localhost:9999/getUserInfo
                    '^/api': ''
                }
            }
           
        } 
     }
 })

package.json

{
    "script":{
        "test": 'echo',
        "buildcustom":"webpack --config webpack.custom.config.js",
        "build":"webpack --config ./build/webapck.prod.js",
        "dev":"webpack-dev-server --config ./build/webpack.dev.js",
        "server": "node server.js",
        "start": "live-server ./dist"  //用live-server 打開dist文件夾，啓動小型服務器
    }
}

定義build文件夾，將 webpack.base.js， webpack.prod.js， webpack.dev.js 放入build文件夾
此時在output路徑拼接須要使用:
output:{
    //相對路徑都是相對的項目根目錄，絕對路徑是當前文件所在的的絕對路徑記得往上翻一層
    path:path.resolve(__dirname，'..'，'./dist/')
},
plugins:[
    new CopyWebpackPlugin({
        from: path.join(__dirname,'..','assets'),
        to: 'assets'
    })
]

5. 定義環境變量

webpack 內置插件  webpack.DefinePlugin({})  
  DefinePlugin 會解析定義的環境變量表達式，這裏的值會當成變量來處理
 此環境變量均可以在src打包的文件夾下面使用
let host = 'http://192.168.1.22:8080'
if(is_dev){
    host = 'www.newbaker.cn:9999'
}

6. 使用devServer 解決跨越問題

---

• 因爲開發時會用到webpack-dev-server ，因此必定會產生跨域問題
• jsonp (淘汰)
• cors 跨域資源共享
• http proxy

http代理

• 其原理就是將全部請求發給devServer,再由devServer服務器作一次轉發，發送給數據接口服務器；
• 因爲ajax是發送給devServer服務器的，因此不存在跨域，而devServer是用node平臺發送的http請求，天然也不涉及跨域問題

---

node中使用CORS：

npm i cors --save-dev
app.js
const express = require('express')
const app = express()
const cors = require('cors')  //加上了響應頭  responese Headersd   Access-Control-Allow-Origin: *
app.use(cors())
app.get('/api/getUserInfo',(req,res) => {
    res.send({
        name:'wjx'，
        age: 18
    })
})
app.listen(9999, () => {
    console.log('http://localhost:9999')
})

7 HMR 熱更新

hot module reload   // 不適用於生產環境，只是在開發環境
module.hot.accept('./hotModule.js',()=>{
    // import 和 export 必須在頂級做用域使用
    var str = require('./hotModule.js)
})

以上用到的配置webpack.config.js

const CleanWebpackPlugin = require('clean-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const webpack = require('webpack')
const path = require('path')
module.exports={
 entry: './src/main.js',
 output:{
//必須爲絕對路徑
//path.resolve() 解析當前路徑的絕對路徑
// path.join(__dirname,'./dist/')
path: path.resolve("./dist/"),
filename: 'bundle.js'
},
  mode:'development'  //不設置默認爲production ,
//  watch: true,   //開啓監視模式，自動編譯，生成輸出文件
devServer:{
    open: true,
    port: 5000,
    hot: ture,
    compress: true,
    contentBase: '/src',   
    },
 plugins:[
 //插件通常引入進來是個構造函數
 //根據模板'/src/indtx.html'生成文件'index.html'
     new HtmlWebpackPlugin({
         filename:'index',
         template:'./src/index.html'
     }),
     new CleanWebpackPlugin(),
     new CopyWebpackPlugin([{
         from: path.join(__dirname,'assets'),
         to:'assets'
     },
     {
         from: path.join(__dirname,'image'),
         to:'image'
     }
     ]),
     new webpack.BannerPlugin('能夠爲每一個chunk文件頭部添加banner')，
     new webpack.ProvidePlugin({  // 內置插件,在每一個模塊內部掛載一個jQuery
         $:'jquery',
         jQuery:'jquery'
     }),
     new webpack.DefinePlugin({
         IS_DEV: 'true',
         test1: '"1+1"'  //這裏的值會當成變量來處理，因此裏面要用「」 拼接
     })
 ],
 module:{
     rules:[
         {
             test:/\.css$/,
             // webapck 讀取loader時 是從左到右讀取，會將css文件先交給最右側的loader
             // loader的執行順序是從右到左以管道的方式鏈式調用
             // css-loader：解析css，使其支持css語法格式
             // style-loader: 將解析出來的結果放到 html中，使其生效
             use:['style-loader','css-loader']
         }，
         {
             test:/\.less$/,
             //less-loader 只是將less文件轉成css語法
             use:['style-loader','css-loader','less-loader']
         },
         {
             test:/\.s(a|c)ss$/,
             use:['style-loader','css-loader','sass-loader']
         },
         {
             test:/\.jpg|jpeg|png|gif|bmp$/,
             use:['file-loader']
         },
         {
             test:/\.(woff|woff2|eot|svg|ttf)$/,
             use:['file-loader']
         },
         {
             test:/\.(jpg|jpeg|png|gif|bmp)$/,
             use:{
                 loader:'url-loader',
                 options:{
      /* url-loader功能*/  limit:5*1024，   //5kb  若是圖片大小  小於5kb直接轉成base64
        /* file-loader功能*/  outputPath:'images',
       /* file-loader功能*/  name:[name]-aaa[hash:4].[ext]  //ext擴展名 -中間能夠加常量,hash:4 保留4位hash值
                 }
             }
         }，
         {
             test:/\.js$/,
             use:{
                 loader:'babel-loader'，
                 options:[
                     presets:['@babel/env'],
                     plugins:[
                     '@babel/plugin-proposal-class-properties'，
                     '@babel/plugin-transform-runtime'
                     ]
                 ]
             },
             exclude:/node_modules/
         },
         {
           test:/\.(html|htm)$/i,
           user{
                loader:'html-withimg-loader'  
           }
         },
         {
             // 用於解析JQuery模塊的絕對路徑
             test:require.resolve('jquery'),  // node_modules/jquery/pacakge.json  > main
             use:{
                 loader:'expose-loader',
                 options: '$'   // 將引入的jquery掛載到了全局$
             }
         }
     ]
 },
 devtools:'cheap-module-eval-source-map'   
}