Implementation of many-to-many configuration in webpack (code attached)

The content of this article is about the implementation of many-to-many configuration in webpack (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Webpack is an excellent packaging platform that can package all static resources such as sass, pictures, fonts, etc. into js

The author has recently been transforming a traditional static website. In order to reduce http request, one of the strategies is to package multiple static resources (such as fonts, css, pictures, js) corresponding to a single static web page into a js file, and then associate each html with the corresponding independent js That's it

I found relevant information on webpack configuration on the Internet. The corresponding relationships between html and js are "one-to-one" and "many-to-one", but there is rarely "many-to-many". Implementation

But after some tossing, I finally configured it. Here I will share the syntax related to the configuration file

//entry入口文件支持json的形式
    entry: {
            "static/pc/js/index": "./webStatic/pc/js/index.js",        
            "static/pc/js/article-details": "./webStatic/pc/js/article-details.js",        
            "static/mobile/js/index": "./webStatic/mobile/js/index.js",        
            "static/mobile/js/article-details": "./webStatic/mobile/js/article-details.js"
    },
    output: {
        path: path.resolve(__dirname, ''),        
        //filename前面我们可以使用一个变量[name],这个就表示获取entry里面的key作为文件名加在前面
        filename: '[name].js'
    }

Configuration instructions

The webStatic in the root directory is the source code The placement location, the location where static is output for js in the root directory

The configuration file has a total of four mappings: webStatic/pc/js/index.js is output to static/pc/js/index.js, ./webStatic/pc/js/article-details.js outputs to static/pc/js/article-details.js, ./webStatic/mobile/js/index.js outputs to static/mobile/js/index.js, ./webStatic/mobile/js/article-details.js is output to static/mobile/js/article-details.js

To add other mappings later, just add them according to the format in the entry (right Just copy it)

Summary:

To maintain an old website, it is not realistic to rewrite all the pages using react or vue components in a short time, but using webpack to package it is still possible It is feasible. After configuring webpack with multiple entrances and multiple exits, you only need to make a few changes to the website, and you can happily write websites using scss, es6, and other syntaxes

Related recommendations:

Multi-entry project scaffolding implemented by webpack

Webpack multi-entry file page packaging details

The above is the detailed content of Implementation of many-to-many configuration in webpack (code attached). For more information, please follow other related articles on the PHP Chinese website!