webアプリというよりは静的サイトですが、気にせず進めていきましょう。
webpack等インストール
$ yarn add webpack webpack-dev-server elm-webpack-loader file-loader style-loader css-loader url-loader
$ yarn add ace-css@1.1 font-awesome@4
私の環境では、webpack4.17.1がインストールされました。
webpack4から、cliは別モジュールになったようなので、webpack-cliというのもインストールします。この辺りは元のelm tutorialとは少し違います。また、webpack.config.jsを対話的に生成するコマンドwebpack-cli/initもインストールします。これらは開発環境のみで使用するため-Dオプションをつけます。また、コマンドとして使用するのでグローバルにインストールした方が楽なのですが、グローバルはなんか嫌なのでローカルに入れておきます。
$ yarn add -D webpack-cli
$ yarn add -D @webpack-cli/init
webpack.config.jsに何を書けばいいのかよくわからないので調べていたら、公式サイトに、GUIで簡単に作れるサイトが2つありました。
簡単な設定はできるようなので使える場面があるかもしれません。
今回はwebpack-cliで対話的に生成して見ます。ただ、パッケージをローカルにインストールし、パスも通してないので、yarnと一緒に使います。
対話環境の進め方（公式）
webpack.config.js自動生成（qiita）
ここでは、elm tutorialの設定ファイルとだいたい同じものを作ります。
# パスを通していれば、webpack-cli initで良い
yarn webpack-cli init
yarn run v1.5.1
$ /Users/reo/elmproject/shisetsu-0.0.1/node_modules/.bin/webpack-cli init
ℹ INFO For more information and a detailed description of each question, have a look at https://github.com/webpack/webpack-cli/blob/maste
r/INIT.md
ℹ INFO Alternatively, run `webpack(-cli) --help` for usage info.
? Will your application have multiple bundles? Yes
? Type the names you want for your modules (entry files), separated by comma [example: app,vendor] app
? What is the location of "app"? [example: ./src/app] ./src/index
? Which folder will your generated bundles be in? [default: dist]:
? Will you be using ES2015? No
? Will you use one of the below CSS solutions? CSS
ちなみに、3つ目の質問のところは、ファイルに書かれるのは./src/index.jsなのですが、対話の中で.jsまでつけてしまうとよくわからないエラーで対話が終了します。github issue
で、出来たファイルが以下。
const webpack = require('webpack');
const path = require('path');
/*
* SplitChunksPlugin is enabled by default and replaced
* deprecated CommonsChunkPlugin. It automatically identifies modules which
* should be splitted of chunk by heuristics using module duplication count and
* module category (i. e. node_modules). And splits the chunks…
*
* It is safe to remove "splitChunks" from the generated configuration
* and was added as an educational example.
*
* https://webpack.js.org/plugins/split-chunks-plugin/
*
*/
/*
* We've enabled UglifyJSPlugin for you! This minifies your app
* in order to load faster and run less javascript.
*
* https://github.com/webpack-contrib/uglifyjs-webpack-plugin
*
*/
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: 'style-loader',
options: {
sourceMap: true
}
},
{
loader: 'css-loader'
}
]
}
]
},
entry: {
app: './src/index.js'
},
output: {
filename: '[name].[chunkhash].js',
path: path.resolve(__dirname, 'dist')
},
mode: 'development',
plugins: [new UglifyJSPlugin()],
optimization: {
splitChunks: {
cacheGroups: {
vendors: {
priority: -10,
test: /[\\/]node_modules[\\/]/
}
},
chunks: 'async',
minChunks: 1,
minSize: 30000,
name: true
}
}
};
webpack.config.jsの書き方がよくわかっていなくても作れるかと思って期待したのですが、これだとelmファイルの設定とかを入れれなかったので、結局自分で編集しないといけません… まあでも一から作るよりは多少楽になったということにしておきます。
以下、足りない部分を追記。html, elm, woff, ttfファイルのローダー設定とnoParseと、devServerのところを追加しました。
それと、あとでやってみてわかった事ですが、エントリーポイントがfilename: '[name].[chunkhash].js'となっていますが実行時にこのファイル名を指定する方法がわからなかったのでハッシュ無しのfilename: '[name].js'としておきました。ここまで色々追記・修正するとなると、対話環境で自動生成というのはあまり意味がなかったかもしれません。
const webpack = require('webpack');
const path = require('path');
/*
* SplitChunksPlugin is enabled by default and replaced
* deprecated CommonsChunkPlugin. It automatically identifies modules which
* should be splitted of chunk by heuristics using module duplication count and
* module category (i. e. node_modules). And splits the chunks…
*
* It is safe to remove "splitChunks" from the generated configuration
* and was added as an educational example.
*
* https://webpack.js.org/plugins/split-chunks-plugin/
*
*/
/*
* We've enabled UglifyJSPlugin for you! This minifies your app
* in order to load faster and run less javascript.
*
* https://github.com/webpack-contrib/uglifyjs-webpack-plugin
*
*/
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: 'style-loader',
options: {
sourceMap: true
}
},
{
loader: 'css-loader'
}
]
},
{
test: /\.html$/,
exclude: /node_modules/,
loader: 'file-loader?name=[name].[ext]',
},
{
test: /.elm$/,
exclude: [
/elm_stuff/,
/node_modules/
],
use: [
{
loader: 'elm-webpack-loader?verbose=true&warn=true'
}
]
},
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'url-loader?limit=10000&mimetype=application/font-woff',
},
{
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'file-loader',
},
],
noParse: /\.elm$/,
},
entry: {
app: './src/index.js'
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
},
mode: 'development',
plugins: [new UglifyJSPlugin()],
optimization: {
splitChunks: {
cacheGroups: {
vendors: {
priority: -10,
test: /[\\/]node_modules[\\/]/
}
},
chunks: 'async',
minChunks: 1,
minSize: 30000,
name: true
}
},
devServer: {
inline: true,
stats: { colors: true },
}
};
出来たら、ファイル名をwebpack.config.jsにしておきましょう。
$ mv webpack.dev.js webpack.config.js
確かwebpack実行時にどの設定ファイルを使うかも指定できたような気がしますが面倒なのでこうしておきます。
次はまず動作確認のため、index.html, index.js, Main.elmを最低限の内容で書いていきます。