Skip to content

Instantly share code, notes, and snippets.

@hisasann
Last active November 19, 2021 08:20
Show Gist options
  • Save hisasann/a457fdb4b6e6d607044b2a73428edfe6 to your computer and use it in GitHub Desktop.
Save hisasann/a457fdb4b6e6d607044b2a73428edfe6 to your computer and use it in GitHub Desktop.
webpack v2系 のCSS・JavaScriptの画像パスを解決してくれるサンプル
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: /\.(jpe?g|png|gif|svg)$/i,
use: [
{
loader: 'file-loader',
options: {
name: '/images/[name].[hash:7].[ext]',
limit: 10000,
},
},
{
loader: 'image-webpack-loader',
options: {
bypassOnDebug: false,
},
},
],
},
{
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: [
],
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment