webpack脚手架增加版本号

Posted 2021-03-24 小猪冒泡

1.product模式下，新增版本号：
1）common.js文件中，输出的文件路径要跟着变化

output: {
  filename: ‘js/[name].js‘,
  path: path.resolve(__dirname, ‘../dist/‘+config.version+‘/‘),
  publicPath: config.publicPath + ‘/‘+config.version+‘/‘,
},

2） 插件中的html也要修改html的路径
new HtmlWebpackPlugin({
    template: path.resolve(__dirname, ‘../src/index.html‘),
    filename: path.resolve(__dirname, ‘../dist/index.html‘),
}),

3） production文件
const config = require(‘../package.json‘);
let vendorVersion = config.vendorVersion? config.vendorVersion :‘‘;
插件中新增
new CopyWebpackPlugin([  //文件复制到打包的 dist/lib 文件夹下
    { from: path.join(__dirname, "../static/libVendor.dll.js"), to: path.join(__dirname, "../dist/"+vendorVersion+"/lib/libVendor.dll.js") }
]),
new htmlWebpackIncludeAssetsPlugin({ //这个插件是把vue.dll.js 插入到 html 中
    assets:[vendorVersion+‘/lib/libVendor.dll.js‘],
    publicPath:config.publicPath,
    append:false
}),

--------------------
2. dev模式下
common.js 文件
1) 输出文件的公共路径改为跟路径:/
output.publicPath:‘/‘
2) 插件中去掉 filename
new HtmlWebpackPlugin({
    template: path.resolve(__dirname, ‘../src/index.html‘),
    //filename: path.resolve(__dirname, ‘../dist/index.html‘),
}),
因为webpack-dev-server 走的是内存中的代码，设置html模版即可，不要设置filename（即输出路径），
否则找不到html；