const path=require('path'); //调用node.js中的路径
const {CleanWebpackPlugin} = require('clean-webpack-plugin'); //清除旧的出口文件,使用 有hash 值的新文件
var htmlWebpackPlugin = require('html-webpack-plugin'); //打包 html 插件
var MiniCssExtractPlugin = require("mini-css-extract-plugin"); //单独打包后的 .css 插件 , 新版本都采用这个
//var ExtractTextPlugin = require('extract-text-webpack-plugin'); // 抽离 css 文件打包插件 ; 这个版本引进被废弃
module.exports={//mode:"development" , //开发模式,没有对js等文件压缩,默认生成的是压缩文件
mode : 'production',
entry:{//单个 js 打包
'js/a':'./htmlDist/cn/js/A.js' , //分页打包成 css
'js/b':'./htmlDist/cn/js/B.js' , //分页打包成 css
},
output:{//__dirname 表示webpack.config.js 这个配置文件的位置
//filename:'[name].js', //输入的文件名是什么,生成的文件名也是什么,默认配置
filename:'[name].[chunkhash:8].js',//增加8位的哈希值,生成新的动态文件 ,
path:path.resolve(__dirname,'dist') //指定生成的文件目录
},
plugins:[new CleanWebpackPlugin() , //使用清除旧文件的插件
newMiniCssExtractPlugin({
filename:'css/[name].css', //打包分离后的文件名
}),new htmlWebpackPlugin({ //打包 A.html 文件插件
minify:{
minimize:true,//是否打包为最小值
removeAttrbuteQuotes:true,//去除引号
removeComments:true,//去掉注释
collapseWhitespace:true,//去掉空格
minifyCss:true,//压缩css
removeEmptyElements:false,//清理内容为空的元素
},
template:"./htmlDist/cn/A.html" , //引入需要打包的 html 文件 ,并生成到 最终的dist 文件夹里面去,
//title:'A.html', // 最终生成的 文件名
//chunks:['js/a'], //需要引入的js文件名称
filename: "A.html", //生成html文件的文件名,默认是index.html
hash:true , //引入产出的资源时加上哈希避免缓存
inject: true,
}),new htmlWebpackPlugin({ //打包 B.html 文件插件
minify:{
minimize:true,//是否打包为最小值
removeAttrbuteQuotes:true,//去除引号
removeComments:true,//去掉注释
collapseWhitespace:true,//去掉空格
minifyCss:true,//压缩css
removeEmptyElements:false,//清理内容为空的元素
},
template:"./htmlDist/cn/B.html" , //引入需要打包的 html 文件 ,并生成到 最终的dist 文件夹里面去,
//title:'A.html', // 最终生成的 文件名
//chunks:['js/a'], //需要引入的js文件名称
filename: "B.html", //生成html文件的文件名,默认是index.html
hash:true , //引入产出的资源时加上哈希避免缓存
inject: true,
}),
],
devServer: {//本地服务器配置
contentBase: './dist', //默认本地服务器所在的根目录
historyApiFallback: true, //是否跳转到index.html
inline: true, //源文件改变时刷新页面
port: 8084 , //端口号,默认8080
hot: true,
},
module: {//文件加载器 loader
/*单独打包 分离 css 和 js 文件插件开始*/rules: [
{
test:/\.css$/,
use : [
MiniCssExtractPlugin.loader,
{ loader:"css-loader"}
]
},/*单独打包 分离 css 和 js 文件插件结束*/]
},
performance: {//就是为了加大文件允许体积,提升报错门栏。
hints:"warning", //枚举
maxAssetSize:500000, //整数类型(以字节为单位)
maxEntrypointSize:500000, //整数类型(以字节为单位)
assetFilter:function(assetFilename) {//提供资源文件名的断言函数
return assetFilename.endsWith('.css') || assetFilename.endsWith('.js');
}
},
watch:true , //时时监控
}