(1)、hash优化缓存
css独立打包
安装
npm install css-loader html-webpack-plugin mini-css-extract-plugin clean-webpack-plugin -D
//webpack.config.js
const path = require('path')
const HtmlWebpackPlugin = require("html-webpack-plugin")
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const {CleanWebpackPlugin} = require("clean-webpack-plugin")
const { clear } = require('console')
module.exports = {
mode:'development',
entry:{
app:path.resolve(__dirname,'src/main.js')
},
output:{
filename:"bundle.js",
path:path.resolve(__dirname,"dist")
},
resolve:{
extensions:[".css",".js",".vue"]
},
module:{
rules:[
{
test:/\.css$/,
use:[MiniCssExtractPlugin.loader,"css-loader"]
}
]
},
plugins:[
new CleanWebpackPlugin(),
new MiniCssExtractPlugin({
filename:"index.css"
}),
new HtmlWebpackPlugin({
template:"./src/index.html"
})
]
}
//src/css/index.css
:root {
background-color: yellow;
}
//src/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
//src/main.js
import "./css/index.css"
console.log('main')
//server.js
const express = require("express")
const app = express()
const path = require("path")
//设置静态资源缓存1小时
app.use(express.static(path.resolve(__dirname,"dist"),{maxAge:1000*3600}))
app.listen(3000)
(2)、noParse
module:{
noParse:/jquery/,
}
(3)、全局变量
//如果,就不用通过import引入即可全局使用
plugins:[
new webpack.ProvidePlugin({
$:"jquery"
})
]
(4)、externals
//webpack.config.js
const path = require('path')
const HtmlWebpackPlugin = require("html-webpack-plugin")
const webpack = require('webpack')
module.exports = {
mode:'development',
entry:{
app:path.resolve(__dirname,'src/main.js')
},
output:{
filename:"bundle.js",
path:path.resolve(__dirname,"dist")
},
resolve:{
extensions:[".css",".js",".vue"]
},
module:{
// noParse:/jquery/,
rules:[
{
test:/\.css$/,
use:["css-loader"]
}
]
},
plugins:[
new webpack.ProvidePlugin({
$:'jquery'
}),
new HtmlWebpackPlugin({
template:"./src/index.html"
})
],
externals:{
'jquery':'$'
}
}
(5)、ignorePlugin
new webpack.IgnorePlugin({
contextRegExp:/moment/,
resourceReExp:/\.\/locale$/
})
//src/main.js
import moment from "moment"
import "moment/locale/zh-cn"
moment.locale("zh_cn):
console.log(moment().format('LL'))
(6)、tree shaking
ES6 modules
mode:"production"
(7)、dllplugin
npm install react react-dom -S
npm install @babel/preset-env @babel/preset-react -D
const webpack = require('webpack')
const path = require('path')
const HtmlWebpackPlugin = require("html-webpack-plugin)
const { CleanWebpackPlugin } = require("clean-webpack-plugin")
module.exports = {
mode:"development",
entry:{
app:path.resolve(__dirname,"src/main.js")
},
output:{
filename:"[name].js",
path:path.resolve(__dirname,"dist")
},
module:{
rules:[
{
test:/\.js$/,
exclude:/node_modules/,
use:[{
loader:"babel-loader",
options:{
presets:[
["@babel/preset-env",
{
"useBuiltIns":"usage",
corejs:{
version:3
}
}],
"@bable/preset-react"
]
}
}]
}
]
},
plugins:[
new webpack.DllReferencePlugin({ manifest:path.resolve(__dirname,"dist/dll","manifest.json")
}),
new HtmlWebpackPlugin({
template:"./src/index.html"
})
]
}
//webpack.dll.config.js
const webpack = require('webpack')
const path = require('path')
const HtmlWebpackPlugin = require("html-webpack-plugin)
const { CleanWebpackPlugin } = require("clean-webpack-plugin")
module.exports = {
mode:"development",
entry:{
react:["react","react-dom"]
},
output:{
filename:"[name].dll.js",
path:path.resolve(__dirname,"dist/dll"),
library:"[name]_dll"
},
module:{
rules:[
{
test:/\.js$/,
exclude:/node_modules/,
use:[{
loader:"babel-loader",
options:{
presets:[
["@babel/preset-env",
{
"useBuiltIns":"usage",
corejs:{ version:3 }
}
],
"@bable/preset-react" ]
}
}]
}
]
},
plugins:[
new webpack.DllPlugin({
name:"[name]_dll",
path:path.resolve(__dirname,"dist/dll","manifest.json")
})
]
},
//dist/index.html
<script src="dll/react.dll.js"></script>