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"]) + ] +}; +//