var path = require('path');
//抽离css
var MiniCssExtractPlugin = require('mini-css-extract-plugin');
//抽离html
var HtmlWebpackPlugin = require('html-webpack-plugin');
//css-tree-shaking
var glob = require('glob-all');
var PurifyCSSPlugin = require('purifycss-webpack');
//清理dist文件下没用的 但是dist下有json文件时要关闭
var { CleanWebpackPlugin } = require('clean-webpack-plugin');
//开启热更新
const webpack = require('webpack');
module.exports = {
//单入口
// entry: './src/index.js',
//多入口
entry: {
taotao: './src/index.js',
index: './src/index1.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
//主入口文件输出位置
filename: '[name][hash:3].bundle.js',
//主入口文件输出名称
chunkFilename: '[name][hash:3].js',
//提取公共js代码输出名字
},
//提取公共js代码的配置
optimization: {
splitChunks: {
cacheGroups: {
// 自定义js
common: {
//搜索范围
chunks: 'all',
//文件大小
minSize: 1,
// minChunks: 2,
//生成模块名字
name: 'common',
//优先级
priority: 2,
test: /\.js$/
},
//引入第三方库
// vendor: {
// name: 'vendor',
// // chunks: 'initial',
// priority: 3,
// // reuseExistingChunk: false,
// test: /node_modules/
// },
}
},
},
module: {
rules: [{
test: /\.less$/,
use: [
{ loader: MiniCssExtractPlugin.loader },
//注意style-loader 与MiniCssExtractPlugin 不可以在一起
{ loader: 'css-loader' },
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: [
//添加前缀
require('postcss-cssnext')(),
//压缩css
require('cssnano')()
]
}
},
{ loader: 'less-loader' },
]
},
//图片处理
{
test: /\.(jpg|png|gif|jpeg)$/,
use: [{
//url-loader中内置了 file-loader 所以当使用 url-loader的时候，可以不使用 file-loader
//对图片进行处理 依据大小将其打包成base64格式 或者直接加载本地文件
loader: 'url-loader',
options: {
//输出图片的名称
name: '[name][hash:3].[ext]',
//决定格式的限制
limit: 100,
//输出路径dist下文件名
outputPath: 'img'
}
}, {
//用域图片进行压缩
loader: 'img-loader',
options: {
plugins: [
//不同的格式引用不同的方法
require('imagemin-pngquant')({
quality: [0.3, 0.5]
//图片压缩30%~50%
})
]
}
}]
},
{
//用域将处理好的图片进行路径处理添加到引用的位置
test: /\.html$/,
use: [{
loader: 'html-loader',
options: {
attrs: ['img:src']
//配置html文件中img标签的src属性值
}
}]
},
]
},
plugins: [
//抽离css文件到dist文件
new MiniCssExtractPlugin({
filename: '[name][hash:3].css',
}),
//css文件进行抖动此处js匹配失败
new PurifyCSSPlugin({
paths: glob.sync(path.join(__dirname, './*.html')),
// paths: glob.sync(path.join(__dirname, './src/index.js')),
// path: path.join(__dirname, './src/index.js')
}),
//抽离html到dist文件
new HtmlWebpackPlugin({
filename: 'index.html',
//抽离出文件名
template: './index.html'
//处理模板
}),
new webpack.HotModuleReplacementPlugin(),
new CleanWebpackPlugin(),
],
//指定打包模式
mode: 'development',
//服务器配置
devServer: {
port: "8083",
//切换端口号
contentBase: 'dist',
//默认打开路径
hot: true
//热更新开启
}
}
//对于js来讲 入口文件中添加如下
// if (module.hot) {
// module.hot.accept();
// }
