I'm sorry for my English is low,hope you understand. I learning how to use webpack build my project.The following is config for two entry files:
entry:{
main: {
import: "./src/main.js",
filename:"main/[name].[hash:6][ext]",
dependOn:"lodash"
},
index:{
import:"./src/index.js",
filename:"index/[name].[hash:6][ext]",
dependOn:"lodash"
},
lodash: {import: [ "lodash" ],filename:"lodash/[name].[hash:6].js" }
},
I think it will generator two files after I execute the npm run build script,for example,main.a24fc1.js and index.b42afd.js ,their name should look like that.
But in result they is this:
|- build
|- index
|- index.81c047[ext]
|- main
|- main.81c047[ext]
In their filename config,used [ext] placeholders but it's not take effect.I don't know why it happended,becouse my config the same as in webpack document's demo.
// This is webpack demo config:
module.exports = {
//...
entry: {
app: './app.js',
home: { import: './contact.js', filename: 'pages/[name][ext]' },
about: { import: './about.js', filename: 'pages/[name][ext]' },
},
};
I are unable solve the problem...Thank to everyone helped me!(Please tell me if there are has any English mistakes in this article.^_^)
You have specified the output to be main/[name].[hash:6][ext] hence the folder structure. Just specify it as [name].[hash:6].js and you will get your desired structure.
entry:{
main: {
import: "./src/main.js",
filename:"[name].[hash:6].js",
dependOn:"lodash"
},
index:{
import:"./src/index.js",
filename:"[name].[hash:6].js",
dependOn:"lodash"
},
lodash: {import: [ "lodash" ],filename:"[name].[hash:6].js" }
},
Note that the filename property in the entry block is extracted from output.filename(Source) which does not support [ext]. (Source - Table - Substitutions available on File-level)