Skip to content

Commit 446d1ea

Browse files
author
Bulfair, Matt
committed
Upgrade to webpack 4x
1 parent b354b77 commit 446d1ea

8 files changed

Lines changed: 6390 additions & 174 deletions

File tree

‎.editorconfig‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
# editorconfig.org
2+
root = true
3+
4+
[*]
5+
indent_style = space
6+
indent_size = 4
7+
tab_width = 4
8+
end_of_line = lf
9+
charset = utf-8
10+
trim_trailing_whitespace = true
11+
insert_final_newline = true

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,4 +59,5 @@ typings/
5959

6060
#compiled assets
6161
public
62+
events.json
6263

‎package.json‎

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,36 @@
11
{
22
"name": "edition-node-webpack",
33
"description": "A pure wrapper around patternlab-node core, the default pattern engine, and supporting frontend assets.",
4-
"version": "1.0.6",
4+
"version": "2.0.0",
55
"dependencies": {
6-
"babel-core": "^6.26.0",
7-
"babel-loader": "^7.1.2",
8-
"babel-preset-env": "^1.6.1",
6+
"babel-cli": "^6.26.0",
7+
"babel-core": "^6.26.3",
8+
"babel-loader": "^7.1.4",
9+
"babel-polyfill": "^6.26.0",
10+
"babel-preset-env": "^1.7.0",
11+
"babel-register": "^6.26.0",
912
"copy-webpack-plugin": "^4.2.3",
10-
"event-hooks-webpack-plugin": "^1.0.0",
11-
"globby": "^6.1.0",
12-
"patternlab-node": "^2.11.0",
13+
"event-hooks-webpack-plugin": "^2.0.0",
14+
"globby": "^8.0.1",
15+
"patternlab-node": "^2.12.0",
1316
"styleguidekit-assets-default": "^3.5.0",
1417
"styleguidekit-mustache-default": "^3.0.0",
15-
"webpack": "^3.10.0",
18+
"uglifyjs-webpack-plugin": "^1.2.5",
19+
"webpack": "^4.8.3",
1620
"webpack-config-utils": "^2.3.0",
17-
"webpack-merge": "^4.1.0"
21+
"webpack-merge": "^4.1.2"
1822
},
1923
"repository": "git@github.com:Comcast/patternlab-edition-node-webpack.git",
2024
"bugs": "https://github.com/Comcast/patternlab-edition-node-webpack/issues",
2125
"author": "Matt Bulfair <Matt_Bulfair@comcast.com>",
2226
"contributors": [
2327
"Josh Schneider <josh68@gmail.com>",
24-
"Rodrigo Gualberto <itzdrigz@gmail.com>",
2528
"Paul Wright <paul@paintedbicycle.com>"
2629
],
2730
"scripts": {
28-
"start": "npm run patternlab:serve",
2931
"webpack:version": "webpack --v",
30-
"patternlab:build": "webpack --env.prod -p",
31-
"patternlab:serve": "webpack-dev-server --env.dev --hot --progress --colors",
32+
"patternlab:build": "webpack --mode=production --env.production",
33+
"patternlab:serve": "webpack-dev-server --mode=development --env.development",
3234
"patternlab:version": "node patternlab.js version",
3335
"patternlab:help": "node patternlab.js help",
3436
"patternlab:patternsonly": "node patternlab.js patternsonly",
@@ -46,7 +48,6 @@
4648
[
4749
"env",
4850
{
49-
"modules": "commonjs",
5051
"targets": {
5152
"node": "current"
5253
}
@@ -55,6 +56,7 @@
5556
]
5657
},
5758
"devDependencies": {
58-
"webpack-dev-server": "^2.9.5"
59+
"webpack-cli": "^2.1.4",
60+
"webpack-dev-server": "^3.1.4"
5961
}
6062
}

‎patternlab-config.json‎

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"paths": {
33
"source": {
44
"root": "./source/",
5-
"app": "./source/_app",
5+
"app": "./source/_app/",
66
"patterns": "./source/_patterns/",
77
"data": "./source/_data/",
88
"meta": "./source/_meta/",
@@ -30,14 +30,23 @@
3030
"url": "http://localhost",
3131
"port": 3000
3232
},
33+
"app": {
34+
"uglify": {
35+
"sourceMap": false,
36+
"parallel": true,
37+
"uglifyOptions": {
38+
"mangle": false
39+
}
40+
},
41+
"namespace": ""
42+
},
3343
"webpackMerge": {
34-
"entry":"replace"
44+
"entry": "replace"
3545
},
36-
"styleGuideExcludes": [
37-
],
46+
"styleGuideExcludes": [],
3847
"defaultPattern": "all",
3948
"defaultShowPatternInfo": false,
40-
"cleanPublic" : true,
49+
"cleanPublic": true,
4150
"patternExtension": "mustache",
4251
"debug": false,
4352
"ishControlsHide": {
@@ -63,8 +72,7 @@
6372
"l": [800, 2600]
6473
},
6574
"patternStateCascade": ["inprogress", "inreview", "complete"],
66-
"patternStates": {
67-
},
75+
"patternStates": {},
6876
"patternExportPatternPartials": [],
6977
"patternExportDirectory": "./pattern_exports/",
7078
"cacheBust": true,
@@ -77,4 +85,4 @@
7785
},
7886
"cleanOutputHtml": true,
7987
"exportToGraphViz": false
80-
}
88+
}

