webpack
あらすじ 春ですね。新人研修の準備をしましょう。 動作環境 babel-preset-env はこの記事を作成している時点では version 1 を使っています。しばらくすると version 2になるかもしれません。 % cat package.json { "name": "practice-frontend", "version"…
hogehoge.js を require(‘hogehoge’) しているなら resolve: { extensions: [".js"] } fugafuga.jsx も require(‘fugafuga’) しているなら resolve: { extensions: [".js", ".jsx"] } mogemoge.json も require(‘mogemoge’)しているなら resolve: { extensio…
mkdir practice-webpack && cd $_ mkdir -p src/pages www/pages touch webpack.config.js npm init -y npm install --save-dev webpack create webpack.config.js const path = require('path') const webpack = require('webpack') module.exports = { dev…
あらすじ ある日 webpack の version を上げたら extensions に empty な '' を指定するのだめと怒られるのでその指定を削除したら storybook がなんかエラーを吐き出すようになった時のメモです。 状況 React + Redux で既存の Single Page Application で…
以下のようなエラーが出た場合 TypeError: webpack.optimize.OccurenceOrderPlugin is not a constructor 関数名が変わりました。 webpack.optimize.OccurrenceOrderPlugin
対象読者 以下のワードに興味が無い方はたぶん読まなくても良い記事です。 json-server と jwt browsersync と http-proxy-middleware npm-run-all --parallel 準備 % mkdir practice-mock-api && cd $_ % mkdir -p mock src/components www % npm init -y j…
Browsersync と webpack でやってみます。 Goal 少しわかりづらいのですが Live Reload を React Component 単位で行います。 準備 mkdir practice-react-hmr && cd $_ mkdir -p src/components www npm init -y npm install --save-dev browser-sync webpac…
あらすじ ユーザー画面と管理画面を SPA で作りたいんだけど component とか再利用したい時のお話です mkdir practice-webpack-output && cd $_ mkdir -p src/{app,admin} www/{app,admin} npm init -y npm install --save-dev webpack babel-core babel-loa…
おさらい Part1 では ES2015 なコードを webpack で使う手順を紹介しました。 Part2 では Bootstrap の CSS を導入する手順を紹介しました。 Part3 では Bootstrap の Javascript を使っている Components を使用する手順を紹介します。 Lesson5: グローバル…
あらすじ webpack はイケてるツールなんだけど、いまいち何やっているか分かっていなかったので調べた。 Part1 では ES6 を導入する手順を説明します。 Lesson 0: 準備 mkdir practice-webpack && cd $_ mkdir src www echo 'node_modules' > .gitignore npm…