Webpack CommonsChunkPlugin extracts public code,

Webpack CommonsChunkPlugin extracts public code,

1. Project Structure

2. Some code

Module. js

console.log('module.js');

Index. js in the index folder

Require ('../module. js'); console. log ('homepage-index file ');

Index. js in the login folder

 

Require ('../module. js'); console. log ('logon page-index file ');

3. webpack. config. js

Var htmlWebpackPlugin = require ('html-webpack-plugin'); var webpack = require ('webpackage'); module. exports = {// entry :'. /src/app. js', entry: {'login ':['. /src/page/login/index. js'], 'index ':['. /src/page/index. js']}, output: {path: _ dirname + '/dist', filename: 'js/[name]. js '}, // load external variables or modules into externals: {'jquery': 'window. jQuery '}, module: {loaders: [{test :/\. js $/, // The following directory does not process exclude :/Node_modules/, // only process the following directories: include:/src/, loader: "babel-loader", // configure the target Runtime environment (environment) automatically enable the required babel plug-in query: {presets: ['latest '] }}, // css to process this section {test :/\. css $/, use: ['style-loader ', {loader: 'css-loader', options: {// @ important introduces css importLoaders: 1 }}, {loader: 'postcss-loader ', options: {plugins: function () {return [// be sure to write it in front of require ("autoprefixer"); otherwise, require ("autoprefixer") Invalid require ('postcss-import') (), require ("autoprefixer") ({"browsers": ["Android> = 4.1", "iOS> = 7.0 ", "ie >=8"]})] }}]}, // less process this piece {test :/\. less $/, use: ['style-loader ', {loader: 'css-loader', options: {// @ important introduces css importLoaders: 1 }}, {loader: 'postcss-loader ', options: {plugins: function () {return [// be sure to write it in front of require ("autoprefixer"); otherwise, require ("autoprefixer ") invalid require ('Postcss-import') (), require ("autoprefixer") ({"browsers": ["Android >=4.1", "iOS >=7.0 ", "ie> = 8"]})] }}, 'less-loader ']}, // process the html template {test :/\. html $/, use: {loader: 'html-loader '}, // process the image {test :/\. (png | jpg | gif | svg) $/I, loaders: [// base64 for images smaller than 8 K. For images larger than 10 K, use file-loader 'url-loader? Limit = 8192 & name: img/[name]-[hash: 5]. [ext] ', // image Compression 'image-webpack-loader']}, plugins: [new htmlWebpackPlugin ({template: 'index.html ', filename: 'index.html '}), // independent general modules to js/base. js new webpack. optimize. commonsChunkPlugin ({// block name of the public block: 'common', filename: 'js/base. js'})]}

4. Test

(1) webpack. config. js

// Independent general module to js/base. js new webpack. optimize. CommonsChunkPlugin ({// block name of public block: 'common '})

 

Output:

 

(2)

// Independent general modules to js/base. js new webpack. optimize. commonsChunkPlugin ({// block name of the public block: 'common', // The generated file name filename: 'js/common. js '})