標題文字
前言:
上一節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{//.....} 這樣在其他環境中使用定義不同接口地址
})
- 配置篇完