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

Webpack · 發表 2019-02-25 20:21:21

摘要：標題文字進擊webpack 4 （基礎篇一）進擊webpack4 （基礎篇二：配置）前言：上一節babel配置錯誤 { test:/\.js/, use:{ loader:'babel-loader',...

標題文字

前言：

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

配置篇完

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