Webpack3で、開発するのに慣れていたんだが、知らぬ間にVer4のwebpackが出ている。
webpack4からは、コンフィグレスを目指しているみたいだけど、コンフィグも多少いるし、Ver3とは書き方がずいぶん替わっているので、軽くまとめておく。

開発フォルダ作成

[bash]

cd ~/
mkdir workspace
mkdir wp4react
cd workspace/wp4react

npm init -y

mkdir dist src
mkdir src/components

[/bash]

開発用パッケージの導入

[bash]

npm i -D babel-core babel-loader babel-preset-env babel-preset-react
npm i -D webpack webpack-cli webpack-dev-server

[/bash]

必要パッケージの導入

[bash]

npm i -S react react-dom

[/bash]

package.jsonの調整

testだけになっているところに、buildとstart を追加。

これで、 npm run build/ npm run start が使えるようになる。

[bash]

“scripts”: {
“test”: “echo \”Error: no test specified\” && exit 1″,
“build”: “webpack”,
“start”: “webpack-dev-server –history-api-fallback”
},

[/bash]

webpack.config.jsの調整

ルートフォルダにwebpack.config.jsファイルを作成します。
ここで、reactが動作するための最低限の設定を書きます。
（結局、設定ファイルいるじゃん、、、というのはさておき。）

CSSやSCSSを読みこんだり、画像ファイルを読み込むところはまだ、調べていないのであしからず。

[bash]

module.exports = {
mode: ‘development’,
entry: ‘./src/main.js’,
output: {
path: `${__dirname}/dist`,
filename: ‘main.js’
},
module: {
rules: [
{
test: /\.js$/,
use: [
{
loader: ‘babel-loader’,
options: {
presets: [
[‘env’, {‘modules’: false}],
‘react’
]
}
}
],
exclude: /node_modules/,
}
]
},

devServer: {
contentBase: “dist”,
open: true
}
};

[/bash]

Reactの極小アプリを作る

wp4react/src/main.js

[bash]

import React from “react”
import ReactDOM from “react-dom”
import HelloComp from “./components/HelloComp”

document.write(“

“)

ReactDOM.render (
,
document.getElementById(“root”)
)

[/bash]

wp4react/src/components/HelloComp.js

[bash]

import React from “react”

class HelloComp extends React.Component {
render () {
return (

)
}
}

export default HelloComp

[/bash]

wp4react/dist/index.html

[bash]

[/bash]

動作検証

http://localhost:8080がブラウザーで起動します。

[bash]

npm run start

[/bash]

Sassファイルもインクルード

sassも一緒に開発するのが普通なので、そのために必要な処理を列記しておきます。

開発用パッケージの導入

[bash]

npm i -D sass-loader node-sass style-loader css-loader

[/bash]

[bash]

cd ~/workspace/wp4react/src
mkdir sass

[/bash]

Sassのサンプルコード挿入

wp4react/src/sass/common.scss

[bash]

@import ‘./modules/first.scss’;

[/bash]

wp4react/src/sass/modules/first.scss

[bash]
.hello_sass {
font-size: 20px;
color: #8372ff;
}

[/bash]

webpack.config.jsで sassを読み込めるように

[bash]

const MODE = ‘development’
const enableSourceMap = (MODE === ‘development’)

module.exports = {
mode: MODE,
entry: ‘./src/main.js’,
output: {
path: `${__dirname}/dist`,
filename: ‘main.js’
},
module: {
rules: [
{
test: /\.js$/,
use: [
{
loader: ‘babel-loader’,
options: {
presets: [
[‘env’, {‘modules’: false}],
‘react’
]
}
}
],
exclude: /node_modules/,
},
{
test: /\.scss/,
use: [
‘style-loader’,
{
loader: ‘css-loader’,
options: {
url: false,
sourceMap: enableSourceMap,
importLoaders: 2
}
},
{
loader: ‘sass-loader’,
options: {
sourceMap: enableSourceMap,
}

}

]
}
]
},

devServer: {
contentBase: “dist”,
open: true
}
};

[/bash]

アプリにsass読み込みを追記

wp4react/src/main.js

[bash]

import React from “react”
import ReactDOM from “react-dom”
import HelloComp from “./components/HelloComp”

import “./sass/common.scss” ※※※※※ 追記 ※※※※

document.write(“

“)

ReactDOM.render (
,
document.getElementById(“root”)
)

[/bash]
以上。

次の記事で、Webpack4環境でReduxのTodoサンプルを動かすというのを
書いてみようと思います。