Webpack common module (js used for each page) compilation, webpackjs

Webpack common module (js used for each page) compilation, webpackjs

1. project directory

 

2. configuration file: webpack. config. js

Var htmlWebpackPlugin = require ('html-webpack-plugin'); var webpack = require ('webpackage'); module. exports = {// entry :'. /src/app. js', entry: {// common module 'common ':['. /src/page/common/index. js'], '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 '}, modul E: {loaders: [{test :/\. js $/, // The following directories do not process exclude:/node_modules/, // only process the following directories include:/src/, loader: "babel-loader ", // The configured target Runtime environment (environment) automatically enables the required babel plug-in query: {presets: ['latest '] }}, // css processes 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 in r Before equire ("autoprefixer"), otherwise require ("autoprefixer") ('postcss-import') (), require ("autoprefixer") ({"browsers ": ["Android> = 4.1", "iOS> = 7.0", "ie> = 8"]})] }}, // less process this part {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 in require ("aut Oprefixer "). Otherwise, require (" autoprefixer ") ('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', // The generated file name filename: 'js/common. js'})]}

 

3. execute commands

npm run webpack

 

4. Execution result

The new directory structure of the project:

Common. js code: