Convert to Webpack Plugin

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2015 Eric Clemmons
+Copyright (c) 2016 Eric Clemmons
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -19,4 +19,3 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
-

README.md

@@ -1,13 +1,21 @@
-# npm-install-loader
+# npm-install-webpack-plugin
 
-> Webpack loader to automatically npm install & save dependencies.
+> Webpack plugin that automatically **installs & saves missing dependencies**
+> while you work!
 
+Seamless works with:
+- [x] Javascript
+  (e.g. `require`, `import`)
+- [x] CSS
+  (e.g. `@import "~bootstrap"`)
+- [x] Webpack loaders
+  (e.g. `babel-loader`, `file-loader`, etc.)
 
-[![travis build](https://img.shields.io/travis/ericclemmons/npm-install-loader.svg)](https://travis-ci.org/ericclemmons/npm-install-loader)
-[![Coverage Status](https://coveralls.io/repos/ericclemmons/npm-install-loader/badge.svg?branch=master&service=github)](https://coveralls.io/github/ericclemmons/npm-install-loader?branch=master)
-[![version](https://img.shields.io/npm/v/npm-install-loader.svg)](http://npm.im/npm-install-loader)
-[![downloads](https://img.shields.io/npm/dm/npm-install-loader.svg)](http://npm-stat.com/charts.html?package=npm-install-loader)
-[![MIT License](https://img.shields.io/npm/l/npm-install-loader.svg)](http://opensource.org/licenses/MIT)
+[![travis build](https://img.shields.io/travis/ericclemmons/npm-install-webpack-plugin.svg)](https://travis-ci.org/ericclemmons/npm-install-webpack-plugin)
+[![Coverage Status](https://coveralls.io/repos/ericclemmons/npm-install-webpack-plugin/badge.svg?branch=master&service=github)](https://coveralls.io/github/ericclemmons/npm-install-webpack-plugin?branch=master)
+[![version](https://img.shields.io/npm/v/npm-install-webpack-plugin.svg)](http://npm.im/npm-install-webpack-plugin)
+[![downloads](https://img.shields.io/npm/dm/npm-install-webpack-plugin.svg)](http://npm-stat.com/charts.html?package=npm-install-webpack-plugin)
+[![MIT License](https://img.shields.io/npm/l/npm-install-webpack-plugin.svg)](http://opensource.org/licenses/MIT)
 
 - - -
 
@@ -18,59 +26,42 @@ build script & server just to install
 a dependency you didn't know you needed until now.
 
 Instead, use `require` or `import` how you normally would and `npm install`
-will happen automatically install missing dependencies between reloads.
+will happen **automatically install & save missing dependencies** while you work!
 
 ### Usage
 
 In your `webpack.config.js`:
 
 ```js
-module: {
-  postLoaders: [
-    {
-      exclude: /node_modules/,
-      loader: "npm-install-loader",
-      test: /\.js$/,
-    },
-  ],
-}
+plugins: [
+  new NpmInstallPlugin(),
+],
 ```
 
-This will ensure that any other loaders
-(e.g. `eslint-loader`, `babel-loader`, etc.) have completed.
-
-### Saving
-
-This loader simply runs `npm install [modules]`.
-
-I recommend creating an `.npmrc` file
-in the root of your project with:
+**If you have an `.npmrc` file in your project,
+those arguments will be used:**
 
-```ini
+```
 save=true
+save-exact=true
 ```
 
-This will automatically save any dependencies anytime you run `npm install` (no need to pass `--save`).
-
-**Alternatively**, you can provide CLI arguments that get added directly to `npm install`:
+Alternatively, you can provide your own arguments to `npm install`:
 
 ```js
-postLoaders: [
-  {
-    exclude: /node_modules/,
-    loader: "npm-install-loader",
-    query: {
-      cli: {
-        registry: "..."   // --registry='...'
-        save: true,       // --save
-        saveExact: true,  // --save-exact
-      },
-    },
-    test: /\.js$/,
-  },
+plugins: [
+  new NpmInstallPlugin({
+    ...
+    cacheMin: 999999  // --cache-min=999999 (prefer NPM cached version)
+    registry: "..."   // --registry="..."
+    save: true,       // --save
+    saveDev: true,    // --save-dev
+    saveExact: true,  // --save-exact
+    ...
+  }),
 ],
-
+```
 
 ### License
 
-> MIT License 2015 © Eric Clemmons
+> MIT License 2016 © Eric Clemmons

example/.babelrc

@@ -0,0 +1,8 @@
+{
+  "presets": ["react", "es2015", "stage-0"],
+  "env": {
+    "development": {
+      "presets": ["react-hmre"]
+    }
+  }
+}

example/.gitignore

@@ -0,0 +1 @@
+build

example/.npmrc

@@ -0,0 +1,3 @@
+cache-min=9999999
+save=true
+save-exact=true

example/.nvmrc

@@ -0,0 +1 @@
+v5.5.0

example/README.md

@@ -0,0 +1,29 @@
+# `npm-install-webpack-plugin` Example
+
+> This example shows how it's possible to start with a minimal project setup
+> and rapidly develop by auto-installing both Javascript & CSS dependencies
+> without ever leaving the editor.
+
+## Usage
+
+It's recommended to install the same version of Node this is tested against:
+
+```shell
+$ nvm install
+$ nvm use
+```
+
+Install dependencies required to start working:
+
+```shell
+$ npm install
+```
+
+Start the server that (that doesn't do anything yet):
+
+```shell
+$ npm start
+```
+
+Finally, open <http://localhost:3000>, make changes to `server.js`
+and watch dependencies get installed as you go!

example/package.json

@@ -0,0 +1,19 @@
+{
+  "private": true,
+  "devDependencies": {
+    "babel-preset-es2015": "6.3.13",
+    "babel-preset-react": "6.3.13",
+    "babel-preset-react-hmre": "1.0.1",
+    "babel-preset-stage-0": "6.3.13",
+    "reload-server-webpack-plugin": "1.0.1",
+    "webpack": "1.12.11"
+  },
+  "scripts": {
+    "link": "(cd .. && npm link .) && npm link npm-install-webpack-plugin",
+    "postinstall": "npm run link",
+    "start": "webpack --config webpack.config.server.babel.js --watch"
+  },
+  "dependencies": {
+    "react": "0.14.6"
+  }
+}

example/src/client.js

@@ -0,0 +1,6 @@
+import React from "react";
+import DOM from "react-dom";
+
+import App from "./components/app";
+
+DOM.render(<App />, document.getElementById("app"));

example/src/components/App.css

@@ -0,0 +1 @@
+@import "~bootswatch/lumen/bootstrap.css";

example/src/components/App.js

@@ -0,0 +1,36 @@
+import React from "react";
+
+import "./App.css";
+
+export default class App extends React.Component {
+  render() {
+    return (
+      <div className="container">
+        <div className="page-header">
+          <h3>
+            <code>
+              npm-install-webpack-plugin
+            </code>
+          </h3>
+        </div>
+
+        <div className="jumbotron">
+          <h1>
+            It Works!
+          </h1>
+
+          <p>
+            Webpack has successfully compiled the application JS &amp; CSS.
+          </p>
+
+          <a
+            className="btn btn-primary btn-lg"
+            href="https://github.com/ericclemmons/npm-install-webpack-plugin"
+          >
+            View on Github
+          </a>
+        </div>
+      </div>
+    );
+  }
+}

example/src/server.js

@@ -0,0 +1,30 @@
+import express from "express";
+import webpack from "webpack";
+
+import client from "../webpack.config.client.babel";
+
+const compiler = webpack(client);
+
+export default express()
+  .get("/", (req, res) => res.send(`
+    <!doctype html>
+    <div id="app">
+      Waiting on <code>client.js</code> to execute...
+    </div>
+
+    <script src="client.js"></script>
+  `))
+  .use(require("webpack-dev-middleware")(compiler, {
+    noInfo: true,
+    publicPath: client.output.publicPath,
+    quiet: false,
+  }))
+  .use(require("webpack-hot-middleware")(compiler))
+  .listen(3000, (err) => {
+    if (err) {
+      return console.error(err);
+    }
+
+    console.info("Listening on http://localhost:3000/")
+  })
+;

example/webpack.config.babel.js

@@ -0,0 +1,32 @@
+import NpmInstallPlugin from "npm-install-webpack-plugin";
+import path from "path";
+
+export const defaults = {
+  context: process.cwd(),
+
+  externals: [],
+
+  module: {
+    loaders: [
+      { test: /\.css$/, loader: "style-loader" },
+      { test: /\.css$/, loader: "css-loader", query: { localIdentName: "[name]-[local]--[hash:base64:5]" } },
+      { test: /\.eot$/, loader: "file-loader" },
+      { test: /\.js$/, loader: "babel-loader", query: { cacheDirectory: true }, exclude: /node_modules/ },
+      { test: /\.json$/, loader: "json-loader" },
+      { test: /\.(png|jpg)$/, loader: "url-loader", query: { limit: 8192 } }, // Inline base64 URLs for <= 8K images
+      { test: /\.svg$/, loader: "url-loader", query: { mimetype: "image/svg+xml" } },
+      { test: /\.ttf$/, loader: "url-loader", query: { mimetype: "application/octet-stream" } },
+      { test: /\.(woff|woff2)$/, loader: "url-loader", query: { mimetype: "application/font-woff" } },
+    ],
+  },
+
+  output: {
+    chunkFilename: "[id].[hash:5]-[chunkhash:7].js",
+    devtoolModuleFilenameTemplate: "[absolute-resource-path]",
+    filename: "[name].js",
+  },
+
+  plugins: [
+    new NpmInstallPlugin(),
+  ],
+};

example/webpack.config.client.babel.js

@@ -0,0 +1,29 @@
+import path from "path";
+import webpack from "webpack";
+
+import { defaults } from "./webpack.config.babel";
+
+export default {
+  ...defaults,
+
+  entry: {
+    client: [
+      "webpack-hot-middleware/client?reload=true",
+      "./src/client.js",
+    ],
+  },
+
+  output: {
+    ...defaults.output,
+    libaryTarget: "var",
+    path: path.join(defaults.context, "build/client"),
+    publicPath: "/",
+  },
+
+  plugins: [
+    ...defaults.plugins,
+    new webpack.HotModuleReplacementPlugin(),
+  ],
+
+  target: "web",
+}

example/webpack.config.server.babel.js

@@ -0,0 +1,31 @@
+import ReloadServerPlugin from "reload-server-webpack-plugin";
+import path from "path";
+
+import { defaults } from "./webpack.config.babel";
+
+export default {
+  ...defaults,
+
+  entry: {
+    server: "./src/server.js",
+  },
+
+  externals: [
+    ...defaults.externals,
+    // Every non-relative module is external
+    /^[a-z\-0-9]+$/,
+  ],
+
+  output: {
+    ...defaults.output,
+    libraryTarget: "commonjs2",
+    path: path.join(defaults.context, "build/server"),
+  },
+
+  plugins: [
+    ...defaults.plugins,
+    new ReloadServerPlugin({ script: "./build/server/server.js" }),
+  ],
+
+  target: "node",
+}

index.js

@@ -1 +1 @@
-module.exports = require("./src/loader.js");
+module.exports = require("./src/plugin.js");