摘要：多頁面配置進(jìn)擊基礎(chǔ)篇一進(jìn)擊基礎(chǔ)篇二配置多頁面配置多頁面配置即是多入口需要寫成對象形式，注意數(shù)組形式會變成多入口單頁面，因?yàn)榇虬蟮臅喜⒊梢粋€(gè)入口文件出口不能寫同一個(gè)文件用代替以上配置并不能多頁面，還需要個(gè)模板，并且指明各自的代碼塊去生成

進(jìn)擊webpack 4 （基礎(chǔ)篇一）

進(jìn)擊webpack4 （基礎(chǔ)篇二：配置）

## 多頁面配置 ##

多頁面配置即是多入口

entry需要寫成對象形式， 注意數(shù)組形式會變成多入口單頁面， 因?yàn)榇虬蟮腸hunks 會合并成一個(gè)！

//webpack.config.js
  entry:{
        home:["@babel/polyfill","./src/index.js"],
        login:["@babel/polyfill","./src/login.js"]
    }, // 入口文件
     

出口不能寫同一個(gè)文件 用[name]代替

output:{
    filename:"[name].js",  
    path:path.resolve(__dirname,"./dist") 
}

以上配置并不能多頁面， 還需要2個(gè)html模板，并且指明各自的chunks（代碼塊）

  plugins: [
    // new PluginName 去生成js對象供給 webpack compiler 調(diào)用
    new HtmlWebpackPlugin({
        template:"./index.html",
        filename:"index.html",
        chunks:["home"]
    }),
    new HtmlWebpackPlugin({
        template:"./login.html",
        filename:"login.html",
        chunks:["login"]
    }),
],

否則每個(gè)頁面會同時(shí)引入所有的js

在production下 打包后的代碼都被壓縮掉了，我們有時(shí)候需要調(diào)試代碼的時(shí)候沒法定位，devtools就是干這件事的

它有7種類型基本類型
eval： 每個(gè)module會封裝到 eval 里包裹起來執(zhí)行，并且會在末尾追加注釋 //@ sourceURL.
source-map： 生成一個(gè)SourceMap文件.
hidden-source-map： 和 source-map 一樣，但不會在 bundle 末尾追加注釋.
inline-source-map： 生成一個(gè) DataUrl 形式的 SourceMap 文件.
eval-source-map： 每個(gè)module會通過eval()來執(zhí)行，并且生成一個(gè)DataUrl形式的SourceMap.
cheap-source-map： 生成一個(gè)沒有列信息（column-mappings）的SourceMaps文件，不包含loader的 sourcemap（譬如 babel 的 sourcemap）
cheap-module-source-map： 生成一個(gè)沒有列信息（column-mappings）的SourceMaps文件，同時(shí) loader 的 sourcemap 也被簡化為只包含對應(yīng)行的。

我們常用的是source-map

devtools："source-map"

watch

watch:true,
watchOptions:{
    poll:5  // 每秒問5次要不要打包
}

可以實(shí)時(shí)監(jiān)控打包 每當(dāng)代碼變化就重新打包

clean-webpack-plugin

每次打包之前清空原來的文件夾

yarn add clean-webpack-plugin -D

const cleanWebpackPlugin = require("clean-webpack-plugin")

plugins: [
    // new PluginName 去生成js對象供給 webpack compiler 調(diào)用

    new cleanWebpackPlugin("./dist")  // 指定需要清空的目錄

],

copy-webpack-plugin

用于文件的拷貝

yarn add copy-webpack-plugin -D

const copyWebpackPlugin= require("copy-webpack-plugin")

plugins: [
    // new PluginName 去生成js對象供給 webpack compiler 調(diào)用

    new copyWebpackPlugin({
        from:"xxx",
        to:"./"  // 在dist里
    })  // 指定從哪里拷貝到哪里

],

- webpack 可視化工具

yarn add webpack-bundle-analyzer -D

const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
plugins: [
    new BundleAnalyzerPlugin () 
]

devServer:{  
    proxy:{
       "/api":{
           target:"www.baidu.com",
           pathReWrite:{"/api":""},  // 請求/api的url  /api 會替換成"" ，并且自動加前綴target
           secure: false,  // 接受運(yùn)行在 HTTPS 上，使用了無效證書的后端服務(wù)器
           changeOrigin: true, //虛擬一個(gè)服務(wù)器接收你的請求并代你發(fā)送該請求,
       } 
    },
    contentBase: "./dist",  //當(dāng)前服務(wù)以哪個(gè)作為靜態(tài)資源路徑
    host:"localhost", // 主機(jī)名 默認(rèn)是localhost
    port:3000, // 端口配置
    open:true, // 是否自動打開網(wǎng)頁
    compress:true // 是否精簡
}

如需多個(gè)代理， 多配制幾個(gè)proxy的key值就ok

 resolve:{
        modules:[path.resolve("node_modules")],  // 數(shù)組   可以配置多個(gè)  強(qiáng)制指定尋找第三方模塊的目錄 使得查找更快
        alias:{  //別名配置  import xxx from "src/xxx" ---> import xxx from "@/xxx"
            "@":path.resolve(__dirname,"./src")
        },
        extensions:[".css",".js",".json",".jsx"] // 自動添加后綴   加載模塊時(shí)候依次添加后綴 直到找到為止
    }
    

webpack自帶插件webpack.definePlugin, 可以定義全局變量

webpack.definePlugin({
    Dev:""development"", // 注意雙引號里面套的是單引號的字符串
    Pro:""production"" // if(Dev==="development"){}else{//.....} 這樣在其他環(huán)境中使用定義不同接口地址
})

配置篇完

下一節(jié) webpack 優(yōu)化

對于沒有其他依賴的第三方庫， 不解析

webpack內(nèi)置插件ignorePlugin 的使用

動態(tài)鏈接庫

多核并發(fā)打包

webpack的tree-shaking跟scope-hosting

公共js代碼的提取

懶加載

熱更新