We Keep Coding

Webpack: use data from parent directory without copying

I have a project folder structured like this:
project-name/
data/
data.csv
dist/
index.js
src/
index.js
And want a remote directory like this:
project-name/
data/
data.csv
dist/
index.js
> `doSomething("../data/data.csv")`
How do I make this work in both webpack-dev-server and in the production path? If I use copywebpack plugin, then the data goes inside the dist/, which I don't want. But if I use a relative directory without copying the data, then the build fails.

Actually, you should use Webpack csv-loader in your Webpack configuration file like below:
module: {
rules: [
{
test: /\.csv$/,
loader: 'csv-loader',
options: {
dynamicTyping: true,
header: true,
skipEmptyLines: true,
},
},
],
},
And then use it inside your code like below:
import csvPath from './project-name/data/foo.csv'

Can you use an alias?
webpack.config.js:
const path = require("path");
module.exports = {
...
resolve: {
alias: {
Data: path.resolve(__dirname, "./project-name/data/"),
},
},
}
src/index.js:
import data from "Data/data.csv"

Have you tried excluding it in the test? Something like this:
{
entry: "./src/index.js",
module: {
rules: [
{
test: /\.js$/,
use: ["babel-loader or whatever loader you use"],
},
{
test: /\.csv$/,
exclude: ["./data/"],
},
],
},
output: {
filename: "index.js",
path: path.resolve(__dirname, "dist"),
},
},
There is a similar question on how to not bundle files in webpack here

You can use context param.
new CopyWebpackPlugin(
[{
context: './source/',
from: '**/*.html',
to: './public',
force: true
}], {
copyUnmodified: true
}
)

webpack - Multiple entry and outputs with same structure but different directories?

I am relatively new with webpack and I was wondering if it is possible to have multiple entries and outputs with the same folder structure but in different directories. Let's suppose I have this structure:
application
views
scripts
docs
file1.js
file2.js
company
cp1.js
cp2.js
and I want to output in this directory/structure:
public
js
build
docs
file1.js
file2.js
company
cp1.js
cp2.js
Actually, my webpack.config.js is like this:
entry: {
app: path.resolve(__dirname, 'application', 'views', 'scripts', 'file1.js'),
app2: path.resolve(__dirname, 'application', 'views', 'scripts', 'file2.js'),
},
output: {
path: path.resolve(__dirname, 'public', 'js', 'scripts'),
filename: '[name].bundle.js'
}
but I do not want to specify individual entries for all js files and it's outputting in the wrong directory. Is it possible?

Here is the sample webpack.config.js code which would generate the required structure.
const glob = require('glob');
const path = require('path');
function getEntries(pattern) {
const entries = {};
glob.sync(pattern).forEach((file) => {
const outputFileKey = file.replace('application/views/scripts/', '');
entries[outputFileKey] = path.join(__dirname, file);
});
return entries;
}
module.exports = {
entry: getEntries('application/**/*.js'),
output: {
path: __dirname + '/public/js/build',
filename: '[name]',
},
module: {
rules: [
{
test: /\.(js)$/,
exclude: /node_modules/,
use: ['babel-loader'],
},
],
},
resolve: {
extensions: ['.js'],
},
};

Webpack cannot resolve custom JS file

We are trying to migrate from grunt to webpack.
In our project, we use a JS file called boiler to define the frequently accessed core classes.
__boiler__.js
define(function (require) {
return {
Helpers: require('helpers/_helpers_'),
Enums: require('enums/_enums_'),
Context: require('context'),
...
};
});
And Web Pack Config
webpack.config.js
const path = require('path');
module.exports = {
resolve: {
extensions: ['.js', '.scss'],
alias: {
app: path.resolve(__dirname, './dev_files/app'),
Boiler: path.resolve(__dirname, './dev_files/app/core/_boiler_')
}
},
entry: './dev_files/main.js',
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [{
test: /\.(html)$/,
use: {
loader: 'html-loader'
}
},
{
test: /\.js$/,
use: ['babel-loader']
}
]
}
};
Then when I tried to do webpack build, it gave me some errors like:
ERROR in ./dev_files/app/core/_boiler_.js
Module not found: Error: Can't resolve 'context' in 'C:\Myproject\dev_files\app\core'
resolve 'context' in 'C:\Myproject\dev_files\app\core'
Parsed request is a module
using description file: C:\Myproject\package.json (relative path: ./dev_files/app/core)
Field 'browser' doesn't contain a valid alias configuration
resolve as module
....
I'm a noob when in JavaScript and WebPack in general. Could someone give me an idea what am I doing wrong here? Thanks.

