Customising the build process and output locations

dsl101

For a particular project, I’d like to quasar build everything into a single directory (/dist/app) with just the index.html in the /dist folder. So far I’ve got most things working by editing webpack.base.conf.js and changing the properties and rules which relate to paths.

But I’m stuck with the CSS. At the moment, the best I can do is let quasar build put the CSS in /dist as usual, then edit it by hand, change all the references to fonts from app/Roboto... to Roboto... and then move the CSS into the /app folder, and then change the line in index.html to load the CSS from there.

That works, but is a bit of a hassle every time I rebuild. But I can’t see how to instruct the build tools to generate the CSS in /app. I tried changing this part of webpack.prod.conf.js:

new ExtractTextPlugin({
  filename: 'app/[name].[contenthash].css'
}),

and whilst that does generate the CSS file in /app, and make index.html point to the right place, the font paths in the CSS file are still app/Roboto..., which is wrong.

Which bit of the build process is generating that CSS? And is it possible to tell it to look in the same place as the CSS file itself? I’m guessing the way I changed the ExtractTextPlugin() parameters isn’t right and just works by chance…

dsl101

BTW, I’ve started putting this into config/prod.env.js - not sure if this is the right place, but it seemed sensible rather than coding paths into things in the build/ directory. Note below is configured to try to produce pretty much identical output to the standard tools, but I will change all those to point to the same place:

module.exports = {
  NODE_ENV: '"production"',
  JS_TARGET_PATH: 'js',
  FONT_TARGET_PATH: 'fonts',
  IMAGE_TARGET_PATH: 'img',
}

and then updating the build scripts to use those values. I’m still having to manually adjust the src:url(app/Roboto... stuff in script.build.js with some code I’m embarrassed to post here but hey ho:

function finalize () {
  console.log(' Adjusting font paths in CSS resources...')
  var cssFiles = glob.sync(path.join(__dirname, '../dist/**/*.css'))
  console.log(shell.sed('-i', RegExp('src:url\\(' + env.fontTargetPath + '\\/', 'g'), 'src:url\(', cssFiles).code)
  .
  .
  .

Without knowing how to properly control CSS generation and font URLs, I can’t finish this, but it’s getting closer to what I need. In effect, I’m going to end up with a handful of small quasar apps, each of which will have a name - so ‘App1’ will be app1.html and /app1 for its resources, etc., and they can all live in the same folder and be embedded into a large CMS-based website.

dsl101

OK - final update for now, in case it’s of any help to anyone else. I now have prod.env.js which looks like this, which splits things into the specified directories:

module.exports = {
  NODE_ENV: '"production"',
  JS_TARGET_PATH: 'js',
  CSS_TARGET_PATH: 'css',
  FONT_TARGET_PATH: 'fonts',
  IMAGE_TARGET_PATH: 'img',
}

or this, which puts everything together:

module.exports = {
  NODE_ENV: '"production"',
  JS_TARGET_PATH: 'app',
  CSS_TARGET_PATH: 'app',
  FONT_TARGET_PATH: 'app',
  IMAGE_TARGET_PATH: 'app',
}

It leaves index.html where it is, along with statics/ (which I don’t use for these ‘embeddable’ apps, and is just deleted). To make that work, I had to change webpack.base.conf.js like this:

output: {
  path: path.resolve(__dirname, '../dist'),
  publicPath: config[env.prod ? 'build' : 'dev'].publicPath,
  filename: config.build.env.JS_TARGET_PATH + '/[name].js',
  chunkFilename: config.build.env.JS_TARGET_PATH + '/[id].[chunkhash].js'
},
.
.
.
{
  test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  loader: 'url-loader',
  options: {
    limit: 10000,
    name: config.build.env.IMAGE_TARGET_PATH + '/[name].[hash:7].[ext]'
  }
},
{
  test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
  loader: 'url-loader',
  options: {
    limit: 10000,
    name: config.build.env.FONT_TARGET_PATH + '/[name].[hash:7].[ext]'
  }
}

webpack.prod.conf.js:

new ExtractTextPlugin({
  filename: config.build.env.CSS_TARGET_PATH + '/[name].[contenthash].css'
}),

script.build.js:

function finalize () {
  var cssFiles = glob.sync(path.join(__dirname, '../dist/**/*.css'))
  var replaceFragment
  if(config.build.env.FONT_TARGET_PATH === config.build.env.CSS_TARGET_PATH) {
    replaceFragment = 'src:url('
  } else {
    replaceFragment = 'src:url(../' + config.build.env.FONT_TARGET_PATH + '/'
  }
  shell.sed('-i', RegExp('src:url\\(' + config.build.env.FONT_TARGET_PATH + '\\/', 'g'), replaceFragment, cssFiles)
  .
  .
  .

That last bit is messy, since it’s probably not the right way to change font and css locations. But it works for now.

No More Posting New Topics!

Customising the build process and output locations