Last active
June 25, 2019 02:56
-
-
Save kwelch/ddc692376dde8d6a21abc4f40d11d4bf to your computer and use it in GitHub Desktop.
Webpack React-Toolbox & Non-CSS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import webpack from 'webpack'; | |
import HtmlWebpackPlugin from 'html-webpack-plugin'; | |
import autoprefixer from 'autoprefixer'; | |
import path from 'path'; | |
// all directories that have css that should use cssModules should be listed here | |
const cssModulesPath = [ | |
path.resolve(__dirname, 'src'), | |
path.resolve(__dirname, 'node_modules/react-toolbox'), | |
]; | |
export default { | |
resolve: { | |
extensions: ['', '.js', '.jsx', '.json'] | |
}, | |
debug: true, | |
devtool: 'eval-source-map', // more info:https://webpack.github.io/docs/build-performance.html#sourcemaps and https://webpack.github.io/docs/configuration.html#devtool | |
noInfo: true, // set to false to see a list of every file being bundled. | |
entry: [ | |
// must be first entry to properly set public path | |
'./src/webpack-public-path', | |
'webpack-hot-middleware/client?reload=true', | |
path.resolve(__dirname, 'src/index.js') // Defining path seems necessary for this to work consistently on Windows machines. | |
], | |
target: 'web', // necessary per https://webpack.github.io/docs/testing.html#compile-and-test | |
output: { | |
path: path.resolve(__dirname, 'dist'), // Note: Physical files are only output by the production build task `npm run build`. | |
publicPath: '/', | |
filename: 'bundle.js' | |
}, | |
plugins: [ | |
new webpack.DefinePlugin({ | |
'process.env.NODE_ENV': JSON.stringify('development'), // Tells React to build in either dev or prod modes. https://facebook.github.io/react/downloads.html (See bottom) | |
__DEV__: true | |
}), | |
new webpack.HotModuleReplacementPlugin(), | |
new webpack.NoErrorsPlugin(), | |
new HtmlWebpackPlugin({ // Create HTML file that includes references to bundled CSS and JS. | |
template: 'src/index.ejs', | |
minify: { | |
removeComments: true, | |
collapseWhitespace: true | |
}, | |
inject: true | |
}) | |
], | |
module: { | |
loaders: [ | |
{test: /\.jsx?$/, exclude: /node_modules/, loaders: ['babel']}, | |
{test: /\.eot(\?v=\d+.\d+.\d+)?$/, loader: 'file'}, | |
{test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url?limit=10000&mimetype=application/font-woff'}, | |
{test: /\.[ot]tf(\?v=\d+.\d+.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'}, | |
{test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'}, | |
{test: /\.(jpe?g|png|gif)$/i, loader: 'file?name=[name].[ext]'}, | |
{test: /\.ico$/, loader: 'file?name=[name].[ext]'}, | |
// this allows you to use cssModules in the directories specified above | |
{test: /(\.css|\.scss)$/, include: cssModulesPath, loaders: ['style', 'css?sourceMap&modules', 'postcss', 'sass?sourceMap']}, | |
// this allows standard global css to also be imported | |
{test: /(\.css|\.scss)$/, exclude: cssModulesPath, loaders: ['style', 'css?sourceMap', 'postcss', 'sass?sourceMap']}, | |
{test: /\.json$/, loader: "json"} | |
] | |
}, | |
postcss: ()=> [autoprefixer] | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@retorquere Which version of
react-router
? I have used both v2 and v4 with no issues withtoolbox
. I typically put the links outside of the element that I want to be clickable instead of the typical inside of.