webpack生產環境優化：externals
轉載請注明 來源:http://www.eword.name/
Author：eword
Email:eword@eword.name
webpack生產環境優化：externals
externals配置主要是為了防止某些通過CDN引入的包被打包到輸出的bundle中。
一、核心配置
/*
webpack.config.js webpack的配置文件
路徑： ./webpack.config.js
*/
// resolve用來拼接絕對路徑的方法
const { resolve } = require('path');
// 引入打包 html 文件的插件 html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// webpack配置
// 入口起點文件
entry: './src/index.js',
// 輸出
output: {
// 輸出文件名
filename: 'built.js',
// 輸出路徑
// __dirname nodejs的變量,代表當前文件的目錄絕對路徑
path: resolve(__dirname, 'build'),
},
// loader的配置
module: {
rules: [
// 詳細loader配置
//不同文件必須配置不同loader處理
// 打包 css 文件的詳細loader配置
{
// 匹配哪些文件
test: /\.css$/,
// 使用哪些loader進行處理
use: [
// use數組中loader執行順序:從右到左,從下到上依次執行
// 創建style標簽,將js中的樣式資源插入進行,添加到head中生效
'style-loader',
// 將css文件變成commonjs模塊加載js中,里面內容是樣式字符串
'css-loader',
],
},
//打包less 文件的詳細loader配置
{
//匹配哪些文件
test: /\.less$/,
//使用哪些loader進行處理
use: [
// use數組中loader執行順序:從右到左,從下到上依次執行
//創建style標簽,將js中的樣式資源插入進行,添加到head中生效
'style-loader',
//將css文件變成commonjs模塊加載js中,里面內容是樣式字符串
'css-loader',
//將less文件編譯成css文件
//需要下載less-loader和less
'less-loader'
]
},
]
},
// plugins的配置
plugins: [
// 詳細的plugins配置
new HtmlWebpackPlugin({
//復制../src/index.html'文件,并自動引入打包輸出的所有資源(JS/CS5)
template: './src/index.html'
})
],
// 生產環境下會自動壓縮js代碼
mode: 'production',
externals:{
// 忽略jquery。（庫名也就是通過npm安裝時的包名）
jquery:'jquery'
}
};
核心配置
/*
webpack.config.js webpack的配置文件
路徑： ./webpack.config.js
*/
externals:{
// 忽略jquery。（庫名也就是通過npm安裝時的包名）
jquery:'jquery'
}
jquery不會被webpack打包，需要手動在html中引入。
二、html中手動引入忽略的包
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>webpack</title>
</head>
<body>
<h1 id="title">hello html</h1>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
</body>
</html>
<!-- 手動從cdn引入jquery包 -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
浙公網安備 33010602011771號