【Reactを始める方法】第5回 設定編 - Webpack
Reactを始める方法
tags: node
react
babel
webpack
【Reactを始める方法】第5回 設定編 - Webpack
連載の記事
- 【Reactを始める方法】目次
- 【Reactを始める方法】第1回 準備
- 【Reactを始める方法】第2回 インストール編 - Webpack
- 【Reactを始める方法】第3回 インストール編 - Babel
- 【Reactを始める方法】第4回 インストール編 - React
- 【Reactを始める方法】第5回 設定編 - Webpack
- 【Reactを始める方法】第6回 設定編 - Babel
- 【Reactを始める方法】第7回 実装編 - HelloWorld
今回やること
- Webpack の設定ファイルを作る
Webpackの設定ファイル
webpackの設定ファイルを作成します。
type nul > webpack.common.js type nul > webpack.dev.js type nul > webpack.prod.js
- webpack.common.js - 共通分
- webpack.dev.js - 開発用の環境設定
- webpack.prod.js - 本番用の環境設定
webpack.common.js
const CleanWebpackPlugin = require('clean-webpack-plugin'); const HtmlWebPackPlugin = require('html-webpack-plugin'); module.exports = { module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader' } }, { test: /\.html$/, use: [ { loader: 'html-loader', options: { minimize: true } } ] }, { test: /\.(svg|png|jpg|gif|jpeg)$/, use: [ { loader: 'file-loader', options: { name: '[path][name].[ext]', } } ] } ] }, output: { publicPath: '/', filename: '[name].[hash].js' }, plugins: [ new CleanWebpackPlugin(), new HtmlWebPackPlugin({ template: './src/index.html', filename: './index.html', favicon: './src/favicon.ico' }) ] };
favicon が用意できない時は、設定から消してください。
webpack.dev.js
const webpack = require('webpack'); const merge = require('webpack-merge'); const common = require('./webpack.common.js'); module.exports = merge(common, { mode: 'development', devtool: 'inline-source-map', module: { rules: [ { test: /\.(css)$/, use: [ 'style-loader', 'css-loader', ], }, ], }, plugins: [new webpack.HotModuleReplacementPlugin()], devServer: { contentBase: './dist', hot: true, host: '0.0.0.0', disableHostCheck: true, }, });
webpack.prod.js
const merge = require('webpack-merge'); const common = require('./webpack.common.js'); module.exports = merge(common, { mode: 'production', output: { publicPath: '', }, module: { rules: [ { test: /\.(css)$/, use: [ 'style-loader', 'css-loader', ], }, ], }, });
これで Webpack の設定は完了です。
次回は Babel の設定ファイルを作っていきます。