From d029a67cd1bb63ee7d8e928d94707967462dd355 Mon Sep 17 00:00:00 2001 From: neverland Date: Fri, 30 Aug 2019 16:05:28 +0800 Subject: [PATCH] build: split chunk (#4303) --- build/release-site.sh | 2 +- build/{webpack.dev.js => webpack.base.js} | 32 +------------ build/webpack.pkg.js | 5 +- build/webpack.site.dev.js | 46 +++++++++++++++++++ .../{webpack.site.js => webpack.site.prd.js} | 5 +- package.json | 5 +- yarn.lock | 7 +++ 7 files changed, 64 insertions(+), 38 deletions(-) rename build/{webpack.dev.js => webpack.base.js} (58%) create mode 100644 build/webpack.site.dev.js rename build/{webpack.site.js => webpack.site.prd.js} (67%) diff --git a/build/release-site.sh b/build/release-site.sh index 9d202ea66..585ac6fa7 100644 --- a/build/release-site.sh +++ b/build/release-site.sh @@ -1,7 +1,7 @@ #!/usr/bin/env sh rm -rf docs/dist -npx cross-env NODE_ENV=production webpack --config build/webpack.site.js +npx cross-env NODE_ENV=production webpack --config build/webpack.site.prd.js superman-cdn /vant ./docs/dist/*.js diff --git a/build/webpack.dev.js b/build/webpack.base.js similarity index 58% rename from build/webpack.dev.js rename to build/webpack.base.js index 1a996814d..a8f7a6a27 100644 --- a/build/webpack.dev.js +++ b/build/webpack.base.js @@ -1,24 +1,8 @@ const path = require('path'); -const HtmlWebpackPlugin = require('html-webpack-plugin'); const { VueLoaderPlugin } = require('vue-loader'); module.exports = { mode: 'development', - entry: { - 'vant-docs': './docs/site/desktop/main.js', - 'vant-mobile': './docs/site/mobile/main.js' - }, - output: { - path: path.join(__dirname, '../docs/dist'), - publicPath: '/', - chunkFilename: 'async_[name].js' - }, - devServer: { - open: true, - progress: true, - host: '0.0.0.0', - stats: 'errors-only' - }, resolve: { extensions: ['.js', '.ts', '.tsx', '.vue', '.less'] }, @@ -69,19 +53,5 @@ module.exports = { } ] }, - plugins: [ - new VueLoaderPlugin(), - new HtmlWebpackPlugin({ - chunks: ['vant-docs'], - template: path.join(__dirname, '../docs/site/desktop/index.html'), - filename: 'index.html', - inject: true - }), - new HtmlWebpackPlugin({ - chunks: ['vant-mobile'], - template: path.join(__dirname, '../docs/site/mobile/index.html'), - filename: 'mobile.html', - inject: true - }) - ] + plugins: [new VueLoaderPlugin()] }; diff --git a/build/webpack.pkg.js b/build/webpack.pkg.js index 214bcc1e5..8155c53b1 100644 --- a/build/webpack.pkg.js +++ b/build/webpack.pkg.js @@ -1,9 +1,10 @@ const path = require('path'); -const config = require('./webpack.dev.js'); +const merge = require('webpack-merge'); +const config = require('./webpack.base'); const isMinify = process.argv.indexOf('-p') !== -1; -module.exports = Object.assign(config, { +module.exports = merge(config, { mode: 'production', entry: { vant: './es/index.js' diff --git a/build/webpack.site.dev.js b/build/webpack.site.dev.js new file mode 100644 index 000000000..85d93759a --- /dev/null +++ b/build/webpack.site.dev.js @@ -0,0 +1,46 @@ +const path = require('path'); +const merge = require('webpack-merge'); +const config = require('./webpack.base'); +const HtmlWebpackPlugin = require('html-webpack-plugin'); + +module.exports = merge(config, { + entry: { + 'vant-docs': './docs/site/desktop/main.js', + 'vant-mobile': './docs/site/mobile/main.js' + }, + devServer: { + open: true, + progress: true, + host: '0.0.0.0', + stats: 'errors-only' + }, + output: { + path: path.join(__dirname, '../docs/dist'), + publicPath: '/', + chunkFilename: 'async_[name].js' + }, + optimization: { + splitChunks: { + cacheGroups: { + chunks: { + chunks: 'all', + minChunks: 2, + minSize: 0, + name: 'chunks' + } + } + } + }, + plugins: [ + new HtmlWebpackPlugin({ + chunks: ['chunks', 'vant-docs'], + template: path.join(__dirname, '../docs/site/desktop/index.html'), + filename: 'index.html' + }), + new HtmlWebpackPlugin({ + chunks: ['chunks', 'vant-mobile'], + template: path.join(__dirname, '../docs/site/mobile/index.html'), + filename: 'mobile.html' + }) + ] +}); diff --git a/build/webpack.site.js b/build/webpack.site.prd.js similarity index 67% rename from build/webpack.site.js rename to build/webpack.site.prd.js index f3235bd0f..141ab6521 100644 --- a/build/webpack.site.js +++ b/build/webpack.site.prd.js @@ -1,7 +1,8 @@ const path = require('path'); -const config = require('./webpack.dev.js'); +const merge = require('webpack-merge'); +const config = require('./webpack.site.dev'); -module.exports = Object.assign(config, { +module.exports = merge(config, { mode: 'production', output: { path: path.join(__dirname, '../docs/dist'), diff --git a/package.json b/package.json index 4255387f5..f39aa1e35 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,7 @@ ], "scripts": { "bootstrap": "yarn || npm i", - "dev": "npm run build:entry && webpack-dev-server --config build/webpack.dev.js", + "dev": "npm run build:entry && webpack-dev-server --config build/webpack.site.dev.js", "lint": "eslint ./src --ext .js,.vue,.ts,.tsx && stylelint \"src/**/*.less\" --fix", "build:entry": "node build/build-entry.js", "build:changelog": "vant changelog ./docs/markdown/changelog.generated.md --tag v2.1.0", @@ -112,7 +112,8 @@ "vue-template-compiler": "2.6.10", "webpack": "4.39.1", "webpack-cli": "^3.3.6", - "webpack-dev-server": "3.7.2" + "webpack-dev-server": "3.7.2", + "webpack-merge": "^4.2.2" }, "sideEffects": [ "es/**/style/*", diff --git a/yarn.lock b/yarn.lock index bfcbab910..88d953dba 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10203,6 +10203,13 @@ webpack-log@^2.0.0: ansi-colors "^3.0.0" uuid "^3.3.2" +webpack-merge@^4.2.2: + version "4.2.2" + resolved "https://registry.yarnpkg.com/webpack-merge/-/webpack-merge-4.2.2.tgz#a27c52ea783d1398afd2087f547d7b9d2f43634d" + integrity sha512-TUE1UGoTX2Cd42j3krGYqObZbOD+xF7u28WB7tfUordytSjbWTIjK/8V0amkBfTYN4/pB/GIDlJZZ657BGG19g== + dependencies: + lodash "^4.17.15" + webpack-sources@^1.4.0, webpack-sources@^1.4.1: version "1.4.1" resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.4.1.tgz#b91b2c5b1c4e890ff50d1d35b7fa3657040da1da"