Javascript 为条目打包不同的名称
如何为不同的输入输出指定不同的Javascript 为条目打包不同的名称,javascript,webpack,frontend,Javascript,Webpack,Frontend,如何为不同的输入输出指定不同的文件名 例如: module.exports = { context: path.resolve(__dirname, 'assets'), entry: { vendor: ['react', 'react-dom', 'lodash', 'redux'], app: './src/app.js' } output: { path: path.resolve(__dirname, (isDevelopment) ? 'dem
文件名
例如:
module.exports = {
context: path.resolve(__dirname, 'assets'),
entry: {
vendor: ['react', 'react-dom', 'lodash', 'redux'],
app: './src/app.js'
}
output: {
path: path.resolve(__dirname, (isDevelopment) ? 'demo' : 'build'),
filename: (isDevelopment) ? '[name].js' : '[name][chunkhash:12].js'
}
}
接收这样的输出
build
-- index.html
-- app.2394035ufas0ue34.js
-- vendor.js
所以浏览器将缓存所有库的vendor.js
。因为我不打算在短期内经常迁移到任何主要的新版本。
并且仍然能够在每次需要更新时中断app.js
的缓存
是否有某种选项将输出设置为
output: {
app: {
...
},
vendor: {
...
},
}
以下是工作代码:
entry: {
'./build/app': './src/app.js',
'./build/vendor': VENDOR_LIBS // or path to your vendor.js
},
output: {
path: __dirname,
filename: '[name].[chunkhash].js'
},
将此代码作为数组的最后一个元素添加到您的网页插件数组中
plugins: [
... // place our new plugin here
]
function() {
this.plugin("done", function(stats) {
const buildDir = __dirname + '/build/';
const fs = require('fs');
var vendorTempFileName = '';
new Promise(function(resolve, reject) {
fs.readdir(buildDir, (err, files) => {
files.forEach(file => {
if (file.substr(0,6) === 'vendor') {
resolve(file);
}
});
});
}).then(function(file) {
fs.rename( buildDir + file, buildDir + 'vendor.js', function(err) {
if ( err ) console.log('ERROR: ' + err);
});
});
});
}
输出应如下所示:
由于浏览器缓存的原因,不使用chunkhash保留文件被认为是不好的做法。对于Webpack 4,我添加了一个快速且脏的done
钩子来重命名我的服务人员脚本:
// Plugin to rename sw-[chunkhash].js back to sw.js
class SwNamePlugin {
apply(compiler) {
compiler.hooks.done.tap("SW Name Plugin", (stats) => {
const swChunk = stats.compilation.chunks.find((c) => c.name === "sw");
fs.rename(path.resolve(outDir, swChunk.files[0]), `${outDir}/sw.js`);
});
}
}
plugins.push(new SwNamePlugin());
这消除了警告弃用警告:Tapable.plugin已弃用。改为在.hooks上使用新的API
您将看到以下loelsonk的答案。这仍然不能解决我的不同命名问题。我需要将vendor.js
设置为[name].js
和app.js
设置为[name].[chunkhash].js
我刚刚更新了答案。如果你想用的话,我测试过了。