Webpack Multi-entry configuration

Colleagues set up Vue project, personally recommended the vue-cil of the Vue website, http://cn.vuejs.org/guide/application.html

Following the operation of the official website, we can locally test our project npm run Dev, first of all we want to understand webpack packaging is mainly for JS, see the configuration generated below, the home is index.html, template for index.html, the import file with the Mian.js

 // file build/webpack.base.conf.js  // entry configuration  module.exports  = {entry: {app:  './src/ Main.js '   .... // file build/webpack.dev.conf.js  //    html configuration  new        Htmlwebpackplugin ({filename:  ' index.html '  ' index.html '  true
        

1. The above directory is not able to meet our multi-entry requirements, we hope that the HTML is placed under a views folder, the relevant business application of Vue put together, that's what it looks like

We first simply change our configuration, to adapt to the project structure, and then find the rules, to complete the automatic configuration (index.html)

//file Build/webpack.base.conf.js//Entry ConfigurationModule.exports={entry: {' Index ': './src/view/index/index.js ',    ' Login ': './src/view/login/login.js ',  },  //....//file Build/webpack.dev.conf.js//HTML configuration, index we keep the root directory access path    Newhtmlwebpackplugin ({filename:' Index.html ', Template:'./src/view/index/index.html ', inject:true, chunks: [' Index ']    }),    Newhtmlwebpackplugin ({filename:' Login/login.html ',//http access path Template:'./src/view/login/login.html ',//actual file path inject:true, chunks: [' Login ']    })

2. The rule comes out, we just follow such a JS and HTML correspondence, you can find the file, to do the same configuration

varGlob = require (' Glob '))functiongetentry (Globpath, pathdir) {varFiles =Glob.sync (Globpath); varEntries ={}, entry, dirname, basename, pathname, extname;  for(vari = 0; i < files.length; i++) {Entry=Files[i]; DirName=path.dirname (entry); Extname=path.extname (entry); BaseName=path.basename (entry, extname); Pathname=Path.join (dirname, basename); Pathname= Pathdir? Pathname.replace (Pathdir, "): pathname; Console.log (2, pathname, entry); Entries[pathname]= './' +entry; }    returnentries;}//Our key is not a simple use of the previous code Index,login but the use of Index/index,login/login because consider the login directory and the Register//the file path of \ \ and/With the operating system is also related, need to be awarevarhtmls = Getentry ('./src/view/**/*.html ', ' src\\view\\ ');varEntries = {};varHtmlplugin = []; for(varKeyinchhtmls) {Entries[key]= Htmls[key].replace ('. html ', '. js ')) Htmlplugin.push (Newhtmlwebpackplugin ({filename: (key= = ' Index\\index '? ' index.html ': Key + '. html '), Template:htmls[key], inject:true, chunks: [Key]})}

3. Multi-entry configuration is complete, of course, the following in fact there are public JS extract related configuration, if the project used in the asynchronous loading, that is, require.ensure, placed in a separate directory, to match, according to the above logic reasoning it

Webpack Multi-entry configuration