前に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.loaders
がmodule.use
に変わったり、ローダーの呼び出すタイミングをpreLoader
で書いていたものがenforce
に変わったりしてます。
extract-text-webpack-plugin
も少し変わっていてこちらもv2にアップデートされています。以前まではクエリっぽい記述でしたがオプションっぽい書き方できるようになっているのでだいぶわかりやすくなった感はあります。
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で書いてるせいかこの記述を追加するとうまく動作しませんでしたのでコメントアウトしてます。
原因は今度またゆっくり調べてみる...
{
"presets": [
// [ "es2015", { "modules": false } ],
"es2015",
"es2015-riot"
]
}
実行
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
と表示されます。必要なバージョンのパッケージがインストールされていないと怒られてる感がありますが実際には動作しました。
自分の環境だけ?