摘要：多頁面配置進擊基礎篇一進擊基礎篇二配置多頁面配置多頁面配置即是多入口需要寫成對象形式，注意數組形式會變成多入口單頁面，因為打包之后的會合并成一個入口文件出口不能寫同一個文件用代替以上配置并不能多頁面，還需要個模板，并且指明各自的代碼塊去生成

進擊webpack 4 （基礎篇一）

進擊webpack4 （基礎篇二：配置）

## 多頁面配置 ##

多頁面配置即是多入口

entry需要寫成對象形式， 注意數組形式會變成多入口單頁面， 因為打包之后的chunks 會合并成一個！

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

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

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

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

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

否則每個頁面會同時引入所有的js

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

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

我們常用的是source-map

devtools："source-map"

watch

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

可以實時監控打包 每當代碼變化就重新打包

clean-webpack-plugin

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

yarn add clean-webpack-plugin -D

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

plugins: [
    // new PluginName 去生成js對象供給 webpack compiler 調用

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

],

copy-webpack-plugin

用于文件的拷貝

yarn add copy-webpack-plugin -D

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

plugins: [
    // new PluginName 去生成js對象供給 webpack compiler 調用

    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,  // 接受運行在 HTTPS 上，使用了無效證書的后端服務器
           changeOrigin: true, //虛擬一個服務器接收你的請求并代你發送該請求,
       } 
    },
    contentBase: "./dist",  //當前服務以哪個作為靜態資源路徑
    host:"localhost", // 主機名 默認是localhost
    port:3000, // 端口配置
    open:true, // 是否自動打開網頁
    compress:true // 是否精簡
}

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

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

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

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

配置篇完

下一節 webpack 優化

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

webpack內置插件ignorePlugin 的使用

動態鏈接庫

多核并發打包

webpack的tree-shaking跟scope-hosting

公共js代碼的提取

懶加載

熱更新