You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The webpack wrapper around [Pattern Lab Node Core](https://github.com/pattern-lab/patternlab-node) providing tasks to interact with the core library and move supporting frontend assets.
6
6
7
7
## Packaged Components
8
8
9
9
The webpack edition comes with the following components:
The Pattern Lab Node - webpack edition uses [Node](https://nodejs.org/en/) for core processing, [npm](https://www.npmjs.com/) to manage project dependencies, and [webpack.io](https://webpack.github.io/) to run tasks and interface with the core library. Node version 4 or higher suffices. You can follow the directions for [installing Node](https://nodejs.org/en/download/) on the Node website if you haven't done so already. Installation of Node will include npm.
19
19
20
20
## Quickstart Guide
21
+
21
22
_Note: You must have all of the prerequisites first_
22
23
23
-
1. Download the `.zip` or fork this repository, then clone it locally.
24
+
1.Download the `.zip` or fork this repository, then clone it locally.
1. In a terminal window, navigate to the downloaded directory
26
+
1.In a terminal window, navigate to the downloaded directory
26
27
> `cd path/to/patternlab-edition-node-webpack`
27
-
1. To populate Patternlab with sample data, install a starter kit, there are many [starterkits](https://github.com/pattern-lab?utf8=%E2%9C%93&q=starterkit&type=&language=) choose from
28
+
1.To populate Patternlab with sample data, install a starter kit, there are many [starterkits](https://github.com/pattern-lab?utf8=%E2%9C%93&q=starterkit&type=&language=) choose from
28
29
> `npm install starterkit-mustache-demo`
29
-
1. Generate sample files
30
+
1.Generate sample files
30
31
> `npm run patternlab:loadstarterkit --kit=starterkit-mustache-demo`
31
-
1. Show Patternlab in a Webbrowser
32
+
1.Show Patternlab in a Webbrowser
32
33
> `npm run patternlab:serve`
33
34
34
35
## Installing
@@ -37,24 +38,24 @@ _Note: You must have all of the prerequisites first_
37
38
38
39
### What's Included
39
40
40
-
The pre-built project comes with the [Base Starterkit for Mustache](https://github.com/pattern-lab/starterkit-mustache-base) installed by default.
41
+
The pre-built project comes with the [Base Starterkit for Mustache](https://github.com/pattern-lab/starterkit-mustache-base) installed by default.
41
42
42
43
**Please note:** Pattern Lab Node uses [npm](https://www.npmjs.com/) to manage project dependencies. To upgrade the webpack edition or to install plug-ins you'll need to be familiar with npm.
43
44
44
45
### Use npm
45
46
46
47
`npm` is a dependency management and package system which can pull in all of the webpack editions's dependencies for you. To accomplish this:
47
48
48
-
* download or `git clone` this repository to an install location.
49
+
- download or `git clone` this repository to an install location.
49
50
50
-
* run the following
51
+
- run the following
51
52
52
53
```
53
54
cd install/location
54
55
npm install
55
56
```
56
57
57
-
Running `npm install` from a directory containing a `package.json` file will download all dependencies defined within. The `package-lock.json` file is automatically managaged everytime you add/remove/upgrade a dependency.
58
+
Running `npm install` from a directory containing a `package.json` file will download all dependencies defined within. The `package-lock.json` file is automatically managaged everytime you add/remove/upgrade a dependency.
58
59
59
60
#### Install the Webpack Edition of Pattern Lab Node as a Dependency
60
61
@@ -91,7 +92,7 @@ To generate the front-end for Pattern Lab type:
91
92
92
93
### Watch for changes and re-generate Pattern Lab
93
94
94
-
To watch for changes, re-generate the front-end, and server it via a BrowserSync server, type:
95
+
To watch for changes, re-generate the front-end, and server it via a BrowserSync server, type:
95
96
96
97
npm run patternlab:serve
97
98
@@ -109,35 +110,79 @@ To install a specific StarterKit from GitHub type:
109
110
110
111
Unlike the other editions, there were a few options added just for this edition that allow for easier upgrading, and better flexibility.
111
112
112
-
#### Setting Dev Server Settings
113
-
You can set the url and port number in the configuration for
113
+
#### Setting Webpack Dev Server
114
+
115
+
You can set several options to configure your dev server. You can also in the CLI pass any option on demand.
114
116
115
-
"server": {
117
+
```javascript
118
+
"webpackDevServer": {
116
119
"url": "http://localhost",
117
-
"port": 3000
120
+
"port": 3000,
121
+
"watchContentBase": true,
122
+
"watchOptions": {
123
+
"aggregateTimeout": 500,
124
+
"ignored": [],
125
+
"info-verbosity": "verbose"
126
+
}
118
127
},
128
+
```
119
129
120
130
#### Setting the Webpack Merge Options
131
+
121
132
In this edition, it's important to make the configuration for webpack something very easy to update, and very easy to modify. The current setting for webpack merge are described [here.](https://github.com/Comcast/patternlab-edition-node-webpack/blob/master/source/_app/readme.md)
122
133
123
134
You can change how it merges by changing this object in `patternlab-config.json`:
124
-
135
+
136
+
```javascript
125
137
"webpackMerge": {
126
-
"entry":"replace"
138
+
"entry":"replace"
127
139
},
128
-
140
+
```
129
141
By default merge does a `append` if that option works for you only set which webpack configuration you want to change. The merge setting is: `smartStrategy` which is documented over on this [page.](https://www.npmjs.com/package/webpack-merge#mergesmartstrategy-key-prependappendreplaceconfiguration--configuration)
130
142
143
+
#### Modifying the compression settings for bundles
144
+
145
+
You can safely modify the following settings in the the main `webpack.babel.config` that can change how the bundles get optimized.
146
+
147
+
_Note: in webpack 4, these settings are automatically triggered when `mode=production` when running the dev server this is not used._
148
+
149
+
All uglify settings are in the`patternlab-config.json`:
150
+
151
+
```javascript
152
+
"uglify": {
153
+
"sourceMap":false,
154
+
"parallel":true,
155
+
"uglifyOptions": {
156
+
"mangle":false
157
+
}
158
+
},
159
+
```
160
+
#### Namespace
161
+
In some cases you may want to add a namespace to your JS or CSS/SCSS files. You can now add a global `NAMESPACE` which can be read by any JS module. The sample of .scss includes how to use it in a `.SCSS` file.
162
+
163
+
This can be changed in the`patternlab-config.json` under `app`:
164
+
165
+
```javascript
166
+
"app": {
167
+
"namespace":""
168
+
}
169
+
```
170
+
171
+
131
172
### Licenses
173
+
*[babel-cli](https://github.com/babel/babel/blob/master/LICENSE) - MIT
132
174
*[babel-core](https://github.com/babel/babel/blob/master/LICENSE) - MIT
0 commit comments