webpack脚手架增加版本号

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;

//注意:
  htmlWebpackIncludeAssetsPlugin要放在 HtmlWebpackPlugin插件的后面
 注意在dev或production中 插件 HtmlWebpackPlugin 都要放在其他插件前面,否则报错!!
  new HtmlWebpackPlugin({
      template: path.resolve(__dirname, '../src/index.html'),
   }),

原文地址:https://www.cnblogs.com/xiaozhumaopao/p/11742547.html