wepack性能优化contenthash(缓存)

const { resolve } = require(‘path‘);
const htmlWebpackPlugins = require(‘html-webpack-plugin‘)// 引入html插件
const cssWebpackPlugins = require(‘mini-css-extract-plugin‘)// 引入单独css插件
const OptimizeCssAssetsWebpackPlugin = require(‘optimize-css-assets-webpack-plugin‘)//压缩css
// 定义node环境变量，决定使用browserslist的哪个环境
process.env.NODE_ENV = ‘production‘;
// 复用loader
const commOnCssLoader= [
cssWebpackPlugins.loader,// 单独的css文件
‘css-loader‘, {
// 还需在package.json中定义browserslist
loader: ‘postcss-loader‘,
options: {
ident: ‘postcss‘,
plugins: () => {
require(‘postcss-preset-env‘)();
},
},
},
]
/*
正常来讲，一个文件只能被一个loader处理
当一个文件要被多个loader处理，那么一定要指定loader执行的先后顺序：
先执行eslint再执行babel
*/
module.exports = {
entry: ‘./src/js/index.js‘, // 入口文件
output: {// 出口文件
filename: ‘js/build.[contenthash:10].js‘,// 带上打包的hash值
path: resolve(__dirname, ‘build‘),
},
module: {
rules: [
{ // 检查js语法eslint
// 在package.josn中eslintConfig --> airbnb
test: /\.js$/,
exclude: /node_module/,// 排除
// 优先执行
enforce: ‘pre‘,
loader: ‘eslint-loader‘,
options: {
fix: true // eslit自动帮你格式化js的不规范语法
}
},
{
// 以下loader只会匹配一个
// 注意: 不能有两个配置处理同一种类型文件
oneOf:[
{// 打包css
test: /\.css$/,
use: [
...commonCssLoader
],
},
{// 打包scss
test: /\.scss$/,
use: [
...commonCssLoader, // 引入loader
‘sass-loader‘,
],
},
{ // js兼容性
// 在package.josn中eslintConfig --> airbnb
test: /\.js$/,
exclude: /node_module/,// 排除
loader: ‘babel-loader‘,
options: {
presets: [
[
‘@babel/preset-env‘,
{
// 按需加载
useBuiltIns: ‘usage‘,
// 指定core-js版本
corejs: { version: 3 },
targets: {
chrome: ‘60‘,
firefox: ‘50‘,
ie: ‘9‘,
edge: ‘17‘,
safari: ‘10‘
},
},
],
],
// 开始babel缓存
// 第二次构件时, 会读取之前的缓存
cacheDirectory:true
}
},
{// 打包图片
test: /\.(jpg|png|gif)$/,
loader: ‘url-loader‘,
options: {
limit: 8 * 1024,
name: ‘[hash:10].[ext]‘,
outputPath: ‘imgs‘,//保存的路径
esModule: false,//关闭es6模块化
name:‘[hash:10].[ext]‘,// 处理后的名字长度
}
},
{// 打包html插入的图片
test: /\.html$/,
loader: ‘html-loader‘
},
{// 打包其他文件, 除了上面打包过的
exclude: /\.(js|css|less|html|jpg|png|gif)$/,
loader: ‘file-loader‘,
options: {
outputPath: ‘media‘,//保存的路径
name:‘[hash:10].[ext]‘,// 处理后的名字长度
}
}]
}
],
},
plugins: [
new cssWebpackPlugins({ // 打包成单独的css插件
filename: ‘css/build.[contenthash:10].css‘,
}),
new OptimizeCssAssetsWebpackPlugin(), // 压缩css插件
new htmlWebpackPlugins({ // html插件
template: ‘./src/index.html‘,
minify: {
collapseWhitespace: true,// 清除两边空白
removeComments: true// 清除备注
}
})
],
mode: ‘production‘, // 环境模式,
devtool:‘source-map‘// 报错追踪
};

/* node server 开启服务器 */
/* http:localhost:3000 */
// 引入框架
const express = require(‘express‘);
// 使用框架
const app = express();
// 中间件
app.use(express.static(‘build‘,{maxAge:1000 * 3600}))// 缓存过期时间
// 监听端口
app.listen(3000,function(){
console.log(‘服务器开启成功‘);

})