‎source/_app/samples/webpack.app.scss.js‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
/**
2+
* NOTE: THIS IS A SAMPLE, THIS SHOULD BE webpack.app.js one level higher to be used in your project.
3+
* Add new dependencies like so:
4+
* "yarn add autoprefixer import-glob-loader css-loader node-sass postcss-loader postcss-flexbugs-fixes MiniCssExtractPlugin sass-loader style-loader --dev"
5+
* or
6+
* "npm install autoprefixer import-glob-loader css-loader node-sass postcss-loader postcss-flexbugs-fixes MiniCssExtractPlugin sass-loader style-loader --save-dev"
7+
*/
8+
9+
10+
const webpack = require("webpack");
11+
const { getIfUtils } = require("webpack-config-utils");
12+
const { resolve } = require("path");
13+
const globby = require("globby");
14+
const plConfig = require("../../patternlab-config.json");
15+
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
16+
17+
module.exports = env => {
18+
const { ifProduction, ifDevelopment } = getIfUtils(env);
19+
const appNamespace = plConfig.app.namespace
20+
? `$ns:${plConfig.app.namespace};`
21+
: ``;
22+
const app = {
23+
entry: {
24+
"js/sample-project": globby.sync(
25+
[
26+
resolve(`${plConfig.paths.source.css}scss/*.scss`),
27+
resolve(`${plConfig.paths.source.patterns}**/*.js`),
28+
"!**/*.test.js"
29+
],
30+
{
31+
gitignore: true
32+
}
33+
).map(function (filePath) {
34+
return filePath;
35+
})
36+
},
37+
optimization: {
38+
splitChunks: {
39+
cacheGroups: {
40+
vendor: {
41+
test: /node_modules/,
42+
chunks: "initial",
43+
name: "js/sample-project-vendor",
44+
priority: 10,
45+
enforce: true
46+
}
47+
}
48+
}
49+
},
50+
plugins: [
51+
new MiniCssExtractPlugin({
52+
filename: "[name].css",
53+
disable: ifDevelopment()
54+
}),
55+
new webpack.DefinePlugin({
56+
NAMESPACE: appNamespace
57+
}),
58+
new webpack.debug.ProfilingPlugin()
59+
],
60+
module: {
61+
rules: [
62+
{
63+
test: /\.scss$/,
64+
use: [
65+
{
66+
loader: ifDevelopment(
67+
"style-loader",
68+
MiniCssExtractPlugin.loader
69+
)
70+
71+
},
72+
{
73+
loader: "css-loader",
74+
options: {
75+
minimize: ifProduction()
76+
}
77+
},
78+
{
79+
loader: "postcss-loader",
80+
options: {
81+
sourceMap: ifDevelopment(),
82+
plugins: loader => [
83+
// eslint-disable-line no-unused-vars
84+
require("autoprefixer"),
85+
require("postcss-flexbugs-fixes")
86+
]
87+
}
88+
},
89+
{
90+
loader: "sass-loader",
91+
options: {
92+
precision: 3,
93+
sourceMap: ifDevelopment(),
94+
outputStyle: ifProduction(
95+
"compressed",
96+
"expanded"
97+
),
98+
data: appNamespace
99+
}
100+
},
101+
{
102+
loader: "import-glob-loader"
103+
}
104+
]
105+
}
106+
]
107+
}
108+
};
109+
return app;
110+
};

‎source/_meta/_01-foot.mustache‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!--DO NOT REMOVE-->
22
{{{ patternLabFoot }}}
33

4-
<script src="../../js/pl-vendor-libraries.js?{{cacheBuster}}"></script>
4+
<script src="../../js/pl-source-vendor.js?{{cacheBuster}}"></script>
55
<script src="../../js/pl-source.js?{{cacheBuster}}"></script>
66

77
</body>

0 commit comments

Comments
 (0)