Webpack 3 alias in Sage 9 beta 4

webpack

#1

Hi all,

I can’t get my alias working. No errors. The config paths look correct.

webpack.config.js:

// eslint-disable-line

const webpack = require('webpack');
const merge = require('webpack-merge');
const CleanPlugin = require('clean-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const StyleLintPlugin = require('stylelint-webpack-plugin');
const CopyGlobsPlugin = require('copy-globs-webpack-plugin');
const config = require('./config');
const path = require('path');

const assetsFilenames = (config.enabled.cacheBusting) ? config.cacheBusting : '[name]';

function resolve (dir) {
  return path.join(__dirname, '../../', dir);
}

let webpackConfig = {
  context: config.paths.assets,
  entry: config.entry,
  devtool: (config.enabled.sourceMaps ? '#source-map' : undefined),
  output: {
...
  },
  stats: {
  ...
  },
  module: {
rules: [
  ...
 ]
  },
  resolve: {
modules: [
  config.paths.assets,
  'node_modules',
  'bower_components',
],
enforceExtension: false,
extensions: ['.scss'],
alias: {
  '@': resolve('assets'),
  'partials' : resolve('views/partials')
}
  },
  resolveLoader: {
moduleExtensions: ['-loader'],
  },
  externals: {
jquery: 'jQuery',
  },
  plugins: [
new CleanPlugin([config.paths.dist], {
  root: config.paths.root,
  verbose: false,
}),
new CopyGlobsPlugin({
  ...
}),
new ExtractTextPlugin({
  ...
}),
new webpack.ProvidePlugin({
  ...
}),
new webpack.LoaderOptionsPlugin({
  ...
}),
new webpack.LoaderOptionsPlugin({
  ...
}),
new webpack.LoaderOptionsPlugin({
  ...
}),
new StyleLintPlugin({
  ...
}),
  ],
};

/* eslint-disable global-require */ /** Let's only load dependencies as needed */

if (config.enabled.optimize) {
  webpackConfig = merge(webpackConfig, require('./webpack.config.optimize'));
}

if (config.env.production) {
  webpackConfig.plugins.push(new webpack.NoEmitOnErrorsPlugin());
}

if (config.enabled.cacheBusting) {
  const WebpackAssetsManifest = require('webpack-assets-manifest');

  webpackConfig.plugins.push(
new WebpackAssetsManifest({
  ...
})
  );
}

if (config.enabled.watcher) {
  webpackConfig.entry = require('./util/addHotMiddleware')(webpackConfig.entry);
  webpackConfig = merge(webpackConfig, require('./webpack.config.watch'));
}

module.exports = webpackConfig;

If simple log out the webpackConfig object I see:

alias: {
'@' : '/Users/simon/Documents/htdocs/project-root/web/app/themes/instafail/resources/assets',
'partials': '/Users/simon/Documents/htdocs/project-root/web/app/themes/instafail/resources/views/partials'
}

in main.scss

@import "partials/header/index"; // tried "partials/header" & "partials/header/index.scss"

When I run the dev-server, the main.js file not produced, so that means something has gone wrong, but nothing in the console. It’s all very mysterious.

Currently having to do in main.scss:
@import "../../views/partials/header/index"; // I can live with this, but not the prettiest


#2

Check the example table here. The alias is ran against regular expressions so your import might not match.


#3

it’s a simple string match. It’s bound to work. “partials” is alias will match partials in main.scss.
This is not new. I have been using something similar with VueCli, and that uses webpack 3, with alias like I have shown here.


#4

From the docs, it looks like you also have to prepend your aliases with ~ in your sass files. Have a look here