CLOVER🍀

That was when it all began.

webpackとwebpack-dev-server、html-loaderと合わせて、JsRenderを試す(再)

以前書いたこちらのエントリについてですが、

webpackとwebpack-dev-server、html-loaderと合わせて、JsRenderを試す - CLOVER

どうもBowerは最近は避けた方がよさそうな風潮なので、Bower抜きでなんとかするようにしてみました。

とはいえ、

$ npm install --save jsrender

では相変わらず違う物が入ってしまうので、ここはちょっとコマンド変更。

最初から含めて、以下のようになりました。

$ npm init
$ npm install -g gulp webpack
$ npm install --save-dev gulp gulp-util webpack webpack-dev-server
$ npm install --save jquery html-loader https://github.com/BorisMoore/jsrender/archive/v1.0.0-rc.70.tar.gz

「npm install」の引数に、tarballのURLが取れたりできる、と。

install | npm Documentation

webpackの設定は、以下のようになりました。
webpack.config.js

var path = require("path");
var webpack = require("webpack");

var currentWorkingDirectory = process.cwd();

module.exports = {
    cache: true,
    entry: {
        app: "./src/scripts/main.js"
    },
    output: {
		path: path.join(__dirname, "dist/scripts"),
		publicPath: "dist/scripts/",
		filename: "[name].js",
		chunkFilename: "[chunkhash].js",
        // sourceMapFilename: "[file].map"
    },
    loaders: [
        { test: "/\.html$/", loader: "html?minize" }
    ],
    resolve: {
        alias: {
            "html-templates": currentWorkingDirectory + "/src/templates"
        }
    },
    devtool: "#source-map",
    plugins: [
        new webpack.DefinePlugin({
			"process.env": {
				// This has effect on the react lib size
				"NODE_ENV": JSON.stringify("production")
			}
		}),
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.UglifyJsPlugin()
    ]
};

その他は、元のエントリと同じです。

とはいえ、Bowerではなくnpmを使ってインストールでかつjQueryと合わせたい場合って、これでいいのかな…。