aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/config
diff options
context:
space:
mode:
authorChocobozzz <florian.bigard@gmail.com>2016-09-12 20:43:44 +0200
committerChocobozzz <florian.bigard@gmail.com>2016-09-12 20:43:44 +0200
commit2e92c10b6cdb32e5170aab0b4c0ff3e4c27e30d5 (patch)
tree104ff4077318ebd489f2ef30a332835d1deb13c4 /client/config
parent772b47e36a1e63eedeaafe6cd7b1771dfb441ba7 (diff)
downloadPeerTube-2e92c10b6cdb32e5170aab0b4c0ff3e4c27e30d5.tar.gz
PeerTube-2e92c10b6cdb32e5170aab0b4c0ff3e4c27e30d5.tar.zst
PeerTube-2e92c10b6cdb32e5170aab0b4c0ff3e4c27e30d5.zip
Client: update a webpack configs
Diffstat (limited to 'client/config')
-rw-r--r--client/config/webpack.common.js377
-rw-r--r--client/config/webpack.dev.js4
-rw-r--r--client/config/webpack.prod.js12
3 files changed, 200 insertions, 193 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')
8const CopyWebpackPlugin = require('copy-webpack-plugin') 8const CopyWebpackPlugin = require('copy-webpack-plugin')
9const HtmlWebpackPlugin = require('html-webpack-plugin') 9const HtmlWebpackPlugin = require('html-webpack-plugin')
10const ForkCheckerPlugin = require('awesome-typescript-loader').ForkCheckerPlugin 10const ForkCheckerPlugin = require('awesome-typescript-loader').ForkCheckerPlugin
11const AssetsPlugin = require('assets-webpack-plugin')
11const WebpackNotifierPlugin = require('webpack-notifier') 12const 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 */
27module.exports = { 28module.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}
diff --git a/client/config/webpack.dev.js b/client/config/webpack.dev.js
index fede16932..5e4c708d6 100644
--- a/client/config/webpack.dev.js
+++ b/client/config/webpack.dev.js
@@ -15,7 +15,7 @@ const ENV = process.env.ENV = process.env.NODE_ENV = 'development'
15const HOST = process.env.HOST || 'localhost' 15const HOST = process.env.HOST || 'localhost'
16const PORT = process.env.PORT || 3000 16const PORT = process.env.PORT || 3000
17const HMR = helpers.hasProcessFlag('hot') 17const HMR = helpers.hasProcessFlag('hot')
18const METADATA = webpackMerge(commonConfig.metadata, { 18const METADATA = webpackMerge(commonConfig({env: ENV}).metadata, {
19 host: HOST, 19 host: HOST,
20 port: PORT, 20 port: PORT,
21 ENV: ENV, 21 ENV: ENV,
@@ -27,7 +27,7 @@ const METADATA = webpackMerge(commonConfig.metadata, {
27 * 27 *
28 * See: http://webpack.github.io/docs/configuration.html#cli 28 * See: http://webpack.github.io/docs/configuration.html#cli
29 */ 29 */
30module.exports = webpackMerge(commonConfig, { 30module.exports = webpackMerge(commonConfig({env: ENV}), {
31 /** 31 /**
32 * Merged metadata from webpack.common.js for index.html 32 * Merged metadata from webpack.common.js for index.html
33 * 33 *
diff --git a/client/config/webpack.prod.js b/client/config/webpack.prod.js
index 4e7d96a4b..2db41d398 100644
--- a/client/config/webpack.prod.js
+++ b/client/config/webpack.prod.js
@@ -23,7 +23,7 @@ const WebpackMd5Hash = require('webpack-md5-hash')
23const ENV = process.env.NODE_ENV = process.env.ENV = 'production' 23const ENV = process.env.NODE_ENV = process.env.ENV = 'production'
24const HOST = process.env.HOST || 'localhost' 24const HOST = process.env.HOST || 'localhost'
25const PORT = process.env.PORT || 8080 25const PORT = process.env.PORT || 8080
26const METADATA = webpackMerge(commonConfig.metadata, { 26const METADATA = webpackMerge(commonConfig({env: ENV}).metadata, {
27 host: HOST, 27 host: HOST,
28 port: PORT, 28 port: PORT,
29 ENV: ENV, 29 ENV: ENV,
@@ -166,7 +166,7 @@ module.exports = webpackMerge(commonConfig, {
166 new NormalModuleReplacementPlugin( 166 new NormalModuleReplacementPlugin(
167 /angular2-hmr/, 167 /angular2-hmr/,
168 helpers.root('config/modules/angular2-hmr-prod.js') 168 helpers.root('config/modules/angular2-hmr-prod.js')
169 ), 169 )
170 170
171 /** 171 /**
172 * Plugin: CompressionPlugin 172 * Plugin: CompressionPlugin
@@ -175,10 +175,10 @@ module.exports = webpackMerge(commonConfig, {
175 * 175 *
176 * See: https://github.com/webpack/compression-webpack-plugin 176 * See: https://github.com/webpack/compression-webpack-plugin
177 */ 177 */
178 new CompressionPlugin({ 178 // new CompressionPlugin({
179 regExp: /\.css$|\.html$|\.js$|\.map$/, 179 // regExp: /\.css$|\.html$|\.js$|\.map$/,
180 threshold: 2 * 1024 180 // threshold: 2 * 1024
181 }) 181 // })
182 182
183 ], 183 ],
184 184