1. 这种方式，把多个 js 自动打包成默认的 main.js ，直接在 dist 文件夹里面，和生成的 html 文件同级
2. 而且，html 插件里，没有引入也会自动引入 js ，而且还添加版本号
webpack.config.js 配置如下:
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 插件 ， 新版本都采用这个 module.exports={ // mode:"development" , //开发模式，没有对js等文件压缩，默认生成的是压缩文件 mode : ‘production‘ , entry:[ ‘./htmlDist/cn/js/A.js‘, ‘./htmlDist/cn/js/B.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({ // 打包 cn-index.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({ // 打包 cn-index.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: [ { // 打包 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 , // 时时监控 }
入口的js 内容如下：
import ‘../css/A.css‘ console.log(‘打包A.js文件的内容‘);
引入的css 内容如下：
p{ color:pink;border:1px solid red;line-height: 30px;font-size:26px;color:blue; }
运行 npm run build 即可
注意：
在注册html 插件时候，不特意使用下面这个属性，打包后的页面，就可以自动引入 生成后的 main.js 文件
chunks:[‘js/a‘],