Last active
April 15, 2022 12:19
-
-
Save japboy/d69f3737dbc56508ca4da6233c3e63fe to your computer and use it in GitHub Desktop.
webpack DllPlugin + HappyPack sample
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Show hidden characters
| { | |
| "presets": [ | |
| "stage-2", | |
| [ | |
| "env", { | |
| "modules": false, | |
| "targets": { | |
| "browsers": [ | |
| "Chrome >= 50", | |
| "ChromeAndroid >= 50", | |
| "Edge >= 12", | |
| "Explorer >= 11", | |
| "Firefox >= 40", | |
| "FirefoxAndroid >= 40", | |
| "iOS >= 7", | |
| "Safari >= 6" | |
| ] | |
| } | |
| } | |
| ] | |
| ] | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import _ from 'underscore'; | |
| import Vue from 'vue'; | |
| console.log(_.VERSION); | |
| console.log(Vue.version); | |
| async function test() { | |
| const response = await new Promise((resolve) => { | |
| setTimeout(() => { | |
| resolve('Hello.'); | |
| }, 3000); | |
| }); | |
| console.log(response); | |
| } | |
| test(); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import _ from 'underscore'; | |
| import 'babel-polyfill'; | |
| console.log(_.VERSION); | |
| async function test() { | |
| const response = await new Promise((resolve) => { | |
| setTimeout(() => { | |
| resolve('Hello.'); | |
| }, 3000); | |
| }); | |
| console.log(response); | |
| } | |
| test(); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import Vue from 'vue'; | |
| console.log(Vue.version); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>sample</title> | |
| <link rel="stylesheet" href="vendor.bundle.css"> | |
| <script src="vendor.bundle.js" defer></script> | |
| <script src="entry-a.bundle.js" defer></script> | |
| </head> | |
| <body> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import _ from 'underscore'; | |
| export default function a() { | |
| console.log(_.VERSION); | |
| return 'a'; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import Vue from 'vue'; | |
| export default function b() { | |
| console.log(Vue.version); | |
| return 'b'; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| export default function c() { | |
| return 'c'; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "name": "webpack-dll-testing", | |
| "version": "1.0.0", | |
| "scripts": { | |
| "start": "webpack --bail --config ./webpack.vendor.config.js && webpack --bail --config ./webpack.main.config.js", | |
| "test": "echo \"Error: no test specified\" && exit 1" | |
| }, | |
| "license": "UNLICENSED", | |
| "private": true, | |
| "engines": { | |
| "node": "^8.9.0", | |
| "npm": "^5.5.1", | |
| "yarn": "^1.2.1" | |
| }, | |
| "dependencies": { | |
| "babel-polyfill": "6.26.0", | |
| "normalize.css": "5.0.0", | |
| "underscore": "1.8.3", | |
| "vue": "2.3.3" | |
| }, | |
| "devDependencies": { | |
| "babel-core": "6.26.0", | |
| "babel-loader": "7.1.2", | |
| "babel-preset-env": "1.6.0", | |
| "babel-preset-stage-2": "6.24.1", | |
| "css-loader": "0.28.7", | |
| "extract-text-webpack-plugin": "3.0.1", | |
| "happypack": "4.0.0", | |
| "style-loader": "0.19.0", | |
| "webpack": "3.6.0" | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const os = require('os'); | |
| const path = require('path'); | |
| const webpack = require('webpack'); | |
| const ExtractTextPlugin = require('extract-text-webpack-plugin'); | |
| const HappyPack = require('happypack'); | |
| const threadPoolCount = os.cpus().length; | |
| const happyThreadPool = HappyPack.ThreadPool({ size: threadPoolCount }); | |
| const source = __dirname; | |
| const destination = __dirname; | |
| const VendorDllReference = new webpack.DllReferencePlugin({ | |
| context: __dirname, // PROJECT ROOT WHERE NODE_MODULES ARE RELATIVELY RESOLVED! | |
| manifest: path.resolve(destination, 'vendor-manifest.json'), | |
| }); | |
| const ExtractCSS = new ExtractTextPlugin({ | |
| filename: '[name].bundle.css', | |
| allChunks: true, | |
| }); | |
| module.exports = [ | |
| { | |
| entry: { | |
| 'entry-a': [ | |
| 'babel-polyfill', // Mutable library from vendor should be loaded explicitly | |
| './entry-a.js' | |
| ], | |
| 'entry-b': './entry-b.js', | |
| 'entry-c': './entry-c.js', | |
| }, | |
| output: { | |
| filename: '[name].bundle.js', | |
| path: destination, | |
| publicPath: '/', | |
| }, | |
| module: { | |
| rules: [ | |
| { | |
| test: /\.css$/, | |
| loader: ExtractCSS.extract({ | |
| fallback: 'style-loader', | |
| use: ['happypack/loader?id=css'], | |
| }), | |
| }, | |
| { | |
| test: /\.js$/, | |
| loaders: ['happypack/loader?id=js'], | |
| }, | |
| ], | |
| }, | |
| plugins: [ | |
| new HappyPack({ | |
| id: 'css', | |
| threadPool: happyThreadPool, | |
| loaders: [ | |
| { | |
| loader: 'css-loader', | |
| } | |
| ], | |
| }), | |
| new HappyPack({ | |
| id: 'js', | |
| threadPool: happyThreadPool, | |
| loaders: [ | |
| { | |
| loader: 'babel-loader', | |
| }, | |
| ], | |
| }), | |
| VendorDllReference, | |
| ExtractCSS, | |
| ], | |
| } | |
| ]; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const os = require('os'); | |
| const path = require('path'); | |
| const webpack = require('webpack'); | |
| const ExtractTextPlugin = require('extract-text-webpack-plugin'); | |
| const HappyPack = require('happypack'); | |
| const threadPoolCount = os.cpus().length; | |
| const happyThreadPool = HappyPack.ThreadPool({ size: threadPoolCount }); | |
| const source = __dirname; | |
| const destination = __dirname; | |
| const VendorDll = new webpack.DllPlugin({ | |
| name: '[name]', | |
| path: path.resolve(destination, '[name]-manifest.json'), | |
| }); | |
| const ExtractCSS = new ExtractTextPlugin({ | |
| filename: '[name].bundle.css', | |
| allChunks: true, | |
| }); | |
| module.exports = [ | |
| { | |
| entry: { | |
| vendor: [ | |
| 'babel-polyfill', | |
| 'underscore', | |
| 'vue', | |
| 'normalize.css', | |
| ], | |
| }, | |
| output: { | |
| filename: '[name].bundle.js', | |
| library: '[name]', | |
| path: destination, | |
| publicPath: '/', | |
| }, | |
| module: { | |
| rules: [ | |
| { | |
| test: /\.css$/, | |
| loader: ExtractCSS.extract({ | |
| fallback: 'style-loader', | |
| use: ['happypack/loader?id=css'], | |
| use: ['css-loader'], | |
| }), | |
| }, | |
| { | |
| test: /\.js$/, | |
| loaders: ['happypack/loader?id=js'], | |
| }, | |
| ], | |
| }, | |
| plugins: [ | |
| new HappyPack({ | |
| id: 'css', | |
| threadPool: happyThreadPool, | |
| loaders: [ | |
| { | |
| loader: 'css-loader', | |
| } | |
| ], | |
| }), | |
| new HappyPack({ | |
| id: 'js', | |
| threadPool: happyThreadPool, | |
| loaders: [ | |
| { | |
| loader: 'babel-loader', | |
| }, | |
| ], | |
| }), | |
| VendorDll, | |
| ExtractCSS, | |
| ], | |
| }, | |
| ]; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment