LoginSignup
9

More than 5 years have passed since last update.

Webpack2 + Riot + Sass

Last updated at Posted at 2017-04-08

前に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のインストール

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

Riotのインストール

# 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のインストール

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

webpackの設定

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

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

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で書いてるせいかこの記述を追加するとうまく動作しませんでしたのでコメントアウトしてます。
原因は今度またゆっくり調べてみる...

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

実行

package.jsonの中身は以下

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9