Skip to content

Instantly share code, notes, and snippets.

@hisasann
Last active November 19, 2021 08:20
Show Gist options
  • Save hisasann/46c7e102ab3ca290016411fb5ed82a35 to your computer and use it in GitHub Desktop.
Save hisasann/46c7e102ab3ca290016411fb5ed82a35 to your computer and use it in GitHub Desktop.
webpack v5系 のCSS・JavaScriptの画像パスを解決してくれるサンプル
const webpack = require('webpack')
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin')
const path = require('path')
const environment = process.env.NODE_ENV || 'development'
process.noDeprecation = true
// 共通の設定
let config = {
mode: environment,
entry: {
main: ['./src/index.jsx'],
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'public'),
},
resolve: {
extensions: ['.jsx', '.js'],
},
module: {
rules: [
{
test: /\.(png|jpg|gif)$/i,
generator: {
filename: 'images/[name][ext][query]'
},
type: 'asset/resource'
},
{
test: /\.css$/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
options: {
url: true,
},
},
],
},
{
test: /\.[jt]sx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
plugins: [environment === 'development' && require.resolve('react-refresh/babel')].filter(Boolean),
},
},
},
],
},
plugins: [
],
}
// development環境設定
if (environment === 'development') {
config = Object.assign(config, {
plugins: [
...config.plugins,
new webpack.HotModuleReplacementPlugin(),
new ReactRefreshWebpackPlugin(),
],
devServer: {
// Dev server client for web socket transport, hot and live reload logic
hot: true,
historyApiFallback: true,
static: {
directory: path.join(__dirname, 'public'),
},
},
})
}
module.exports = config
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment