Webpack4 で React環境を整える(sassも)

Webpack4 で React環境を整える(sassも)

Webpack4 で React環境を整える(sassも)

Webpack4 で React環境を整える(sassも) へのコメントはまだありません

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

webpack2

開発フォルダ作成

開発用パッケージの導入

必要パッケージの導入

package.jsonの調整

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

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

webpack.config.jsの調整

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

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

Reactの極小アプリを作る

wp4react/src/main.js

wp4react/src/components/HelloComp.js

wp4react/dist/index.html

動作検証

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

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

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

開発用パッケージの導入

Sassのサンプルコード挿入

wp4react/src/sass/common.scss

wp4react/src/sass/modules/first.scss

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

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

wp4react/src/main.js

以上。

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


About the author:

Tags:

Related Posts

No Comments

  1. ななしさん  - 2018年12月26日 - 1:45 PM
    返信 /

    2018/12/26現在では以下の対応が必要みたいです。
    $ npm install -D @babel/core @babel/preset-env @babel/preset-react
    webpack.config.js
    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: [
    [‘@babel/preset-env’, {‘modules’: false}], //@babel版に変更
    [‘@babel/preset-react’] //@babel版に変更
    ]
    }
    }
    ],
    exclude: /node_modules/,
    },
    {
    test: /\.scss/,
    use: [
    ‘style-loader’,
    {
    loader: ‘css-loader’,
    options: {
    url: false,
    sourceMap: true, //trueに変更
    importLoaders: 2
    }
    },
    {
    loader: ‘sass-loader’,
    options: {
    sourceMap: true, //trueに変更
    }
    }
    ]
    }
    ]
    },

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

Leave a comment

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

Back to Top