Merge pull request #5969 from tkqubo/webpack

Add webpack
This commit is contained in:
Masahiro Wakame
2015-09-27 12:47:18 +09:00
2 changed files with 649 additions and 0 deletions
+388
View File
@@ -0,0 +1,388 @@
/// <reference path="webpack.d.ts" />
import * as 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
//
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"])
]
};
//
// 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"])
]
};
// <script>s required:
// page1.html: commons.js, p1.js
// page2.html: commons.js, p2.js
// page3.html: p3.js
// admin-page1.html: commons.js, admin-commons.js, ap1.js
// admin-page2.html: commons.js, admin-commons.js, ap2.js
configuration = {
entry: {
p1: "./page1",
p2: "./page2",
commons: "./entry-for-the-commons-chunk"
},
plugins: [
new CommonsChunkPlugin("commons", "commons.js")
]
};
//
// https://webpack.github.io/docs/long-term-caching.html
//
configuration = {
output: {
path: path.join(__dirname, "assets", "[hash]"),
publicPath: "assets/[hash]/",
filename: "output.[hash].bundle.js",
chunkFilename: "[id].[hash].bundle.js"
}
};
configuration = { output: { chunkFilename: "[chunkhash].bundle.js" } };
declare var require: any;
declare var path: any;
configuration = {
plugins: [
function() {
this.plugin("done", function(stats: any) {
require("fs").writeFileSync(
path.join(__dirname, "...", "stats.json"),
JSON.stringify(stats.toJson()));
});
}
]
};
//
// https://webpack.github.io/docs/list-of-plugins.html
//
var plugin: webpack.Plugin;
var resourceRegExp: any;
var newResource: any;
var contextRegExp: any;
var newContentResource: any;
var newContentRecursive: any;
var newContentRegExp: any;
var requestRegExp: any;
var options: any;
var definitions: any;
var paths: any;
var preferEntry = true;
var context: any;
var request: any;
var types: any;
var banner: any;
var plugins: webpack.Plugin[];
plugin = new webpack.NormalModuleReplacementPlugin(resourceRegExp, newResource);
plugin = new webpack.ContextReplacementPlugin(
resourceRegExp,
newContentResource,
newContentRecursive,
newContentRegExp);
plugin = new webpack.ContextReplacementPlugin(
resourceRegExp,
newContentResource,
newContentRecursive);
plugin = new webpack.ContextReplacementPlugin(
resourceRegExp,
newContentResource);
plugin = new webpack.ContextReplacementPlugin(resourceRegExp);
plugin = new webpack.IgnorePlugin(requestRegExp);
plugin = new webpack.IgnorePlugin(requestRegExp, contextRegExp);
plugin = new webpack.PrefetchPlugin(context, request);
plugin = new webpack.PrefetchPlugin(request);
plugin = new webpack.ResolverPlugin(plugins, types);
plugin = new webpack.ResolverPlugin(plugins);
plugin = new webpack.ResolverPlugin([
new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"])
], ["normal", "loader"]);
plugin = new webpack.ResolverPlugin([
new webpack.ResolverPlugin.FileAppendPlugin(['/dist/compiled-moduled.js'])
]);
plugin = new webpack.BannerPlugin(banner, options);
plugin = new webpack.optimize.DedupePlugin();
plugin = new webpack.optimize.LimitChunkCountPlugin(options);
plugin = new webpack.optimize.MinChunkSizePlugin(options);
plugin = new webpack.optimize.OccurenceOrderPlugin(preferEntry);
plugin = new webpack.optimize.UglifyJsPlugin(options);
plugin = new webpack.optimize.UglifyJsPlugin();
plugin = new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
});
plugin = new webpack.optimize.UglifyJsPlugin({
mangle: {
except: ['$super', '$', 'exports', 'require']
}
});
plugin = new webpack.optimize.CommonsChunkPlugin(options);
plugin = new CommonsChunkPlugin({
name: "commons",
// (the commons chunk name)
filename: "commons.js",
// (the filename of the commons chunk)
// minChunks: 3,
// (Modules must be shared between 3 entries)
// chunks: ["pageA", "pageB"],
// (Only use these entries)
});
plugin = new CommonsChunkPlugin({
// names: ["app", "subPageA"]
// (choose the chunks, or omit for all chunks)
children: true,
// (select all children of chosen chunks)
// minChunks: 3,
// (3 children must share the module before it's moved)
});
plugin = new CommonsChunkPlugin({
// names: ["app", "subPageA"]
// (choose the chunks, or omit for all chunks)
children: true,
// (use all children of the chunk)
async: true,
// (create an async commons chunk)
// minChunks: 3,
// (3 children must share the module before it's separated)
});
plugin = new webpack.optimize.AggressiveMergingPlugin(options);
plugin = new webpack.dependencies.LabeledModulesPlugin();
plugin = new webpack.DefinePlugin(definitions);
plugin = new webpack.DefinePlugin({
VERSION: JSON.stringify("5fa3b9"),
BROWSER_SUPPORTS_HTML5: true,
TWO: "1+1",
"typeof window": JSON.stringify("object")
});
plugin = new webpack.ProvidePlugin(definitions);
plugin = new webpack.ProvidePlugin({
$: "jquery"
});
plugin = new webpack.SourceMapDevToolPlugin({
//// asset matching
//test: string | RegExp | Array,
//include: string | RegExp | Array,
//exclude: string | RegExp | Array,
//
//// file and reference
//filename: string,
//append: bool | string,
//
//// sources naming
//moduleFilenameTemplate: string,
//fallbackModuleFilenameTemplate: string,
//
//// quality/performance
//module: bool,
//columns: bool,
//lineToLine: bool | object
});
plugin = new webpack.HotModuleReplacementPlugin();
plugin = new webpack.ExtendedAPIPlugin();
plugin = new webpack.NoErrorsPlugin();
plugin = new webpack.WatchIgnorePlugin(paths);
+261
View File
@@ -0,0 +1,261 @@
// Type definitions for webpack 1.12.2
// Project: https://github.com/webpack/webpack
// Definitions by: Qubo <https://github.com/tkqubo>
// Definitions: https://github.com/borisyankov/DefinitelyTyped
declare module "webpack" {
namespace webpack {
interface Configuration {
entry?: string|Entry;
output?: Output;
module?: Module;
plugins?: (Plugin|Function)[];
}
interface Entry {
[name: string]: string|string[];
}
interface Output {
path?: string;
filename?: string;
chunkFilename?: string;
publicPath?: string;
}
interface Module {
loaders?: Loader[];
}
interface Loader {
test: RegExp;
loader?: string;
loaders?: string[];
query?: {
[name: string]: any;
}
}
interface Plugin { }
interface Webpack {
/**
* optimize namespace
*/
optimize: Optimize;
/**
* dependencies namespace
*/
dependencies: Dependencies;
/**
* Replace resources that matches resourceRegExp with newResource.
* If newResource is relative, it is resolve relative to the previous resource.
* If newResource is a function, it is expected to overwrite the request attribute of the supplied object.
*/
NormalModuleReplacementPlugin: NormalModuleReplacementPluginStatic;
/**
* Replaces the default resource, recursive flag or regExp generated by parsing with newContentResource,
* newContentRecursive resp. newContextRegExp if the resource (directory) matches resourceRegExp.
* If newContentResource is relative, it is resolve relative to the previous resource.
* If newContentResource is a function, it is expected to overwrite the request attribute of the supplied object.
*/
ContextReplacementPlugin: ContextReplacementPluginStatic;
/**
* Dont generate modules for requests matching the provided RegExp.
*/
IgnorePlugin: IgnorePluginStatic;
/**
* A request for a normal module, which is resolved and built even before a require to it occurs.
* This can boost performance. Try to profile the build first to determine clever prefetching points.
*/
PrefetchPlugin: PrefetchPluginStatic;
/**
* Apply a plugin (or array of plugins) to one or more resolvers (as specified in types).
*/
ResolverPlugin: ResolverPluginStatic;
/**
* Adds a banner to the top of each generated chunk.
*/
BannerPlugin: BannerPluginStatic;
/**
* Define free variables. Useful for having development builds with debug logging or adding global constants.
*/
DefinePlugin: DefinePluginStatic;
/**
* Automatically loaded modules.
* Module (value) is loaded when the identifier (key) is used as free variable in a module.
* The identifier is filled with the exports of the loaded module.
*/
ProvidePlugin: ProvidePluginStatic;
/**
* Adds SourceMaps for assets.
*/
SourceMapDevToolPlugin: SourceMapDevToolPluginStatic;
/**
* Enables Hot Module Replacement. (This requires records data if not in dev-server mode, recordsPath)
* Generates Hot Update Chunks of each chunk in the records.
* It also enables the API and makes __webpack_hash__ available in the bundle.
*/
HotModuleReplacementPlugin: HotModuleReplacementPluginStatic;
/**
* Adds useful free vars to the bundle.
*/
ExtendedAPIPlugin: ExtendedAPIPluginStatic;
/**
* When there are errors while compiling this plugin skips the emitting phase (and recording phase),
* so there are no assets emitted that include errors. The emitted flag in the stats is false for all assets.
*/
NoErrorsPlugin: NoErrorsPluginStatic;
/**
* Does not watch specified files matching provided paths or RegExps.
*/
WatchIgnorePlugin: WatchIgnorePluginStatic;
}
interface Optimize {
/**
* Search for equal or similar files and deduplicate them in the output.
* This comes with some overhead for the entry chunk, but can reduce file size effectively.
* This is experimental and may crash, because of some missing implementations. (Report an issue)
*/
DedupePlugin: optimize.DedupePluginStatic;
/**
* Limit the chunk count to a defined value. Chunks are merged until it fits.
*/
LimitChunkCountPlugin: optimize.LimitChunkCountPluginStatic;
/**
* Merge small chunks that are lower than this min size (in chars). Size is approximated.
*/
MinChunkSizePlugin: optimize.MinChunkSizePluginStatic;
/**
* Assign the module and chunk ids by occurrence count. Ids that are used often get lower (shorter) ids.
* This make ids predictable, reduces to total file size and is recommended.
*/
OccurenceOrderPlugin: optimize.OccurenceOrderPluginStatic;
/**
* Minimize all JavaScript output of chunks. Loaders are switched into minimizing mode.
* You can pass an object containing UglifyJs options.
*/
UglifyJsPlugin: optimize.UglifyJsPluginStatic;
CommonsChunkPlugin: optimize.CommonsChunkPluginStatic;
/**
* A plugin for a more aggressive chunk merging strategy.
* Even similar chunks are merged if the total size is reduced enough.
* As an option modules that are not common in these chunks can be moved up the chunk tree to the parents.
*/
AggressiveMergingPlugin: optimize.AggressiveMergingPluginStatic;
}
interface Dependencies {
/**
* Support Labeled Modules.
*/
LabeledModulesPlugin: dependencies.LabeledModulesPluginStatic;
}
interface DirectoryDescriptionFilePluginStatic {
new(file: string, files: string[]): Plugin;
}
interface NormalModuleReplacementPluginStatic {
new(resourceRegExp: any, newResource: any): Plugin;
}
interface ContextReplacementPluginStatic {
new(resourceRegExp: any, newContentResource?: any, newContentRecursive?: any, newContentRegExp?: any): Plugin
}
interface IgnorePluginStatic {
new(requestRegExp: any, contextRegExp?: any): Plugin;
}
interface PrefetchPluginStatic {
new(context: any, request: any): Plugin;
new(request: any): Plugin;
}
interface ResolverPluginStatic {
new(plugins: Plugin[], files?: string[]): Plugin;
DirectoryDescriptionFilePlugin: DirectoryDescriptionFilePluginStatic;
/**
* This plugin will append a path to the module directory to find a match,
* which can be useful if you have a module which has an incorrect “main” entry in its package.json/bower.json etc (e.g. "main": "Gruntfile.js").
* You can use this plugin as a special case to load the correct file for this module. Example:
*/
FileAppendPlugin: FileAppendPluginStatic;
}
interface FileAppendPluginStatic {
new(files: string[]): Plugin;
}
interface BannerPluginStatic {
new(banner: any, options: any): Plugin;
}
interface DefinePluginStatic {
new(definitions: any): Plugin;
}
interface ProvidePluginStatic {
new(definitions: any): Plugin;
}
interface SourceMapDevToolPluginStatic {
new(options: any): Plugin;
}
interface HotModuleReplacementPluginStatic {
new(): Plugin;
}
interface ExtendedAPIPluginStatic {
new(): Plugin;
}
interface NoErrorsPluginStatic {
new(): Plugin;
}
interface WatchIgnorePluginStatic {
new(paths: RegExp[]): Plugin;
}
namespace optimize {
interface DedupePluginStatic {
new(): Plugin;
}
interface LimitChunkCountPluginStatic {
new(options: any): Plugin
}
interface MinChunkSizePluginStatic {
new(options: any): Plugin;
}
interface OccurenceOrderPluginStatic {
new(preferEntry: boolean): Plugin;
}
interface UglifyJsPluginStatic {
new(options?: any): Plugin;
}
interface CommonsChunkPluginStatic {
new(chunkName: string, filenames?: string|string[]): Plugin;
new(options?: any): Plugin;
}
interface AggressiveMergingPluginStatic {
new(options: any): Plugin;
}
}
namespace dependencies {
interface LabeledModulesPluginStatic {
new(): Plugin;
}
}
}
var webpack: webpack.Webpack;
//export default webpack;
export = webpack;
}