preface

Recently, I was idle and had nothing to do, so I scanned the official website of Webpack again and optimized the multi-page project based on the company’s project.

Project address: gitee.com/linyongming…

Multiple entry just configures multiple entries in an entry. Webpack packs files based on entry, so it packs each entry configured separately

The configuration of multi-entry is as follows:

const config = {  
entry: {
    pageOne: './src/pageOne/index.js',
    pageTwo: './src/pageTwo/index.js',
    pageThree: './src/pageThree/index.js'
  }};Copy the code

Common multi-entry problems and optimizations

1. Development environment, packaged with unneeded entry.

Pictured above,

This is just three pages. What if it’s 100 pages? There are serious consequences. So, how do I pack only the entries I currently need?

The most straightforward way is to write only the page entry you need. Let’s say I just need pageOne, that’s fine

 entry: {
    pageOne: './src/pageOne/index.js',
     // pageTwo: './src/pageTwo/index.js',
     // pageThree: './src/pageThree/index.js'
  }Copy the code

But this is too much trouble, if you can solve this problem by command is much more convenient, such as

npm run dev --file=xxxCopy the code

Tell WebPack which entry file I want to pack with file= XXX, and then pack them all with no extra arguments, which kills two birds with one stone.

process.argv

The Process object is a global variable that provides information about and controls the current Node.js process. Since it is a global variable, require() is not required.

The process.argv property returns an array containing the command line arguments that started the Node.js process,

Argv [0] — returns the absolute path of the executable that started the Node.js process. Argv [1] — is the path of the currently executing JavaScript file. The rest of the elements are other command-line arguments

For example, enter node scripts/build.js “web-run-time CJS,web-server-renderer”.

Results:

Console. log(process.argv[0]) // prints D:\ nodejs\ node.exe

Console. log(process.argv[1]) // prints E:\Study_document\vue-resource\vue-dev\scripts\build.js

Console. log(process.argv[2]) // Prints web-runtime-cjs,web-server-renderer

This way, we can get the extra arguments we added to the command line through process.argv

functionGetCmdParas (name) {//process.argv returns an array of runtime environmentsfor (let key in process.argv) {
    if (process.argv[key].indexOf(`--${name}`) > 1) {return process.argv[key].split('=') [1]}}return ' '
}
const page = getCmdParas('page') | |"* *"const file = getCmdParas('file') | |"* *"
const pageUrl = `./src/${file}/main.js`Copy the code

glob

Using the above method we get the pageUrl, which may be the path to a specific file, for example

./src/pageOne/main.jsCopy the code

It could also be a matching path

./ SRC /**/main.js // Indicates that all folders under SRC /main.js are matchedCopy the code

The glob method matches the input path and returns an array of matched file paths.

Glob. sync is asynchronously obtained

Usage:

glob.sync(pageUrl)  //['src/pageOne/main.js'.'src/pageTwo/main.js'. ]Copy the code

So we can use this to dynamically set the entry

const chunks = []
const entries = {}
const htmlWebpackPluginArray = []
glob.sync(pageUrl).forEach(path => {
  //path => ./src/pageOne/main.js
  const chunk = path.split('./src/')[1].split('/main.js'[0] // Get the name of each file. For example, pageOne entries[chunk] = path chunk. push(chunk) const filename = chunk +'.html' // pageOne.html
  const htmlConf = {
    filename: filename,
    // template: path.replace(/.js/g, '.html'),
    inject: 'body'.hash: true,
    chunks: ['commons', the chunk]} / / here using HtmlWebpackPlugin plug-in, generate each entry corresponds to the HTML htmlWebpackPluginArray. Push (new HtmlWebpackPlugin (htmlConf)})Copy the code

// This method is used to obtain shell parameters such as --page= XXXXXX, then you can obtain page= XXXXXX,functionGetCmdParas (name) {//process.argv returns an array of runtime environmentsfor (let key in process.argv) {
    if (process.argv[key].indexOf(`--${name}`) > 1) {return process.argv[key].split('=') [1]}}return ' '}
const page = getCmdParas('page') | |"* *"
const file = getCmdParas('file') | |"* *"
const pageUrl = `./src/${file}/main.js`
const entries = {}
const htmlWebpackPluginArray = []
glob.sync(pageUrl).forEach(path => {  
//path => ./src/pageOne/main.js
  const chunk = path.split('./src/')[1].split('/main.js'[0] // Get the name of each file. PageOne entries[chunk] = path}) module.export={entry:entries}Copy the code

Configuration commands

The last step is to configure your commands

Add it to script of package.json

"build": "npx webpack --config webpack.config.js --file=pageOne"Copy the code

PageOne you can change to the folder name you want to pack

And you’re done.