多个html打包，分别引入不同的 多个 js 文件 流程
2021-03-01 23:26
标签：element move 生成 源文件 ash web content 哈希 lap 1. 入口配置一个或者多个： 2. html 插件配置 ， 注意在 html 插件配置里加入 ： chunks:[‘js/a‘], 这个属性 最终webpack 配置 多个html打包，分别引入不同的 多个 js 文件 流程 标签：element move 生成 源文件 ash web content 哈希 lap 原文地址：https://www.cnblogs.com/star2021/p/14392682.htmlentry:{ // 单个 js 打包
‘js/a‘:‘./htmlDist/cn/js/A.js‘ , // 单个 js
‘js/b‘:[ // 多个 js 合并
‘./htmlDist/cn/js/B.js‘ ,
‘./htmlDist/cn/js/c.js‘ ,
]
},
plugins:[
new CleanWebpackPlugin() , // 使用清除旧文件的插件
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/b‘], //需要引入的js文件名称
filename: "B.html", //生成html文件的文件名，默认是index.html
hash:true , //引入产出的资源时加上哈希避免缓存
inject: true,
}),
new htmlWebpackPlugin({ // 打包 c.html 文件插件
minify:{
minimize:true, //是否打包为最小值
removeAttrbuteQuotes:true, //去除引号
removeComments:true, //去掉注释
collapseWhitespace:true, //去掉空格
minifyCss:true, // 压缩css
removeEmptyElements:false, //清理内容为空的元素
},
template:"./htmlDist/cn/c.html" , // 引入需要打包的 html 文件 ，并生成到 最终的dist 文件夹里面去，
// title:‘A.html‘, // 最终生成的 文件名
chunks:[‘js/a‘ , ‘js/b‘], //需要引入的js文件名称,可以多个 js 引入
filename: "c.html", //生成html文件的文件名，默认是index.html
hash:true , //引入产出的资源时加上哈希避免缓存
inject: true,
}),
],
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‘ , // 单个 js
‘js/b‘:[ // 多个 js 合并
‘./htmlDist/cn/js/B.js‘ ,
‘./htmlDist/cn/js/c.js‘ ,
]
},
output:{
// __dirname 表示webpack.config.js 这个配置文件的位置
// filename:‘[name].js‘, //输入的文件名是什么，生成的文件名也是什么，默认配置
filename:‘[name].[chunkhash:8].js‘,//增加8位的哈希值，生成新的动态文件 ，
path:path.resolve(__dirname,‘dist‘) //指定生成的文件目录
},
plugins:[
new CleanWebpackPlugin() , // 使用清除旧文件的插件
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/b‘], //需要引入的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: [
{ // 打包 css
test: /\.css$/, // 正则表达式，表示.css后缀的文件
use: [‘style-loader‘,‘css-loader‘] // 针对css文件使用的loader，注意有先后顺序，数组项越靠后越先执行
},
{ // 打包 html 里面的 img 图片
test: /\.(htm|html)$/i,
use: ‘html-withimg-loader‘
},
{ // 打包 css 里面的 img 图片
test: /\.(png|svg|jpg|gif)$/,
// use: [‘file-loader‘],
use:[
{
loader:‘url-loader‘,
options: {
name: ‘images/[name].[ext]‘,
// 这里limit属性的作用就是将小于8192B（8.192K）大小的图片转成base64格式，而大于这个大小的图片将会以file-loader的方式进行打包处理
// 如果不写limit属性，那么url-loader就会默认将所有图片转成base64
// limit: 102400
// file-loader 默认使用了最新版本，返回的是 [object module] ，会导致 打包图片 失败，添加这个
esModule:false
}
}
]
}
]
},
performance: { // 就是为了加大文件允许体积，提升报错门栏。
hints: "warning", // 枚举
maxAssetSize: 500000, // 整数类型（以字节为单位）
maxEntrypointSize: 500000, // 整数类型（以字节为单位）
assetFilter: function(assetFilename) {
// 提供资源文件名的断言函数
return assetFilename.endsWith(‘.css‘) || assetFilename.endsWith(‘.js‘);
}
},
watch:true , // 时时监控
}
文章标题：多个html打包，分别引入不同的 多个 js 文件 流程
文章链接：http://soscw.com/index.php/essay/58768.html