webpack打包多个js合并成默认main.js⽂件步骤
1. 这种⽅式，把多个 js ⾃动打包成默认的 main.js ，直接在 dist ⽂件夹⾥⾯，和⽣成的 html ⽂件同级
2. ⽽且，html 插件⾥，没有引⼊也会⾃动引⼊ 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 插件，新版本都采⽤这个
// mode:"development" , //开发模式，没有对js等⽂件压缩，默认⽣成的是压缩⽂件
mode : 'production' ,
entry:[
'./htmlDist/cn/js/A.js',
'./htmlDist/cn/js/B.js',
],
output:{
// __dirname 表⽰fig.js 这个配置⽂件的位置
// filename:'[name].js', //输⼊的⽂件名是什么，⽣成的⽂件名也是什么，默认配置
filename:'[name].[chunkhash:8].js',//增加8位的哈希值，⽣成新的动态⽂件，
solve(__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,//清理内容为空的元素
},svg文件怎么生成
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) {
/
/ 提供资源⽂件名的断⾔函数
dsWith('.css') || dsWith('.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'],
打包js ⽂件时候，要注意, 把匿名函数变成变成写法，否则容易报错，如下：
正常代码：
function fn(){
}
要变成如下代码：变成全局变量的形式
// 保留有效数字
window.fixNuberByNeed = function (cross_secion){ .......
}
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论