These are chat archives for CodeHubOrg/discussions

12th
Feb 2017
Dave Thomson
@rinse0ut
Feb 12 2017 06:56 UTC
Excellent, nice one Tim.
I’m about to set up webpack from scratch. In my previous boiler plate, they broke out the loaders into a separate webpack.loader.js file and included it in the main config file which keeps it nice and tidy.
I’ve been using tomatimer in Atom for the pomadore technique. When I have time I want to look into hacking it to combine it with Google Drive.
Tim Handy
@TimHandy
Feb 12 2017 09:37 UTC
my config isn't long enough to bother pulling it out.
Dave Thomson
@rinse0ut
Feb 12 2017 09:38 UTC
fair dos
got sass working, and including the css as a file however getting a hash for the class name:
Tim Handy
@TimHandy
Feb 12 2017 09:38 UTC
I use workrave to force me to peel my eyes away from the screen
class name?
file name?
Dave Thomson
@rinse0ut
Feb 12 2017 09:39 UTC
._2qV0PIT1pJb1OwfVBGp5oe { color: red; }
Tim Handy
@TimHandy
Feb 12 2017 09:39 UTC
oh... not had that
Dave Thomson
@rinse0ut
Feb 12 2017 09:40 UTC
think i need postcss to sort it out
are you using sass?
Tim Handy
@TimHandy
Feb 12 2017 09:40 UTC
but wait... thats in the bundled file?
Dave Thomson
@rinse0ut
Feb 12 2017 09:40 UTC
yes
Tim Handy
@TimHandy
Feb 12 2017 09:40 UTC
yeah, you don't need to worry about that though right?
that's expected no?
Dave Thomson
@rinse0ut
Feb 12 2017 09:41 UTC
no I expect .test {…}
element.innerHTML = '<div class="test">Hello webpack</div>’
Tim Handy
@TimHandy
Feb 12 2017 09:41 UTC
why are you looking at your bundled files? I thought the whole point is that you don't need to worry about your bundled files
Dave Thomson
@rinse0ut
Feb 12 2017 09:42 UTC
the class name is ‘test'
i don’t want to have to do this..
Tim Handy
@TimHandy
Feb 12 2017 09:42 UTC
so you're saying your outputted webpage isn't viewing correctly?
Dave Thomson
@rinse0ut
Feb 12 2017 09:42 UTC
  element.innerHTML = '<div class="_2qV0PIT1pJb1OwfVBGp5oe">Hello webpack</div>'
No it’s not putting the correct class name in the style sheet
Tim Handy
@TimHandy
Feb 12 2017 09:43 UTC
oh, not seen that...
Dave Thomson
@rinse0ut
Feb 12 2017 09:44 UTC
are you using sass?
Tim Handy
@TimHandy
Feb 12 2017 09:44 UTC
        test: /\.scss$/,  // regex to select only .css files
        loader: 'style-loader!css-loader!sass-loader'
      },
Dave Thomson
@rinse0ut
Feb 12 2017 09:45 UTC
is that webpack version 1?
looks like it
Tim Handy
@TimHandy
Feb 12 2017 09:45 UTC
yes, not transferred yet to 2
Dave Thomson
@rinse0ut
Feb 12 2017 09:45 UTC
so close to getting it working!
you have a loaders array now
path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

var loaders = [
  {
    loader: 'css-loader',
    options: {
      modules: true
    }
  },
  {
    loader: 'postcss-loader'
  },
  {
    loader: 'sass-loader'
  }
]

module.exports = {
  entry: './app/main.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'public')
  },
    module: {
        rules: [
      {
        test: /\.(sass|scss)$/,
                use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: loaders
        })
      }
        ]
    },
    plugins: [
        new ExtractTextPlugin({
            filename: 'public/style.css',
            allChunks: true
        })
  ]
};
Tim Handy
@TimHandy
Feb 12 2017 09:47 UTC
This is my current webpack config:
And this is part way through migrating...
ignore that it says OLD
oh, a loaders array, I have that to include then.
Dave Thomson
@rinse0ut
Feb 12 2017 09:50 UTC
nice one. are they supposed to be hashed the class names and then webpack does some magic to match it to the actual name you did in the code?
Tim Handy
@TimHandy
Feb 12 2017 09:50 UTC
what file are you looking at to see those hashes?
in your build dir?
Dave Thomson
@rinse0ut
Feb 12 2017 09:50 UTC
the actual style sheet sent from the server
public/styles.css
yes the build dir
Tim Handy
@TimHandy
Feb 12 2017 09:51 UTC
and when you put your build dir online or whatever it doesn't work?
Dave Thomson
@rinse0ut
Feb 12 2017 09:51 UTC
yes
Tim Handy
@TimHandy
Feb 12 2017 09:53 UTC
oh... don't know then i'm afraid.
Dave Thomson
@rinse0ut
Feb 12 2017 09:53 UTC
no worries
gonna move onto install react etc soon
why can’t it be
{
  sass: true
}
Tim Handy
@TimHandy
Feb 12 2017 09:54 UTC
yeah, that would be nice
Dave Thomson
@rinse0ut
Feb 12 2017 10:22 UTC
have you looked into postcss?
Dave Thomson
@rinse0ut
Feb 12 2017 10:46 UTC
npm install <package> —save-dev === npm i <package> -D
Tim Handy
@TimHandy
Feb 12 2017 14:39 UTC
no to postcss... and yeah i use the shorthand version of npm sometimes.
-S is save to live dependencies i think
Dave Thomson
@rinse0ut
Feb 12 2017 14:40 UTC
got react and jsx working
now hot load...
Tim Handy
@TimHandy
Feb 12 2017 14:41 UTC
I dont' know what hotload is supposed to do... my browser refreshes on changes with webpack-dev-server anyway
is hotload something different?
Dave Thomson
@rinse0ut
Feb 12 2017 14:41 UTC
Keeps state
Tim Handy
@TimHandy
Feb 12 2017 14:41 UTC
keeps it what...
Dave Thomson
@rinse0ut
Feb 12 2017 14:41 UTC
I’m having so much fun with configuring web pack.
not.
Tim Handy
@TimHandy
Feb 12 2017 14:41 UTC
haha
Dave Thomson
@rinse0ut
Feb 12 2017 14:42 UTC
Browserfy is proably way easier.
Tim Handy
@TimHandy
Feb 12 2017 14:42 UTC
browserify is dead, long live webpack (until the next one comes along)
Dave Thomson
@rinse0ut
Feb 12 2017 14:44 UTC
Dave Thomson
@rinse0ut
Feb 12 2017 14:49 UTC
…from what I read web pack is still the go to.
Dave Thomson
@rinse0ut
Feb 12 2017 18:21 UTC
Does React make you happy?
Tim Handy
@TimHandy
Feb 12 2017 23:29 UTC
Pleased to say I'm at least trying to do it the right way....According to this guy.