webpack4.x configuration detailed, multi-page, multi-entry, multi-exit, new features new pit!!

It's 51 and still single. There is still time to be single, and to improve yourself a lot.

It took me almost a day to re-webpack4.x the usual configuration.

GitHub detailed code address, like please give star. Https://github.com/pomelott/webpack4.x_Demo

Basically the usual configuration is familiar with, in general, in order to counter-parcel, webpack starting from the 4.x, is moving toward the simplification of the configuration file in the direction of the development.

First, look at the new features of Webpack4.

1.webpack is not used alone, and the 4.x version moves many commands into the WEBPACK-CLI package. The following two steps are generally required if you want to use Webpack for local installation

(1) Global installation WEBPACK,WEBPACK-CLI

(2) Partial installation WEBPACK,WEBACK-CLI

2. Added pattern differentiation (development,production):

The developer can switch mode with Webpack--mode development/production, or mode selection by adding a mode configuration item in the configuration file.

Development: Development mode, packaging default uncompressed code, default open code debugging

Production: Production mode, on-line use, packaging compression code, do not open code debugging.

To turn on code debugging, add devtool configuration items to the configuration file

Devtool: "Source-map"

3. The fixed entry directory is SRC, with the ingress default file Index.js (webpack4.x to the first step in the direction of the 0 configuration).

When only the SRC directory and the SRC directory are index.js, there is no need to add the webpack.config.js,4.x version and the packaged file will be placed in the new Dist directory.

4. js code to be removed, you need to add optimization configuration item in config

  optimization: {        splitchunks: {            cachegroups: {                Vendor:                    {"Initial",                    " jquery ",                    true                }     }}}

Second, 4.x version of the personal habits of the project directory structure, such as the entire directory is completely hands-on, not with scaffolding modified.

Iii. key points of the configuration file

(1) When the project requires multiple file entries, the entry needs to be added in JSON format

    entry: {        //  Multi-entry file        A: './src/js/index.js'        ,'./src/js/ Index2.js ',        ' jquery '    }

(2) When a multi-entry file corresponds to a multi-export file, the name of the export file should correspond to the key of the entry

    output: {        ' dist '),        //  Package Multi-export file        // generate A.bundle.js  b.bundle.js  jquery.bundle.js        filename: './js/[name].bundle.js '     }

(3) Multiple HTML files require new multiple Htmlwebpackplugin instances

 //  automatically generate HTML templates  new   Htmlwebpackplugin ({filename: " index.html ", title:  "xxxx"  ' a '," jquery "], //  Template: "./src/index.html"  new   Htmlwebpackplugin ({ Chunks: [ ' B '  "index2.html" , Title:  "Page2" "./src/index2.html " })

(4) When you extract JS by dependency, the 4.x version is completely different from the previous

    //  extract JS,LIB1 name can be changed     optimization: {        splitchunks: {            cachegroups: {                lib1:                    { "initial",                    "jquery",                    true                }     }}}

(5) When introducing a third-party library, it is recommended to expose it globally. This way, when packaged, 4.x is packaged as needed.

        //  Global Exposure Unified portal, other files can be        used directly New Webpack. Provideplugin ({            "jquery"        }),

It will be very convenient after you get used to webpack. Don't be afraid of problems, and the sense of accomplishment after solving them will make you stronger. GitHub on the 4.x version of the demo, welcome to the small partners to ask questions, if you feel good, please give stars!!

webpack4.x configuration detailed, multi-page, multi-entry, multi-exit, new features new pit!!