We are developing a webapplication with a custom cms dashboard in react.
Our basic folder structure looks like this:
src
-client
-app
-less
...
-cms
-less
...
-server
-webpack-config
-development
-client.js
-server.js
-production
What we are trying to achieve sounds simple: but we are struggling getting it to work.
The less-files in app/less && cms/less should each be bundled to a seperate css file.
This way we can load the correct css file based on what main component gets loaded in react (app / cms dashboard ). The styling for our cms is totally different from our app.
Our current webpack config for the client:
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var HTMLCompressionPlugin = require('html-compression-webpack- plugin');
module.exports = {
cache: true,
entry: path.resolve(__dirname, '../../src/client/index.js'),
devtool: 'eval',
output: {
path: path.resolve(__dirname, '../../build/public'),
pathinfo: true,
filename: 'client.js',
publicPath: "/"
},
module: {
rules: [
{
test: /\.js$/,
exclude: path.resolve(__dirname, '../../node_modules'),
use: [{
loader: 'babel-loader?cacheDirectory=true',
options: {
"babelrc": false,
"presets": [
["es2015",{"modules": false}],
"react",
"stage-0"
],
"plugins": [
"transform-react-constant-elements",
"transform-react-inline-elements",
"transform-react-remove-prop-types"
],
"compact": false
}
}]
},
{
test: /\.less$/,
loader: ExtractTextPlugin.extract({
notExtractLoader: "style-loader",
loader: "css-loader?sourceMap?minimize!less-loader? sourceMap",
publicPath: "/"
})
},
{
test: /\.(gif|png|jpe?g)$/i,
use: 'url-loader?limit=50000'
}
]
},
plugins: [
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
screw_ie8: false,
conditionals: false,
unused: false,
comparisons: false,
sequences: false,
dead_code: false,
evaluate: false,
if_return: false,
join_vars: false
},
output: {
comments: true
},
sourceMap: true
}),
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': '"development"'
}
}),new HtmlWebpackPlugin({
template: path.resolve(__dirname, '../../src/client/app/public/index.html'),
inject: 'body',
filename: 'index.html',
hash: false,
cache: true,
minify: {},
alwaysWriteToDisk: true
}),
new ExtractTextPlugin("[contenthash].css"),
new HTMLCompressionPlugin({
deleteOriginals: false,
assetsRelativeOutputDirectory: '../../build/public',
minRatio: 1
})
]
}
Any tips and help would be very welcome: thanks in advance!
