Skip to content

Instantly share code, notes, and snippets.

@lsiden
Last active October 5, 2017 11:28
Show Gist options
  • Save lsiden/29ed81aa18d8b2d32e0b8e8607d3ac30 to your computer and use it in GitHub Desktop.
Save lsiden/29ed81aa18d8b2d32e0b8e8607d3ac30 to your computer and use it in GitHub Desktop.
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
Copy link
Author

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