あいつの日誌β

働きながら旅しています。

webpack

2018年春からフロントエンドを始める為の開発環境構築手順

あらすじ 春ですね。新人研修の準備をしましょう。 動作環境 babel-preset-env はこの記事を作成している時点では version 1 を使っています。しばらくすると version 2になるかもしれません。 % cat package.json { "name": "practice-frontend", "version"…

webpack extensions の指定方法

hogehoge.js を require(‘hogehoge’) しているなら resolve: { extensions: [".js"] } fugafuga.jsx も require(‘fugafuga’) しているなら resolve: { extensions: [".js", ".jsx"] } mogemoge.json も require(‘mogemoge’)しているなら resolve: { extensio…

webpack.config.js で複数のエントリーポイントを指定する

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 2: Module not found: Error: Cannot resolve 'file' or 'directory' node_modules/@kadira/storybook/dist/server/addons.js

あらすじ ある日 webpack の version を上げたら extensions に empty な '' を指定するのだめと怒られるのでその指定を削除したら storybook がなんかエラーを吐き出すようになった時のメモです。 状況 React + Redux で既存の Single Page Application で…

TypeError: webpack.optimize.OccurenceOrderPlugin is not a constructor

以下のようなエラーが出た場合 TypeError: webpack.optimize.OccurenceOrderPlugin is not a constructor 関数名が変わりました。 webpack.optimize.OccurrenceOrderPlugin

Single Page Application の Mock Server を作る 2016

対象読者 以下のワードに興味が無い方はたぶん読まなくても良い記事です。 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…

Using Hot Module Replacement with React

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…

webpack で複数の entry ファイルを出力する

あらすじ ユーザー画面と管理画面を 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…

Webpack tutorial to use Bootstrap (Part3)

おさらい Part1 では ES2015 なコードを webpack で使う手順を紹介しました。 Part2 では Bootstrap の CSS を導入する手順を紹介しました。 Part3 では Bootstrap の Javascript を使っている Components を使用する手順を紹介します。 Lesson5: グローバル…

webpack tutorial to use Bootstrap (Part1)

あらすじ webpack はイケてるツールなんだけど、いまいち何やっているか分かっていなかったので調べた。 Part1 では ES6 を導入する手順を説明します。 Lesson 0: 準備 mkdir practice-webpack && cd $_ mkdir src www echo 'node_modules' > .gitignore npm…