一、环境搭建
1、安装
mkdir webpack-li && cd webpack-li npm init -y
npm install --save-dev webpack webpack-dev-middleware webpack-dev-server webpack-manifest-plugin webpack-merge xml-loader clean-webpack-plugin css-loader csv-loader express file-loader html-webpack-plugin style-loader uglifyjs-webpack-plugin lodash
2、添加文件夹src,在src下面添加文件much1.js
mkdir src
import _ from 'lodash'; function component() { var element = document.createElement('div'); // Lodash(目前通过一个 script 脚本引入)对于执行这一行是必需的 element.innerHTML = _.join(['Hello111', 'webpack'], ' '); element.classList.add('hello'); element.classList.add('el-icon-upload'); return element; } document.body.appendChild(component());
3、编辑webpack.config.js
const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const CleanWebpackPlugin = require('clean-webpack-plugin'); // var ManifestPlugin = require('webpack-manifest-plugin'); const webpack = require('webpack'); const UglifyJSPlugin = require('uglifyjs-webpack-plugin'); module.exports = { entry: { index: './src/much1.js' }, output: { filename: '[name].[chunkhash].js', path: path.resolve(__dirname, 'dist') }, // devtool: 'inline-source-map',//生成内页source map 文件 // devServer: { // contentBase: './dist', // hot: true // }, module: { rules: [{ test: /\.css$/, use: [ 'style-loader', 'css-loader' ] }, { test: /\.(png|svg|jpg|gif)$/, use: [ 'file-loader' ] }, { test: /\.(woff|woff2|eot|ttf|otf)$/, use: [ 'file-loader' ] }, { test: /\.(csv|tsv)$/, use: [ 'csv-loader' ] }, { test: /\.xml$/, use: [ 'xml-loader' ] } ] }, plugins: [ new CleanWebpackPlugin(['dist']), // new ManifestPlugin(),//编译前后文件映射 // new UglifyJSPlugin(),//js压缩 new HtmlWebpackPlugin({ title: 'Output Management' }), // new webpack.optimize.CommonsChunkPlugin({ // name: 'common' // 指定公共 bundle 的名称。 // }), // new webpack.NamedModulesPlugin(), // new webpack.HotModuleReplacementPlugin() ], };
4、编译—-1个文件,引入modules模块–lodash
webpack
二、测试过程
1、将webpack.config.js中的new webpack.optimize.CommonsChunkPlugin 代码放开,再次执行;生成的common.*.js中,主要包含文件关系window[“webpackJsonp”],默认只是提炼webpack 的样板(boilerplate)
Hash: 901d6379c09764da9d03 Version: webpack 3.10.0 Time: 586ms Asset Size Chunks Chunk Names index.708570a5d9c1925e6cba.js 543 kB 0 [emitted] [big] index common.d6716ad7b6bf34deabfe.js 5.82 kB 1 [emitted] common index.html 285 bytes [emitted] [0] ./src/much1.js 1.13 kB {0} [built] [2] (webpack)/buildin/global.js 509 bytes {0} [built] [3] (webpack)/buildin/module.js 517 bytes {0} [built] + 1 hidden module Child html-webpack-plugin for "index.html": 1 asset [2] (webpack)/buildin/global.js 509 bytes {0} [built] [3] (webpack)/buildin/module.js 517 bytes {0} [built] + 2 hidden modules
2、增加much2.js文件
import _ from 'lodash'; console.log( _.join(['Another', 'module', 'loaded!'], ' ') );
更改webpack.config.js
entry: { much1: './src/much1.js', much2: './src/much2.js' },
执行编译,生成的common.*.js中,包含文件关系window[“webpackJsonp”],以及 公共插件lodash–2个文件,引入modules模块–lodash
Hash: a33a11dba68a5a50d0c1 Version: webpack 3.10.0 Time: 698ms Asset Size Chunks Chunk Names much2.e93f8a1f67bb483eeb47.js 537 bytes 0 [emitted] much2 much1.b426830f89fd7baaf423.js 1.58 kB 1 [emitted] much1 common.8a1f8f7618e51d034b44.js 547 kB 2 [emitted] [big] common index.html 361 bytes [emitted] [1] ./src/much1.js 1.13 kB {1} [built] [2] (webpack)/buildin/global.js 509 bytes {2} [built] [3] (webpack)/buildin/module.js 517 bytes {2} [built] [4] ./src/much2.js 88 bytes {0} [built] + 1 hidden module Child html-webpack-plugin for "index.html": 1 asset [2] (webpack)/buildin/global.js 509 bytes {0} [built] [3] (webpack)/buildin/module.js 517 bytes {0} [built] + 2 hidden modules
3、修改much1.js的文件内容
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
执行编译,发现common..js 和 much1..js的版本号发生改变
Hash: 017f08627b69bf79219d Version: webpack 3.10.0 Time: 655ms Asset Size Chunks Chunk Names much2.e93f8a1f67bb483eeb47.js 537 bytes 0 [emitted] much2 much1.f16da266b64d94bdfd24.js 1.58 kB 1 [emitted] much1 common.d2f18d59fa51e749bf16.js 547 kB 2 [emitted] [big] common index.html 361 bytes [emitted] [1] ./src/much1.js 1.13 kB {1} [built] [2] (webpack)/buildin/global.js 509 bytes {2} [built] [3] (webpack)/buildin/module.js 517 bytes {2} [built] [4] ./src/much2.js 88 bytes {0} [built] + 1 hidden module Child html-webpack-plugin for "index.html": 1 asset [2] (webpack)/buildin/global.js 509 bytes {0} [built] [3] (webpack)/buildin/module.js 517 bytes {0} [built] + 2 hidden modules
4、增加math.js
export function square(x) { return x * x; } export function cube(x) { return x * x * x; }
更改much1.js
import _ from 'lodash'; import { cube } from './math.js'; function component() { var element = document.createElement('div'); // Lodash(目前通过一个 script 脚本引入)对于执行这一行是必需的 element.innerHTML = _.join(['Hello', 'webpack'], ' '); element.classList.add('hello'); element.classList.add('el-icon-upload'); var element = document.createElement('pre'); element.innerHTML = [ 'Hello webpack!', '5 cubed is equal to ' + cube(5) ].join('\n\n'); return element; } document.body.appendChild(component());
编译执行–2个文件,其中一个引入第3个js, math.js被编译在much1.*.js
5、在上一步的基础上,修改much2.js
import _ from 'lodash'; import { cube } from './math.js'; console.log( _.join(['Another', 'module', 'loaded!'], ' ') );
编译执行–2个文件,都引入第3个js,math.js被编译在common.*.js,默认只是提炼webpack 的样板(boilerplate),以及被2个及以上文件引用过的js
6、修改webpack.config.js
new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', minChunks: function (module, count) { // any required modules inside node_modules are extracted to vendor return ( module.resource && /\.js$/.test(module.resource) && module.resource.indexOf( path.join(__dirname, './node_modules') ) === 0 ) } }),
再次编译,生成的common..js中,只包含文件关系window[“webpackJsonp”] 和 lodash,只有node_modules中的模块被打包进common..js
7、修改webpack.config.js,再增加
new webpack.optimize.CommonsChunkPlugin({ name: 'manifest', chunks: ['common'] }),
编译执行,生成的common..js中,只包含文件关系window[“webpackJsonp”] ,common..js中包含 lodash
Hash: e89c001c2ded3524d449 Version: webpack 3.10.0 Time: 1441ms Asset Size Chunks Chunk Names common.6b94cc3a187b7be511ae.js 541 kB 0 [emitted] [big] common much2.2d5b108f2c7292042637.js 914 bytes 1 [emitted] much2 much1.e5fff3acc8b12de04f6e.js 1.96 kB 2 [emitted] much1 manifest.e0257ac8e9e9948ace74.js 5.88 kB 3 [emitted] manifest index.html 440 bytes [emitted] [0] ./src/math.js 94 bytes {1} {2} [built] [2] ./src/much1.js 1.11 kB {2} [built] [3] (webpack)/buildin/global.js 509 bytes {0} [built] [4] (webpack)/buildin/module.js 517 bytes {0} [built] [5] ./src/much2.js 122 bytes {1} [built] + 1 hidden module Child html-webpack-plugin for "index.html": 1 asset [2] (webpack)/buildin/global.js 509 bytes {0} [built] [3] (webpack)/buildin/module.js 517 bytes {0} [built] + 2 hidden modules
8、修改much1.js
element.innerHTML = _.join(['Hello33333', 'webpack'], ' ');
编译执行,只有much1..js 和 manifest..js 的版本号发送变化
Hash: 62d9c993ba573fda02fc Version: webpack 3.10.0 Time: 705ms Asset Size Chunks Chunk Names common.6b94cc3a187b7be511ae.js 541 kB 0 [emitted] [big] common much2.2d5b108f2c7292042637.js 914 bytes 1 [emitted] much2 much1.33e3d1b003899654d18d.js 1.97 kB 2 [emitted] much1 manifest.cec9b6b2718268e923f3.js 5.88 kB 3 [emitted] manifest index.html 440 bytes [emitted] [0] ./src/math.js 94 bytes {1} {2} [built] [2] ./src/much1.js 1.11 kB {2} [built] [3] (webpack)/buildin/global.js 509 bytes {0} [built] [4] (webpack)/buildin/module.js 517 bytes {0} [built] [5] ./src/much2.js 122 bytes {1} [built] + 1 hidden module Child html-webpack-plugin for "index.html": 1 asset [2] (webpack)/buildin/global.js 509 bytes {0} [built] [3] (webpack)/buildin/module.js 517 bytes {0} [built] + 2 hidden modules
三、测试分析
1、webpack.optimize.CommonsChunkPlugin 默认提炼代码:webpack打包逻辑,在两个及以上页面出现过引入的js
2、vue-cli打包,使用了两次CommonsChunkPlugin——
new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', minChunks: function (module, count) { // any required modules inside node_modules are extracted to vendor return ( module.resource && /\.js$/.test(module.resource) && module.resource.indexOf( path.join(__dirname, '../node_modules') ) === 0 ) } }), // extract webpack runtime and module manifest to its own file in order to // prevent vendor hash from being updated whenever app bundle is updated new webpack.optimize.CommonsChunkPlugin({ name: 'manifest', chunks: ['vendor'] })
第一次,将从node_modules引入的js文件打包到verdor.js;第二次,从第一步的verdor.js文件中抽离出webpack打包逻辑,形成manifest.js
效果:优化页面性能。第一次打包的verdor.js变化几率较小,可以长久的存储在浏览器缓存中;第二次分离出来的逻辑manifest.js变化几率大,更新时重新加载js耗用的流量少,提升页面打开性能
劣势:如果是多页面系统,verdor.js包含大量的公用js,某些可能是其他页面不需要使用的