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

標題文字

進擊webpack 4 （基礎篇一）

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

前言：
上一節babel配置錯誤

 {
    test:/\.js/,
    use:{
        loader:'babel-loader',
        options:{
            presets:[
                '@babel/preset-env'
            ],
            plugins: [
                ["@babel/plugin-proposal-decorators", { "legacy": true }],
                ["@babel/plugin-proposal-class-properties", { "loose" : true },"@babel/plugin-transform-runtime"],
            ]
        }
    }
},

這個纔是對的

## 多頁面配置 ##

多頁面配置即是多入口

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{//.....} 這樣在其他環境中使用定義不同接口地址
})

• 配置篇完