Posted at

Webpackを使ってReact, Sass, es2015の開発環境を構築してみる

More than 1 year has passed since last update.

reactの環境構築の際webpack1.0系と2.0系の設定の違いに悩まされたのと、日本語での情報があまりないので書いていきたいと思います


WebpackでReactの環境構築

mkdirでプロジェクトを作ってyarn init



yarn init

トランスパイラにはbabelを使用します。

babel, webpackを追加。

yarn add webpack babel-core babel-loader babel-preset-es2015 babel-preset-react --dev

react を追加していきます。

yarn add react react-dom


webpack.config.jsの作成

プロジェクトのルートディレクトリで



touch webpack.config.js

webpack configを編集していきます。

ここでは1系と2系の違いだけを書いていきます。


webpack.config.js

const path = require('path');

const webpack = require('webpack');

module.exports = {
context: path.join(__dirname, 'src'),
entry: {
bundle: './index.js'
},
output: {
path: path.join(__dirname, 'dist'),
filename: '[name].js'
},
module: {
rules: [
{
loader: 'babel-loader',
test: /\.js[x]?$/,
exclude: /node_modules/,
options: {
presets: ["es2015", "react"]
},
}
],
},
devServer: {
contentBase: 'dist'
},
plugins: [
new webpack.optimize.UglifyJsPlugin(),
new webpack.optimize.AggressiveMergingPlugin(),
],
devtool: 'source-map',
resolve: {
extensions: ['.js', '.jsx']
}

}


参考

https://webpack.js.org/concepts/

module.loaders: の部分がmodule.rulesになり、

module.loaders.loaderが module.loader.rulesになっていました。

(トランスパイラのローダーを設定するとこはmodule.rules.loaderでないといけない。)

package.jsonを編集していきます。

"scripts"オプションを入れることによって任意のコマンドを定義できます。


package.json

{

"name": "new_redux_todo",
"version": "1.0.0",
"main": "index.js",
"author": "Y",
"license": "MIT",
"dependencies": {
"react": "^15.4.2",
"react-dom": "^15.4.2",
"react-redux": "^5.0.3",
"redux": "^3.6.0",
"webpack-dev-server": "^2.4.2"
},
"scripts": {
"start": "webpack-dev-server --no-inline"
},
"devDependencies": {
"babel-core": "^6.24.0",
"babel-loader": "^6.4.1",
"babel-preset-es2015": "^6.24.0",
"babel-preset-react": "^6.23.0",
"webpack": "^2.3.2"
}
}

この場合

"scripts": {

"start": "webpack-dev-server --no-inline"
}

は yarn run startを実行すると webpack-dev-server --no-inlineを実行します。


Sassの環境設定。

上記と同じようにしてSassを使えるように設定していきます。

sassを読み込めるように sass-loader, style-loaderなどを追加していきます。

yarn add css-loader extract-text-webpack-plugin node-sass sass-loader style-loader webpack

configファイルはこんな感じ


webpack.config.js

const path = require('path');

const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = [
{
context: path.join(__dirname, 'src'),
entry: {
bundle: './index.js'
},
output: {
path: path.join(__dirname, 'dist'),
filename: '[name].js'
},
module: {
rules: [
{
loader: 'babel-loader',
test: /\.js[x]?$/,
exclude: /node_modules/,
options: {
presets: ["es2015", "react"]
},
}
],
},
devServer: {
contentBase: 'dist'
},
plugins: [
new webpack.optimize.UglifyJsPlugin(),
new webpack.optimize.AggressiveMergingPlugin(),
],
devtool: 'source-map',
resolve: {
extensions: ['.js', '.jsx']
}

},
{
context: path.join(__dirname, 'src'),
entry: {
bundle: './index.scss'
},
output: {
path: path.join(__dirname, 'dist/css'),
filename: '[name].css'
},
module: {
rules: [
{
test: /\.scss$/,
use: ExtractTextPlugin.extract(
{
fallback: "style-loader",
use: ["css-loader", "sass-loader"]
}
)
}
]
},
plugins: [
new ExtractTextPlugin('bundle.css')
]
}
]


これで yarn startすると

chunk    {0} extract-text-webpack-plugin-output-filename 57.1 kB [entry] [rendered]

            [0] ./~/css-loader/lib/css-base.js 2.19 kB {0} [built]
            [1] ./~/base64-js/index.js 3.48 kB {0} [built]
            [2] ./~/buffer/index.js 48.6 kB {0} [built]
            [3] ./~/css-loader!./~/sass-loader/lib/loader.js!./src/index.scss 163 bytes {0} [built]
            [4] ./~/ieee754/index.js 2.05 kB {0} [built]
            [5] ./~/isarray/index.js 132 bytes {0} [built]
            [6] (webpack)/buildin/global.js 509 bytes {0} [built]
webpack: Compiled successfully.

こうなるとコンパイル成功です!

以上webpackの設定方法でした。

参考

http://qiita.com/keitaMatsuo/items/65d7a613918747930be9

http://qiita.com/chibi929/items/5e5f864a1fa46b082ed2#_reference-cc30c34d6abcce0a64a3