I assume you are using require for your module loading.
try to export your definition so that it can be found/included by webpack
module.export = (function (require) {
return {
Helpers: require('helpers/_helpers_'),
Enums: require('enums/_enums_'),
Context: require('context'),
// ...
};
});

Extending webpack output

I'm trying to write Webpack plugin which will generate alias for each chunk defined inside entry. My idea was to generate alias which then I could use inside library property, just like we can use [name] or [id] in output. So my newly created plugin looks next:
function Aliasify(options) {
this.options = options;
}
Aliasify.prototype.apply = function(compiler) {
var self = this;
compiler.plugin("compilation", function(compilation) {
compilation.plugin("optimize", function() {
compilation.chunks.forEach(function(chunk) {
var alias = chunk.name.replace(self.options.searchFor, self.options.replaceWith);
chunk.alias = alias;
});
}
};
This generates property alias for every chunk defined in entry.
Using the [alias] inside library property exposes the every chunk as '[alias]' which isn't what i wanted.
library: ['gravity', 'gateway', '[alias]']
I hoped this will generate chunks with exposed master and slave which is the value of alias property inside chunk. My config.js looks next:
module.exports = {
entry: {
'master': './master.js',
'master.min': './master.js',
'slave': './slave.js',
'slave.min': './slave.js'
},
plugins: [
new Clean(['dist']),
new Uglify({
include: /\.min\.js$/i,
minimize: true
}),
new Aliasify({
searchFor: '.min',
replaceWith: ''
})
],
output: {
filename: '[name].js',
path: __dirname + '/dist',
library: ['gravity', 'gateway', '[alias]'],
libraryTarget: 'umd',
umdNamedDefine: true
}
};
So the bottom line is:
I want files created as master.js, master.min.js, slave.js and slave.min.js - this is ok using the name in filename prop
I want library to be exposed as master inside master.js, master.min.js and slave in slave.js, slave.min.js , but every chunk gets exposed as [alias]

Found workaround for this. According to documentation webpack will accept an array of configurations. I used this to bundle files with completely different settings.
module.exports = [
{
entry: {
'index' : './index.js',
'master': './master.js',
'slave': './slave.js',
'plugin-storage': './plugin-storage.js',
},
plugins: [
new Clean(['dist']),
],
output: {
filename: '[name].js',
path: __dirname + '/dist',
library: ['gravity', 'gateway', '[name]'],
libraryTarget: 'umd',
umdNamedDefine: true
}
},
{
entry: {
'index' : './index.js',
'master': './master.js',
'slave': './slave.js',
'plugin-storage': './plugin-storage.js'
},
plugins: [
new Uglify({
include: /\.js$/i,
minimize: true
})
],
output: {
filename: '[name].min.js',
path: __dirname + '/dist',
library: ['gravity', 'gateway', '[name]'],
libraryTarget: 'umd',
umdNamedDefine: true
}
}
];

Webpack 2 can't find jquery autocomplete module

I have the following webpack config file:
const path = require('path');
const config = {
output: {
filename: '[name].bundle.js',
path: 'assets'
},
resolve: {
modules: [
'./js',
'./js/jquery'
],
alias: {
'jquery': 'jquery/jquery-1.10.2.js',
'jquery-ui': 'jquery/jquery-ui.js'
}
},
entry: {
settings : './js/model/settings.js'
}
};
module.exports = config;
On every build webpack ends with an error "Error: Can't resolve 'jquery-ui/autocomplete'" but jquery autocomplete is included in jquery ui. What is missing?