Skip to content

Instantly share code, notes, and snippets.

@japboy

japboy/.babelrc

Last active April 15, 2022 12:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save japboy/d69f3737dbc56508ca4da6233c3e63fe to your computer and use it in GitHub Desktop.
Save japboy/d69f3737dbc56508ca4da6233c3e63fe to your computer and use it in GitHub Desktop.
Download ZIP
webpack DllPlugin + HappyPack sample
Raw
.babelrc
{
"presets": [
"stage-2",
[
"env", {
"modules": false,
"targets": {
"browsers": [
"Chrome >= 50",
"ChromeAndroid >= 50",
"Edge >= 12",
"Explorer >= 11",
"Firefox >= 40",
"FirefoxAndroid >= 40",
"iOS >= 7",
"Safari >= 6"
]
}
}
]
]
}
Raw
entry-a.js
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();
Raw
entry-b.js
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();
Raw
entry-c.js
import Vue from 'vue';
console.log(Vue.version);
Raw
index.html
<!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>
Raw
mod-a.js
import _ from 'underscore';
export default function a() {
console.log(_.VERSION);
return 'a';
}
Raw
mod-b.js
import Vue from 'vue';
export default function b() {
console.log(Vue.version);
return 'b';
}
Raw
mod-c.js
export default function c() {
return 'c';
}
Raw
package.json
{
"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"
}
}
Raw
webpack.main.config.js
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,
],
}
];
Raw
webpack.vendor.config.js
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