From 69e44a0b684da4abf08206275df414a9bc008843 Mon Sep 17 00:00:00 2001 From: ClarkXia Date: Mon, 26 Aug 2019 21:19:57 +0800 Subject: [PATCH 1/4] fix: webpack config for dll plugin --- packages/ice-plugin-dll/CHANGELOG.md | 5 +++ packages/ice-plugin-dll/README.md | 24 +++++++++++ packages/ice-plugin-dll/index.js | 18 ++++++--- packages/ice-plugin-dll/lib/buildDll.js | 40 +++++++++---------- .../ice-plugin-dll/lib/config/webpack.dll.js | 5 ++- packages/ice-plugin-dll/package.json | 2 +- 6 files changed, 65 insertions(+), 29 deletions(-) create mode 100644 packages/ice-plugin-dll/CHANGELOG.md create mode 100644 packages/ice-plugin-dll/README.md diff --git a/packages/ice-plugin-dll/CHANGELOG.md b/packages/ice-plugin-dll/CHANGELOG.md new file mode 100644 index 0000000..6b5a3c4 --- /dev/null +++ b/packages/ice-plugin-dll/CHANGELOG.md @@ -0,0 +1,5 @@ +# Changelog + +## 0.1.0 + +- [feat] 完成初始版本基础功能 \ No newline at end of file diff --git a/packages/ice-plugin-dll/README.md b/packages/ice-plugin-dll/README.md new file mode 100644 index 0000000..4c6b35e --- /dev/null +++ b/packages/ice-plugin-dll/README.md @@ -0,0 +1,24 @@ +## ice-plugin-dll + +ice plugin that uses Webpack DllPlugin + +## Install + +```bash +$ npm install ice-plugin-dll --save-dev +``` + +## Usaeg + +```js +// ice.config.js +module.exports = { + ... + plugins: [ + 'ice-plugin-dll', + ], + alias: { + ... +}; + +``` \ No newline at end of file diff --git a/packages/ice-plugin-dll/index.js b/packages/ice-plugin-dll/index.js index 8c1459f..e5fae93 100644 --- a/packages/ice-plugin-dll/index.js +++ b/packages/ice-plugin-dll/index.js @@ -2,12 +2,18 @@ const webpack = require('webpack'); const path = require('path'); const buildDll = require('./lib/buildDll'); -module.exports = async ({ chainWebpack, context, log }, dllOptions = {}) => { +module.exports = async ({ chainWebpack, context, log }) => { const { rootDir, command, pkg } = context; - const { dev, build } = dllOptions; - if ((command === 'dev' && dev) || (command === 'build' && build)) { - const defaultAppHtml = path.join(rootDir, 'public', 'index.html'); - await buildDll(rootDir, pkg.dependencies, defaultAppHtml, log); + // only active in dev mode + if (command === 'dev') { + const htmlTemplate = path.join(rootDir, 'public', 'index.html'); + await buildDll({ + webpackConfig: context.getWebpackConfig(), + rootDir, + pkg, + htmlTemplate, + log, + }); const join = path.join.bind(path, rootDir); log.info('Dll build complete'); @@ -24,7 +30,7 @@ module.exports = async ({ chainWebpack, context, log }, dllOptions = {}) => { .use(webpack.DllReferencePlugin, [{ context: join('node_modules', 'plugin-dll'), // eslint-disable-next-line import/no-dynamic-require - manifest: require(join('node_modules', 'plugin-dll', 'vendor-manifest.json')), + manifest: join('node_modules', 'plugin-dll', 'vendor-manifest.json'), }]) .end() .plugin('CopyWebpackPlugin') diff --git a/packages/ice-plugin-dll/lib/buildDll.js b/packages/ice-plugin-dll/lib/buildDll.js index aac38c6..87b6950 100644 --- a/packages/ice-plugin-dll/lib/buildDll.js +++ b/packages/ice-plugin-dll/lib/buildDll.js @@ -37,23 +37,16 @@ async function generateDllVendorFile(outputDir, dependencies) { fs.writeFileSync(vendor, data); } -async function includeDllInHTML(outputDir, defaultAppHtml, log) { +async function includeDllInHTML(outputDir, defaultAppHtml, log, rebuild) { try { const htmlTemplate = path.join(outputDir, 'public', 'index.html'); - let htmlContent; - let $; - - // Check if index.html template exists - if (!fs.existsSync(htmlTemplate)){ - // Read html content from default app index.html - htmlContent = fs.readFileSync(defaultAppHtml, 'utf-8'); - $ = cheerio.load(htmlContent); - fs.writeFileSync(htmlTemplate, $.root().html()); - } else { - // Read html content from index.html template - htmlContent = fs.readFileSync(htmlTemplate, 'utf-8'); - $ = cheerio.load(htmlContent); + // already generate + if (fs.existsSync(htmlTemplate) && !rebuild) { + return; } + // Read html content from default app index.html + const htmlContent = fs.readFileSync(defaultAppHtml, 'utf-8'); + const $ = cheerio.load(htmlContent); // Check if vendor.js is included inside the HTML file if ($('script').length === 1 && $('script')[0].attribs.src === "vendor.js") { @@ -66,7 +59,13 @@ async function includeDllInHTML(outputDir, defaultAppHtml, log) { } } -async function buildDll(rootDir, dependencies, defaultAppHtml, log) { +async function buildDll({ + webpackConfig, + rootDir, + pkg, + htmlTemplate, + log, +}) { // Create directories to store Dll related files const outputDir = path.join(rootDir, 'node_modules', 'plugin-dll'); if (!fs.existsSync(outputDir)){ @@ -76,14 +75,13 @@ async function buildDll(rootDir, dependencies, defaultAppHtml, log) { fs.mkdirSync(path.join(outputDir, "public")); } - // Include vendor.js in HTML file - await includeDllInHTML(outputDir, defaultAppHtml, log); - // Check for rebuild Dll status - const rebuildDll = await checkRebuildDll(outputDir, dependencies, log); + const rebuildDll = await checkRebuildDll(outputDir, pkg.dependencies, log); + // Include vendor.js in HTML file + await includeDllInHTML(outputDir, htmlTemplate, log, rebuildDll); if (rebuildDll) { - await generateDllVendorFile(outputDir, dependencies); - const dllConfig = getDllConfig(rootDir); + await generateDllVendorFile(outputDir, pkg.dependencies); + const dllConfig = getDllConfig(webpackConfig, rootDir); return new Promise((resolve, reject) => { log.info("Building Dll"); webpack(dllConfig, error => { diff --git a/packages/ice-plugin-dll/lib/config/webpack.dll.js b/packages/ice-plugin-dll/lib/config/webpack.dll.js index 619a22f..88e4f1c 100644 --- a/packages/ice-plugin-dll/lib/config/webpack.dll.js +++ b/packages/ice-plugin-dll/lib/config/webpack.dll.js @@ -1,10 +1,12 @@ const webpack = require('webpack'); const path = require('path'); -module.exports = (rootDir) => { +module.exports = (defaultConfig, rootDir) => { const join = path.join.bind(path, rootDir); + // merge default config to compile return { + ...defaultConfig, entry: { vendor: [ join('node_modules', 'plugin-dll', 'vendor.js'), @@ -16,6 +18,7 @@ module.exports = (rootDir) => { library: '[name]', }, plugins: [ + ...defaultConfig.plugins, new webpack.DllPlugin({ path: join('node_modules', 'plugin-dll', '[name]-manifest.json'), name: '[name]', diff --git a/packages/ice-plugin-dll/package.json b/packages/ice-plugin-dll/package.json index a1b92ae..770b42c 100644 --- a/packages/ice-plugin-dll/package.json +++ b/packages/ice-plugin-dll/package.json @@ -1,6 +1,6 @@ { "name": "ice-plugin-dll", - "version": "1.0.0", + "version": "0.1.0", "description": "ice plugin that uses Webpack DllPlugin", "main": "index.js", "author": "tanhengyeow", From bbeaa43f89fad9fb7b3f34030193273c17309bc2 Mon Sep 17 00:00:00 2001 From: ClarkXia Date: Mon, 26 Aug 2019 22:15:41 +0800 Subject: [PATCH 2/4] fix: html template for dll --- packages/ice-plugin-dll/lib/buildDll.js | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/packages/ice-plugin-dll/lib/buildDll.js b/packages/ice-plugin-dll/lib/buildDll.js index 87b6950..a786d78 100644 --- a/packages/ice-plugin-dll/lib/buildDll.js +++ b/packages/ice-plugin-dll/lib/buildDll.js @@ -40,19 +40,23 @@ async function generateDllVendorFile(outputDir, dependencies) { async function includeDllInHTML(outputDir, defaultAppHtml, log, rebuild) { try { const htmlTemplate = path.join(outputDir, 'public', 'index.html'); - // already generate - if (fs.existsSync(htmlTemplate) && !rebuild) { - return; - } + const cssFile = path.join(outputDir, 'public', 'css', 'vendor.css'); + // Read html content from default app index.html const htmlContent = fs.readFileSync(defaultAppHtml, 'utf-8'); const $ = cheerio.load(htmlContent); + // add vendor.css + if (fs.existsSync(cssFile) && !rebuild) { + $('head').append(''); + } + // Check if vendor.js is included inside the HTML file - if ($('script').length === 1 && $('script')[0].attribs.src === "vendor.js") { - return; + const hasVendor = (Array.from($('script')) || []).some(script => script.attribs.src === 'vendor.dll.js'); + if (!hasVendor) { + $('body').append(''); } - $('body').append(''); + fs.writeFileSync(htmlTemplate, $.root().html()); } catch (err) { log.error('Error opening or writing to file'); From f1996d742955d0cb0c6697fc0930f2c7d0a31dc1 Mon Sep 17 00:00:00 2001 From: ClarkXia Date: Tue, 27 Aug 2019 13:48:22 +0800 Subject: [PATCH 3/4] chore: typo and remove useless comment --- packages/ice-plugin-dll/README.md | 2 +- packages/ice-plugin-dll/index.js | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/ice-plugin-dll/README.md b/packages/ice-plugin-dll/README.md index 4c6b35e..c2b2b0a 100644 --- a/packages/ice-plugin-dll/README.md +++ b/packages/ice-plugin-dll/README.md @@ -8,7 +8,7 @@ ice plugin that uses Webpack DllPlugin $ npm install ice-plugin-dll --save-dev ``` -## Usaeg +## Usage ```js // ice.config.js diff --git a/packages/ice-plugin-dll/index.js b/packages/ice-plugin-dll/index.js index e5fae93..eabacfa 100644 --- a/packages/ice-plugin-dll/index.js +++ b/packages/ice-plugin-dll/index.js @@ -29,7 +29,6 @@ module.exports = async ({ chainWebpack, context, log }) => { .plugin('DllReferencePlugin') .use(webpack.DllReferencePlugin, [{ context: join('node_modules', 'plugin-dll'), - // eslint-disable-next-line import/no-dynamic-require manifest: join('node_modules', 'plugin-dll', 'vendor-manifest.json'), }]) .end() From 7db25120abd4926bcd5a38d8fa5d9ddc30df2e53 Mon Sep 17 00:00:00 2001 From: ClarkXia Date: Tue, 27 Aug 2019 13:58:28 +0800 Subject: [PATCH 4/4] fix: renanme dll output filename --- packages/ice-plugin-dll/lib/config/webpack.dll.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ice-plugin-dll/lib/config/webpack.dll.js b/packages/ice-plugin-dll/lib/config/webpack.dll.js index 88e4f1c..a4d9e85 100644 --- a/packages/ice-plugin-dll/lib/config/webpack.dll.js +++ b/packages/ice-plugin-dll/lib/config/webpack.dll.js @@ -14,7 +14,7 @@ module.exports = (defaultConfig, rootDir) => { }, output: { path: join('node_modules', 'plugin-dll', 'public'), - filename: '[name].js', + filename: '[name].dll.js', library: '[name]', }, plugins: [