Detailed explanation of webpack multi-page configuration records, detailed explanation of webpack page

Detailed explanation of webpack multi-page configuration records, detailed explanation of webpack page

I have also written a webpack learning record before. The project requires a common webpack multi-page configuration, so I started my webpack configuration in line with the principle that one line can be written.

Set directory structure

First, I only need the development environment (including automatic updates) and the packaging environment. The initial directory structure is as follows:

The app mainly writes Business Code, webpack configuration and some packaging and Development configurations in config. After some consideration, the directory structure is as follows:

 

App-libs # third-party plug-in library, which can be css or js, eg: jq-static # public static resource folder-temlates # template folder-*** # module folder-css # the css file exclusive to the current module must be in the index. in js, the import-html # template file is planned to support html and pug template languages-index. js # current module entry file

Configure webpack

After the file is created, create webpack. config. js in the root directory.

Then, install webpack and webpack-dev-server globally.

npm i webpack webpack-dev-server -g

Then install

npm i webpack webpack-dev-server --save-dev

In this way, our project can introduce webpack and use the related functions of webpack-dev-server, webpack. config. js content is very simple, that is, loading different webpack configurations based on the current environment specified in the environment variable:

// This is manually specified as the production environment process. env. NODE_ENV = process. env. NODE_ENV? Process. env. NODE_ENV: 'product'; // obtain the Environment command and remove the leading and trailing spaces const env = process. env. NODE_ENV.replace (/(\ s * $) | (^ \ s *)/ig, ""); // reference the related configuration file module based on environment variables. exports = require ('. /config/webpack. config. $ {env }. js ')

Create a webpack In the config folder. config. dev. js and webpack. config. product. js represents the configuration of the development environment and the configuration of the generated package file. Considering that many configurations are the same, create a webpack. config. base. js is used to write unified configurations.

Webpack. config. dev. js and webpack. config. product. the difference between js is a runtime configuration, a file-generated configuration, in short, is that the development environment is different from the configuration of webpack-dev-server, the production environment is compressed, map and other configurations

The webpack. config. base. js file is the main course for webpack configuration, including entry, output, modules, plugins, etc.

Obtain the folders of all entry files

Function getEntryDir () {let globPath = 'app/templates /**/*. '+ config. tplLang // (\/| \) is written to make it compatible with the directory paths of windows and mac systems. let pathDir = 'app (\/| \\\\) (. *?) (\/| \) Html 'let files = glob. sync (globPath) let dirname, entries = [] for (let I = 0; I <files. length; I ++) {dirname = path. dirname (files [I]) entries. push (dirname. replace (new RegExp ('^' + pathDir), '$ 2')} return entries ;}

Inject entry and generate HTMLWebpackPlugin

getEntryDir()  .forEach( ( page ) => {    let moduleName = page.split( '/' )    let moduleNameStr = moduleName[ moduleName.length - 1 ]    const htmlPlugin = new HTMLWebpackPlugin( {      filename: `${moduleNameStr}.html`,      template: path.resolve( __dirname, `../app/${page}/html/index.${config.tplLang}` ),      chunks: [ moduleNameStr, 'vendors' ],    } );    HTMLPlugins.push( htmlPlugin );    Entries[ moduleNameStr ] = path.resolve( __dirname, `../app/${page}/index.js` );  } )

For instructions on HTMLWebpackPlugin usage, refer to the full solution of html-webpack-plugin usage and the official documentation.

Third-party library portal automatically obtained

Function getVendors () {let globPath = 'app/$ {config. libraryDir }/**/*. * 'let files = glob. sync (globPath) let libsArr = [] files. forEach (v, I) => {libsArr. push ('. /'+ v)}) return libsArr} Entries ['vendor'] = getVendors () // third-party class library

For details about the multi-page portal and third-party library configuration, refer to this webpack Chinese site document Separation Application (app) and third-party library (vendor) Portal.

Output Configuration

output: { filename: "static/js/[name].bundle.[hash].js", path: path.resolve( __dirname, config.devServerOutputPath )}

Merge webpack configurations

A webpack plug-in webpack-merge is mainly used to merge the separately configured config, separate the production environment and debugging environment.

The github address is webpack-multi-skeleton. please correct me!

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.