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

多頁面配置

進擊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

devtools

在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次要不要打包
}

能夠實時監控打包 每當代碼變化就從新打包

其餘的一些plugin

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

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代碼的提取
• 懶加載
• 熱更新