These are chat archives for CodeHubOrg/discussions

12th
Feb 2017
Dave Thomson
@rinse0ut
Feb 12 2017 06:56
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
my config isn't long enough to bother pulling it out.
Dave Thomson
@rinse0ut
Feb 12 2017 09:38
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
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
._2qV0PIT1pJb1OwfVBGp5oe { color: red; }
Tim Handy
@TimHandy
Feb 12 2017 09:39
oh... not had that
Dave Thomson
@rinse0ut
Feb 12 2017 09:40
think i need postcss to sort it out
are you using sass?
Tim Handy
@TimHandy
Feb 12 2017 09:40
but wait... thats in the bundled file?
Dave Thomson
@rinse0ut
Feb 12 2017 09:40
yes
Tim Handy
@TimHandy
Feb 12 2017 09:40
yeah, you don't need to worry about that though right?
that's expected no?
Dave Thomson
@rinse0ut
Feb 12 2017 09:41
no I expect .test {…}
element.innerHTML = '<div class="test">Hello webpack</div>’
Tim Handy
@TimHandy
Feb 12 2017 09:41
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
the class name is ‘test'
i don’t want to have to do this..
Tim Handy
@TimHandy
Feb 12 2017 09:42
so you're saying your outputted webpage isn't viewing correctly?
Dave Thomson
@rinse0ut
Feb 12 2017 09:42
  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
oh, not seen that...
Dave Thomson
@rinse0ut
Feb 12 2017 09:44
are you using sass?
Tim Handy
@TimHandy
Feb 12 2017 09:44
        test: /\.scss$/,  // regex to select only .css files
        loader: 'style-loader!css-loader!sass-loader'
      },
Dave Thomson
@rinse0ut
Feb 12 2017 09:45
is that webpack version 1?
looks like it
Tim Handy
@TimHandy
Feb 12 2017 09:45
yes, not transferred yet to 2
Dave Thomson
@rinse0ut
Feb 12 2017 09:45
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
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
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
what file are you looking at to see those hashes?
in your build dir?
Dave Thomson
@rinse0ut
Feb 12 2017 09:50
the actual style sheet sent from the server
public/styles.css
yes the build dir
Tim Handy
@TimHandy
Feb 12 2017 09:51
and when you put your build dir online or whatever it doesn't work?
Dave Thomson
@rinse0ut
Feb 12 2017 09:51
yes
Tim Handy
@TimHandy
Feb 12 2017 09:53
oh... don't know then i'm afraid.
Dave Thomson
@rinse0ut
Feb 12 2017 09:53
no worries
gonna move onto install react etc soon
why can’t it be
{
  sass: true
}
Tim Handy
@TimHandy
Feb 12 2017 09:54
yeah, that would be nice
Dave Thomson
@rinse0ut
Feb 12 2017 10:22
have you looked into postcss?
Dave Thomson
@rinse0ut
Feb 12 2017 10:46
npm install <package> —save-dev === npm i <package> -D
Tim Handy
@TimHandy
Feb 12 2017 14:39
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
got react and jsx working
now hot load...
Tim Handy
@TimHandy
Feb 12 2017 14:41
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
Keeps state
Tim Handy
@TimHandy
Feb 12 2017 14:41
keeps it what...
Dave Thomson
@rinse0ut
Feb 12 2017 14:41
I’m having so much fun with configuring web pack.
not.
Tim Handy
@TimHandy
Feb 12 2017 14:41
haha
Dave Thomson
@rinse0ut
Feb 12 2017 14:42
Browserfy is proably way easier.
Tim Handy
@TimHandy
Feb 12 2017 14:42
browserify is dead, long live webpack (until the next one comes along)
Dave Thomson
@rinse0ut
Feb 12 2017 14:44
Dave Thomson
@rinse0ut
Feb 12 2017 14:49
…from what I read web pack is still the go to.
Dave Thomson
@rinse0ut
Feb 12 2017 18:21
Does React make you happy?
Tim Handy
@TimHandy
Feb 12 2017 23:29
Pleased to say I'm at least trying to do it the right way....According to this guy.