diff options
Diffstat (limited to 'client/config/webpack.common.js')
-rw-r--r-- | client/config/webpack.common.js | 377 |
1 files changed, 192 insertions, 185 deletions
diff --git a/client/config/webpack.common.js b/client/config/webpack.common.js index 6edc9400c..2ce44b6c7 100644 --- a/client/config/webpack.common.js +++ b/client/config/webpack.common.js | |||
@@ -8,6 +8,7 @@ const helpers = require('./helpers') | |||
8 | const CopyWebpackPlugin = require('copy-webpack-plugin') | 8 | const CopyWebpackPlugin = require('copy-webpack-plugin') |
9 | const HtmlWebpackPlugin = require('html-webpack-plugin') | 9 | const HtmlWebpackPlugin = require('html-webpack-plugin') |
10 | const ForkCheckerPlugin = require('awesome-typescript-loader').ForkCheckerPlugin | 10 | const ForkCheckerPlugin = require('awesome-typescript-loader').ForkCheckerPlugin |
11 | const AssetsPlugin = require('assets-webpack-plugin') | ||
11 | const WebpackNotifierPlugin = require('webpack-notifier') | 12 | const WebpackNotifierPlugin = require('webpack-notifier') |
12 | 13 | ||
13 | /* | 14 | /* |
@@ -24,226 +25,232 @@ const METADATA = { | |||
24 | * | 25 | * |
25 | * See: http://webpack.github.io/docs/configuration.html#cli | 26 | * See: http://webpack.github.io/docs/configuration.html#cli |
26 | */ | 27 | */ |
27 | module.exports = { | 28 | module.exports = function (options) { |
28 | /* | 29 | var isProd = options.env === 'production' |
29 | * Static metadata for index.html | 30 | |
30 | * | 31 | return { |
31 | * See: (custom attribute) | ||
32 | */ | ||
33 | metadata: METADATA, | ||
34 | |||
35 | /* | ||
36 | * Cache generated modules and chunks to improve performance for multiple incremental builds. | ||
37 | * This is enabled by default in watch mode. | ||
38 | * You can pass false to disable it. | ||
39 | * | ||
40 | * See: http://webpack.github.io/docs/configuration.html#cache | ||
41 | */ | ||
42 | // cache: false, | ||
43 | |||
44 | /* | ||
45 | * The entry point for the bundle | ||
46 | * Our Angular.js app | ||
47 | * | ||
48 | * See: http://webpack.github.io/docs/configuration.html#entry | ||
49 | */ | ||
50 | entry: { | ||
51 | 'polyfills': './src/polyfills.ts', | ||
52 | 'vendor': './src/vendor.ts', | ||
53 | 'main': './src/main.ts' | ||
54 | }, | ||
55 | |||
56 | /* | ||
57 | * Options affecting the resolving of modules. | ||
58 | * | ||
59 | * See: http://webpack.github.io/docs/configuration.html#resolve | ||
60 | */ | ||
61 | resolve: { | ||
62 | /* | 32 | /* |
63 | * An array of extensions that should be used to resolve modules. | 33 | * Static metadata for index.html |
64 | * | 34 | * |
65 | * See: http://webpack.github.io/docs/configuration.html#resolve-extensions | 35 | * See: (custom attribute) |
66 | */ | 36 | */ |
67 | extensions: [ '', '.ts', '.js', '.scss' ], | 37 | metadata: METADATA, |
68 | |||
69 | // Make sure root is src | ||
70 | root: helpers.root('src'), | ||
71 | 38 | ||
72 | // remove other default values | 39 | /* |
73 | modulesDirectories: [ 'node_modules' ] | 40 | * Cache generated modules and chunks to improve performance for multiple incremental builds. |
74 | }, | 41 | * This is enabled by default in watch mode. |
42 | * You can pass false to disable it. | ||
43 | * | ||
44 | * See: http://webpack.github.io/docs/configuration.html#cache | ||
45 | */ | ||
46 | // cache: false, | ||
75 | 47 | ||
76 | output: { | 48 | /* |
77 | publicPath: '/client/' | 49 | * The entry point for the bundle |
78 | }, | 50 | * Our Angular.js app |
51 | * | ||
52 | * See: http://webpack.github.io/docs/configuration.html#entry | ||
53 | */ | ||
54 | entry: { | ||
55 | 'polyfills': './src/polyfills.ts', | ||
56 | 'vendor': './src/vendor.ts', | ||
57 | 'main': './src/main.ts' | ||
58 | }, | ||
79 | 59 | ||
80 | /* | ||
81 | * Options affecting the normal modules. | ||
82 | * | ||
83 | * See: http://webpack.github.io/docs/configuration.html#module | ||
84 | */ | ||
85 | module: { | ||
86 | /* | 60 | /* |
87 | * An array of applied pre and post loaders. | 61 | * Options affecting the resolving of modules. |
88 | * | 62 | * |
89 | * See: http://webpack.github.io/docs/configuration.html#module-preloaders-module-postloaders | 63 | * See: http://webpack.github.io/docs/configuration.html#resolve |
90 | */ | 64 | */ |
91 | preLoaders: [ | 65 | resolve: { |
92 | 66 | /* | |
93 | { | 67 | * An array of extensions that should be used to resolve modules. |
94 | test: /\.ts$/, | 68 | * |
95 | loader: 'string-replace-loader', | 69 | * See: http://webpack.github.io/docs/configuration.html#resolve-extensions |
96 | query: { | 70 | */ |
97 | search: '(System|SystemJS)(.*[\\n\\r]\\s*\\.|\\.)import\\((.+)\\)', | 71 | extensions: [ '', '.ts', '.js', '.scss' ], |
98 | replace: '$1.import($3).then(mod => mod.__esModule ? mod.default : mod)', | ||
99 | flags: 'g' | ||
100 | }, | ||
101 | include: [helpers.root('src')] | ||
102 | } | ||
103 | 72 | ||
104 | ], | 73 | // Make sure root is src |
74 | root: helpers.root('src'), | ||
75 | |||
76 | // remove other default values | ||
77 | modulesDirectories: [ 'node_modules' ] | ||
78 | }, | ||
79 | |||
80 | output: { | ||
81 | publicPath: '/client/' | ||
82 | }, | ||
105 | 83 | ||
106 | /* | 84 | /* |
107 | * An array of automatically applied loaders. | 85 | * Options affecting the normal modules. |
108 | * | 86 | * |
109 | * IMPORTANT: The loaders here are resolved relative to the resource which they are applied to. | 87 | * See: http://webpack.github.io/docs/configuration.html#module |
110 | * This means they are not resolved relative to the configuration file. | ||
111 | * | ||
112 | * See: http://webpack.github.io/docs/configuration.html#module-loaders | ||
113 | */ | 88 | */ |
114 | loaders: [ | 89 | module: { |
115 | |||
116 | /* | 90 | /* |
117 | * Typescript loader support for .ts and Angular 2 async routes via .async.ts | 91 | * An array of applied pre and post loaders. |
118 | * | 92 | * |
119 | * See: https://github.com/s-panferov/awesome-typescript-loader | 93 | * See: http://webpack.github.io/docs/configuration.html#module-preloaders-module-postloaders |
120 | */ | 94 | */ |
121 | { | 95 | preLoaders: [ |
122 | test: /\.ts$/, | 96 | { |
123 | loaders: [ | 97 | test: /\.ts$/, |
124 | 'awesome-typescript-loader', | 98 | loader: 'string-replace-loader', |
125 | 'angular2-template-loader', | 99 | query: { |
126 | '@angularclass/hmr-loader' | 100 | search: '(System|SystemJS)(.*[\\n\\r]\\s*\\.|\\.)import\\((.+)\\)', |
127 | ], | 101 | replace: '$1.import($3).then(mod => (mod.__esModule && mod.default) ? mod.default : mod)', |
128 | exclude: [/\.(spec|e2e)\.ts$/] | 102 | flags: 'g' |
129 | }, | 103 | }, |
104 | include: [helpers.root('src')] | ||
105 | } | ||
106 | ], | ||
130 | 107 | ||
131 | /* | 108 | /* |
132 | * Json loader support for *.json files. | 109 | * An array of automatically applied loaders. |
133 | * | 110 | * |
134 | * See: https://github.com/webpack/json-loader | 111 | * IMPORTANT: The loaders here are resolved relative to the resource which they are applied to. |
135 | */ | 112 | * This means they are not resolved relative to the configuration file. |
136 | { | ||
137 | test: /\.json$/, | ||
138 | loader: 'json-loader' | ||
139 | }, | ||
140 | |||
141 | { | ||
142 | test: /\.scss$/, | ||
143 | exclude: /node_modules/, | ||
144 | loaders: [ 'raw-loader', 'sass-loader' ] | ||
145 | }, | ||
146 | |||
147 | { | ||
148 | test: /\.(woff2?|ttf|eot|svg)$/, | ||
149 | loader: 'url?limit=10000&name=assets/fonts/[hash].[ext]' | ||
150 | }, | ||
151 | |||
152 | /* Raw loader support for *.html | ||
153 | * Returns file content as string | ||
154 | * | 113 | * |
155 | * See: https://github.com/webpack/raw-loader | 114 | * See: http://webpack.github.io/docs/configuration.html#module-loaders |
156 | */ | 115 | */ |
157 | { | 116 | loaders: [ |
158 | test: /\.html$/, | ||
159 | loader: 'raw-loader', | ||
160 | exclude: [ helpers.root('src/index.html') ] | ||
161 | } | ||
162 | 117 | ||
163 | ] | 118 | /* |
119 | * Typescript loader support for .ts and Angular 2 async routes via .async.ts | ||
120 | * | ||
121 | * See: https://github.com/s-panferov/awesome-typescript-loader | ||
122 | */ | ||
123 | { | ||
124 | test: /\.ts$/, | ||
125 | loaders: [ | ||
126 | '@angularclass/hmr-loader?pretty=' + !isProd + '&prod=' + isProd, | ||
127 | 'awesome-typescript-loader', | ||
128 | 'angular2-template-loader' | ||
129 | ], | ||
130 | exclude: [/\.(spec|e2e)\.ts$/] | ||
131 | }, | ||
164 | 132 | ||
165 | }, | 133 | /* |
134 | * Json loader support for *.json files. | ||
135 | * | ||
136 | * See: https://github.com/webpack/json-loader | ||
137 | */ | ||
138 | { | ||
139 | test: /\.json$/, | ||
140 | loader: 'json-loader' | ||
141 | }, | ||
166 | 142 | ||
167 | sassLoader: { | 143 | { |
168 | precision: 10 | 144 | test: /\.scss$/, |
169 | }, | 145 | exclude: /node_modules/, |
146 | loaders: [ 'raw-loader', 'sass-loader' ] | ||
147 | }, | ||
170 | 148 | ||
171 | /* | 149 | { |
172 | * Add additional plugins to the compiler. | 150 | test: /\.(woff2?|ttf|eot|svg)$/, |
173 | * | 151 | loader: 'url?limit=10000&name=assets/fonts/[hash].[ext]' |
174 | * See: http://webpack.github.io/docs/configuration.html#plugins | 152 | }, |
175 | */ | ||
176 | plugins: [ | ||
177 | 153 | ||
178 | /* | 154 | /* Raw loader support for *.html |
179 | * Plugin: ForkCheckerPlugin | 155 | * Returns file content as string |
180 | * Description: Do type checking in a separate process, so webpack don't need to wait. | 156 | * |
181 | * | 157 | * See: https://github.com/webpack/raw-loader |
182 | * See: https://github.com/s-panferov/awesome-typescript-loader#forkchecker-boolean-defaultfalse | 158 | */ |
183 | */ | 159 | { |
184 | new ForkCheckerPlugin(), | 160 | test: /\.html$/, |
161 | loader: 'raw-loader', | ||
162 | exclude: [ helpers.root('src/index.html') ] | ||
163 | } | ||
185 | 164 | ||
186 | /* | 165 | ] |
187 | * Plugin: CommonsChunkPlugin | 166 | |
188 | * Description: Shares common code between the pages. | 167 | }, |
189 | * It identifies common modules and put them into a commons chunk. | 168 | |
190 | * | 169 | sassLoader: { |
191 | * See: https://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin | 170 | precision: 10 |
192 | * See: https://github.com/webpack/docs/wiki/optimization#multi-page-app | 171 | }, |
193 | */ | ||
194 | new webpack.optimize.CommonsChunkPlugin({ | ||
195 | name: [ 'polyfills', 'vendor' ].reverse() | ||
196 | }), | ||
197 | 172 | ||
198 | /* | 173 | /* |
199 | * Plugin: CopyWebpackPlugin | 174 | * Add additional plugins to the compiler. |
200 | * Description: Copy files and directories in webpack. | ||
201 | * | 175 | * |
202 | * Copies project static assets. | 176 | * See: http://webpack.github.io/docs/configuration.html#plugins |
203 | * | ||
204 | * See: https://www.npmjs.com/package/copy-webpack-plugin | ||
205 | */ | 177 | */ |
206 | new CopyWebpackPlugin([ | 178 | plugins: [ |
207 | { | 179 | new AssetsPlugin({ |
208 | from: 'src/assets', | 180 | path: helpers.root('dist'), |
209 | to: 'assets' | 181 | filename: 'webpack-assets.json', |
210 | }, | 182 | prettyPrint: true |
211 | { | 183 | }), |
212 | from: 'node_modules/webtorrent/webtorrent.min.js', | 184 | |
213 | to: 'assets/webtorrent' | 185 | /* |
214 | } | 186 | * Plugin: ForkCheckerPlugin |
215 | ]), | 187 | * Description: Do type checking in a separate process, so webpack don't need to wait. |
188 | * | ||
189 | * See: https://github.com/s-panferov/awesome-typescript-loader#forkchecker-boolean-defaultfalse | ||
190 | */ | ||
191 | new ForkCheckerPlugin(), | ||
192 | |||
193 | /* | ||
194 | * Plugin: CommonsChunkPlugin | ||
195 | * Description: Shares common code between the pages. | ||
196 | * It identifies common modules and put them into a commons chunk. | ||
197 | * | ||
198 | * See: https://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin | ||
199 | * See: https://github.com/webpack/docs/wiki/optimization#multi-page-app | ||
200 | */ | ||
201 | new webpack.optimize.CommonsChunkPlugin({ | ||
202 | name: [ 'polyfills', 'vendor' ].reverse() | ||
203 | }), | ||
204 | |||
205 | /* | ||
206 | * Plugin: CopyWebpackPlugin | ||
207 | * Description: Copy files and directories in webpack. | ||
208 | * | ||
209 | * Copies project static assets. | ||
210 | * | ||
211 | * See: https://www.npmjs.com/package/copy-webpack-plugin | ||
212 | */ | ||
213 | new CopyWebpackPlugin([ | ||
214 | { | ||
215 | from: 'src/assets', | ||
216 | to: 'assets' | ||
217 | }, | ||
218 | { | ||
219 | from: 'node_modules/webtorrent/webtorrent.min.js', | ||
220 | to: 'assets/webtorrent' | ||
221 | } | ||
222 | ]), | ||
223 | |||
224 | /* | ||
225 | * Plugin: HtmlWebpackPlugin | ||
226 | * Description: Simplifies creation of HTML files to serve your webpack bundles. | ||
227 | * This is especially useful for webpack bundles that include a hash in the filename | ||
228 | * which changes every compilation. | ||
229 | * | ||
230 | * See: https://github.com/ampedandwired/html-webpack-plugin | ||
231 | */ | ||
232 | new HtmlWebpackPlugin({ | ||
233 | template: 'src/index.html', | ||
234 | chunksSortMode: 'dependency' | ||
235 | }), | ||
236 | |||
237 | new WebpackNotifierPlugin({ alwaysNotify: true }) | ||
238 | ], | ||
216 | 239 | ||
217 | /* | 240 | /* |
218 | * Plugin: HtmlWebpackPlugin | 241 | * Include polyfills or mocks for various node stuff |
219 | * Description: Simplifies creation of HTML files to serve your webpack bundles. | 242 | * Description: Node configuration |
220 | * This is especially useful for webpack bundles that include a hash in the filename | ||
221 | * which changes every compilation. | ||
222 | * | 243 | * |
223 | * See: https://github.com/ampedandwired/html-webpack-plugin | 244 | * See: https://webpack.github.io/docs/configuration.html#node |
224 | */ | 245 | */ |
225 | new HtmlWebpackPlugin({ | 246 | node: { |
226 | template: 'src/index.html', | 247 | global: 'window', |
227 | chunksSortMode: 'dependency' | 248 | crypto: 'empty', |
228 | }), | 249 | fs: 'empty', |
229 | 250 | events: true, | |
230 | new WebpackNotifierPlugin({ alwaysNotify: true }) | 251 | module: false, |
231 | ], | 252 | clearImmediate: false, |
232 | 253 | setImmediate: false | |
233 | /* | 254 | } |
234 | * Include polyfills or mocks for various node stuff | ||
235 | * Description: Node configuration | ||
236 | * | ||
237 | * See: https://webpack.github.io/docs/configuration.html#node | ||
238 | */ | ||
239 | node: { | ||
240 | global: 'window', | ||
241 | crypto: 'empty', | ||
242 | fs: 'empty', | ||
243 | events: true, | ||
244 | module: false, | ||
245 | clearImmediate: false, | ||
246 | setImmediate: false | ||
247 | } | 255 | } |
248 | |||
249 | } | 256 | } |