Webpack2 + Riot + Sass


前にWebpackでRiotとSassをビルドする手順を買いていましたがv2で少し書き方が変わったのでまとめて修正しました。参考までに。

http://qiita.com/yaaah93/items/f06a993215d55215ed08
http://qiita.com/yaaah93/items/f8293846134efc83634a

変更点は以下で詳しく書かれてたので参考にしました。
http://javascriptplayground.com/blog/2016/10/moving-to-webpack-2/

## インストール

まずは必要なライブラリをYarnでインストールします。
（npmでもコマンドを置き換えてインストールできます）

### Yarnの初期化とwebpackのインストール

```bash
# Yarn init
$ yarn init -y
# Webpack
$ yarn add -D webpack
```

### Riotのインストール

```bash
# babel + Riot-loader
$ yarn add -D babel-core babel-loader babel-preset-es2015 babel-preset-es2015-riot riot-tag-loader
# Riotjs本体
$ yarn add riot
```

2017/04/09追記
おまけ？に書いてたWarningは`riotjs-loader`を使っていたためのようです。コメントいただいてた`riot-tag-loader`をインストールすることで解消されました。

### Sassのインストール

```bash
# node-sass、各loader
$ yarn add -D node-sass style-loader css-loader sass-loader extract-text-webpack-plugin
```

## webpackの設定

全体的には`module.loaders`が`module.use`に変わったり、ローダーの呼び出すタイミングを`preLoader`で書いていたものが`enforce`に変わったりしてます。

`extract-text-webpack-plugin`も少し変わっていてこちらもv2にアップデートされています。以前まではクエリっぽい記述でしたがオプションっぽい書き方できるようになっているのでだいぶわかりやすくなった感はあります。

```js:webpack.config.babel.js
import path from 'path';
import webpack from 'webpack';
import ExtractTextPlugin from 'extract-text-webpack-plugin';

export default [
	{
		context: path.join(__dirname, './js'),
		entry: {
			app: './app.js'
		},
		output: {
			path: path.join(__dirname, '../js'),
			filename: '[name].js'
		},
		module: {
			rules: [
				{
					test: /\.tag$/,
					exclude: /node_modules/,
					enforce: 'pre',
					use: 'riot-tag-loader'
				},
				{
					test: /\.js$|\.tag$/,
					exclude: /node_modules/,
					use: 'babel-loader'
				}
			]
		},
		resolve: {
			extensions: ['*', '.js', '.tag']
		},
		plugins: [
			new webpack.ProvidePlugin({
				riot: 'riot'
			})
		]
	},
	{
		context: path.join(__dirname, './css'),
		entry: {
			style: './style.scss'
		},
		output: {
			path: path.join(__dirname, '../css'),
			filename: '[name].css'
		},
		module: {
			rules: [
				{
					test: /\.scss$/,
					exclude: /node_modules/,
					use: ExtractTextPlugin.extract({
						fallback: "style-loader",
						use: [
							{
								loader: "css-loader",
								options: {
									url: false,
									minimize: true
								}
							},
							"sass-loader"
						]
					})
				}
			]
		},
		plugins: [
			new ExtractTextPlugin({
				filename: '[name].css'
			})
		]
	}
];
```

.babelrcも以下のような形です。
v2ではTree shakingが実装されていることで`["es2015", {"modules": false}]`を記述することで動作するようですがwebpackのコンフィグをes6で書いてるせいかこの記述を追加するとうまく動作しませんでしたのでコメントアウトしてます。
原因は今度またゆっくり調べてみる...

```js:.babelrc
{
	"presets": [
		// [ "es2015", { "modules": false } ],
		"es2015",
		"es2015-riot"
	]
}
```

## 実行

package.jsonの中身は以下

```js:package.json
{
  "name": "asset",
  "version": "1.0.0",
  "main": "webpack.config.babel.js",
  "repository": {},
  "license": "MIT",
  "devDependencies": {
    "babel-core": "^6.24.1",
    "babel-loader": "^6.4.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-es2015-riot": "^1.1.0",
    "css-loader": "^0.28.0",
    "extract-text-webpack-plugin": "^2.1.0",
    "node-sass": "^4.5.2",
    "riot-tag-loader": "^1.0.0",
    "sass-loader": "^6.0.3",
    "style-loader": "^0.16.1",
    "webpack": "^2.3.3"
  },
  "dependencies": {
    "riot": "^3.4.0"
  },
  "scripts": {
    "watch": "webpack --progress --watch"
  }
}
```

最後の`scripts`は自分で追記してますが基本的にはバージョンがあがったくらいで変更はほとんどありません。

あとはターミナルを起動して`yarn watch`とかしてやるとjsとcssがビルドされるようになると思います。

## おまけ？（解決しましたのがそのまま...）

`npm list --depth=0`で確認すると`UNMET PEER DEPENDENCY`と表示されます。必要なバージョンのパッケージがインストールされていないと怒られてる感がありますが実際には動作しました。
自分の環境だけ？

![npm.png](https://qiita-image-store.s3.amazonaws.com/0/119043/3d65586d-039c-3e54-33e1-2f4cd8939d8e.png "npm.png")