Create a gist now

Instantly share code, notes, and snippets.

Embed
What would you like to do?
const path = require('path')
module.exports = {
target: 'web',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
publicPath: 'dist',
library: 'Alc',
libraryTarget: 'umd',
},
resolve: {
extensions: ['.js', '.jsx', '.json'],
},
module: {
rules: [
{
test: /\.js[x]?$/,
include: [
path.resolve(__dirname, 'src'),
path.resolve(__dirname, 'demo'),
],
exclude: new RegExp('node_modules/'),
use: {
loader: 'babel-loader',
},
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
},
{
test: /\.(png|jpg|svg|ttf|eot|woff|woff2)$/,
use: {
loader: 'file-loader',
options: {
name: '[path][name].[ext]'
},
},
},
],
},
}
const path = require('path')
const merge = require('webpack-merge')
const util = require('util')
const config = merge(require('./webpack.config.js'), {
entry: {
app: ['./demo/index.jsx']
},
devServer: {
contentBase: './demo/',
},
devtool: "eval-source-map",
})
console.log(util.inspect(config, false, null))
module.exports = config
const path = require('path')
const merge = require('webpack-merge')
const node_externals = require('webpack-node-externals')
const util = require('util')
const node_modules_pattern = new RegExp('node_modules/')
const loader_pattern = new RegExp('-loader')
const config = merge(require('./webpack.config.js'), {
entry: {
app: ['./src/index.jsx']
},
devtool: "source-map",
externals: [node_externals(),]
})
console.log(util.inspect(config, false, null))
module.exports = config
@lsiden

This comment has been minimized.

Show comment
Hide comment
@lsiden

lsiden Oct 5, 2017

This webpack config is for a large private React component that I want to consume in another project. To get it to work, I had to make sure that the css-loader, scss-loader, and file-loader were all categorized in package.json as unconditional dependencies, so that the project that consumes this component would install them as dependencies and be able to resolve the require() arguments.

See https://westside-consulting.blogspot.com/2017/10/making-friends-with-webpack.html

Owner

lsiden commented Oct 5, 2017

This webpack config is for a large private React component that I want to consume in another project. To get it to work, I had to make sure that the css-loader, scss-loader, and file-loader were all categorized in package.json as unconditional dependencies, so that the project that consumes this component would install them as dependencies and be able to resolve the require() arguments.

See https://westside-consulting.blogspot.com/2017/10/making-friends-with-webpack.html

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment