From d12ff571bfed8c3412ba60cf3c8c2927acff41a4 Mon Sep 17 00:00:00 2001 From: tkqubo Date: Tue, 22 Sep 2015 18:42:55 +0900 Subject: [PATCH 1/3] Add webpack --- webpack/webpack-tests.ts | 47 +++++++++++++++++++++++++++++++++++ webpack/webpack.d.ts | 53 ++++++++++++++++++++++++++++++++++++++++ 2 files changed, 100 insertions(+) create mode 100644 webpack/webpack-tests.ts create mode 100644 webpack/webpack.d.ts diff --git a/webpack/webpack-tests.ts b/webpack/webpack-tests.ts new file mode 100644 index 000000000..bd3de95a2 --- /dev/null +++ b/webpack/webpack-tests.ts @@ -0,0 +1,47 @@ +/// + +import webpack from 'webpack'; +//import webpack = require('webpack'); + +var configuration: webpack.Configuration; +var loader: webpack.Loader; +var plugin: webpack.Plugin; + +// +// https://webpack.github.io/docs/using-loaders.html +// + +configuration = { + module: { + loaders: [ + { test: /\.jade$/, loader: "jade" }, + // => "jade" loader is used for ".jade" files + + { test: /\.css$/, loader: "style!css" }, + // => "style" and "css" loader is used for ".css" files + // Alternative syntax: + { test: /\.css$/, loaders: ["style", "css"] }, + ] + } +}; + +loader = { test: /\.png$/, loader: "url-loader?mimetype=image/png" }; + +loader = { + test: /\.png$/, + loader: "url-loader", + query: { mimetype: "image/png" } +}; + +// +// https://webpack.github.io/docs/using-plugins.html +// + +configuration = { + plugins: [ + new webpack.ResolverPlugin([ + new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"]) + ], ["normal", "loader"]) + ] +}; + diff --git a/webpack/webpack.d.ts b/webpack/webpack.d.ts new file mode 100644 index 000000000..c8381e7e4 --- /dev/null +++ b/webpack/webpack.d.ts @@ -0,0 +1,53 @@ +// Type definitions for webpack +// Project: https://github.com/webpack/webpack +// Definitions by: Qubo +// Definitions: https://github.com/borisyankov/DefinitelyTyped + +declare module "webpack" { + namespace webpack { + interface Configuration { + module?: Module; + plugins?: Plugin[]; + } + + interface Module { + loaders?: Loader[]; + } + + interface Loader { + test: RegExp; + loader?: string; + loaders?: string[]; + query?: { + [name: string]: any; + } + } + + interface Plugin { + } + + interface ResolverPlugin extends Plugin { + } + + interface ResolverPluginStatic { + new(plugins: Plugin[], files: string[]): ResolverPlugin; + DirectoryDescriptionFilePlugin: DirectoryDescriptionFilePluginStatic; + } + + interface DirectoryDescriptionFilePlugin extends Plugin { + } + + interface DirectoryDescriptionFilePluginStatic { + new(file: string, files: string[]): DirectoryDescriptionFilePlugin; + } + + interface Webpack { + ResolverPlugin: ResolverPluginStatic; + } + } + + var webpack: webpack.Webpack; + + export default webpack; +} + From d0336ac5118ba8f1f0602b8eed78c2cc9f118cbb Mon Sep 17 00:00:00 2001 From: tkqubo Date: Tue, 22 Sep 2015 19:35:45 +0900 Subject: [PATCH 2/3] Add more typings to webpack --- webpack/webpack-tests.ts | 202 +++++++++++++++++++++++++++++++++++++++ webpack/webpack.d.ts | 36 ++++++- 2 files changed, 237 insertions(+), 1 deletion(-) diff --git a/webpack/webpack-tests.ts b/webpack/webpack-tests.ts index bd3de95a2..a99905088 100644 --- a/webpack/webpack-tests.ts +++ b/webpack/webpack-tests.ts @@ -6,6 +6,7 @@ import webpack from 'webpack'; var configuration: webpack.Configuration; var loader: webpack.Loader; var plugin: webpack.Plugin; +declare var __dirname: string; // // https://webpack.github.io/docs/using-loaders.html @@ -45,3 +46,204 @@ configuration = { ] }; +// +// http://webpack.github.io/docs/tutorials/getting-started/ +// + +configuration = { + entry: "./entry.js", + output: { + path: __dirname, + filename: "bundle.js" + }, + module: { + loaders: [ + { test: /\.css$/, loader: "style!css" } + ] + } +}; + +// +// https://webpack.github.io/docs/code-splitting.html +// + +configuration = { + entry: { + app: "./app.js", + vendor: ["jquery", "underscore"], + }, + output: { + filename: "bundle.js" + }, + plugins: [ + new webpack.optimize.CommonsChunkPlugin(/* chunkName= */"vendor", /* filename= */"vendor.bundle.js") + ] +}; + +configuration = { + entry: { a: "./a", b: "./b" }, + output: { filename: "[name].js" }, + plugins: [ new webpack.optimize.CommonsChunkPlugin("init.js") ] +}; + +// +// https://webpack.github.io/docs/stylesheets.html +// + +configuration = { + // ... + module: { + loaders: [ + { test: /\.css$/, loader: "style-loader!css-loader" } + ] + } +}; + +class ExtractTextPlugin implements webpack.Plugin { + static extract(...loaders: string[]): string { return null; } + constructor(...args: any[]) {} +} + +configuration = { + // The standard entry point and output config + entry: { + posts: "./posts", + post: "./post", + about: "./about" + }, + output: { + filename: "[name].js", + chunkFilename: "[id].js" + }, + module: { + loaders: [ + // Extract css files + { + test: /\.css$/, + loader: ExtractTextPlugin.extract("style-loader", "css-loader") + }, + // Optionally extract less files + // or any other compile-to-css language + { + test: /\.less$/, + loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader") + } + // You could also use other loaders the same way. I. e. the autoprefixer-loader + ] + }, + // Use the plugin to specify the resulting filename (and add needed behavior to the compiler) + plugins: [ + new ExtractTextPlugin("[name].css") + ] +}; + +configuration = { + // ... + plugins: [ + new ExtractTextPlugin("style.css", { + allChunks: true + }) + ] +}; + +configuration = { + // ... + plugins: [ + new webpack.optimize.CommonsChunkPlugin("commons", "commons.js"), + new ExtractTextPlugin("[name].css") + ] +}; + +// +// https://webpack.github.io/docs/optimization.html +// + +configuration = { + entry: { + p1: "./page1", + p2: "./page2", + p3: "./page3" + }, + output: { + filename: "[name].entry.chunk.js" + } +}; + +let CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin; +configuration = { + entry: { + p1: "./page1", + p2: "./page2", + p3: "./page3" + }, + output: { + filename: "[name].entry.chunk.js" + }, + plugins: [ + new CommonsChunkPlugin("commons.chunk.js") + ] +}; + +configuration = { + entry: { + p1: "./page1", + p2: "./page2", + p3: "./page3", + ap1: "./admin/page1", + ap2: "./admin/page2" + }, + output: { + filename: "[name].js" + }, + plugins: [ + new CommonsChunkPlugin("admin-commons.js", ["ap1", "ap2"]), + new CommonsChunkPlugin("commons.js", ["p1", "p2", "admin-commons.js"]) + ] +}; +//