Webpack: use data from parent directory without copying - javascript

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
}
)

Related

Webpack can't resolve relative path import express static

I'm working on an outlook addin I have an express server running. I am setting webpack because I need to transpile js to es5 to make it work in Outlook Desktop. Here is the simplified project structure.
/public
/javascripts
ssoAuth.js
/addin
/commmands
commands.js
commands.html
/server
/bin
/helpers
app.js
The public folder is set as a static folder in my express server
app.use(express.static(path.join(__dirname, '../public'),
My problem is in commands.js I import ssoAuth.js with es6 module import with relative path :
import getGraphAccessToken from "/javascripts/ssoAuthES6.js";
It works fine when I run node ./server/app.js and load my outlook addin, but when I want to use Webpack to bundle, the import is not working, I get :
ERROR in ./addin/commands/commands.js
Module not found: Error: Can't resolve '/javascripts/ssoAuth.js'
I can't figure out how to configure webpack to allow the imports from the public folder.
Here are my webpack config files :
webpack.config.js :
const config = {
devtool: "source-map",
entry: {
polyfill: "#babel/polyfill",
commands: "./addin/commands/commands.js"
},
resolve: {
extensions: [".ts", ".tsx", ".html", ".js"]
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ["#babel/preset-env"]
}
}
},
{
test: /\.html$/,
exclude: /node_modules/,
use: "html-loader"
},
{
test: /\.(png|jpg|jpeg|gif)$/,
use: "file-loader"
}
]
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
filename: "commands.html",
template: "./addin/commands/commands.html",
chunks: ["polyfill", "commands"]
})
]};
webpack.server.config.js :
return ({
entry: {
server: './server/bin/www',
},
output: {
path: path.join(__dirname, 'dist'),
publicPath: '/',
filename: '[name].js'
},
target: 'node',
node: {
__dirname: false,
__filename: false,
},
externals: [nodeExternals()],
module: {
rules: [
{
// Transpiles ES6-8 into ES5
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
},
plugins: [
new CopyWebpackPlugin([
{
to: "./public",
from: "./public"
}
])
]})
Can you help figure this out ? Is there a better folder structure that I should use to make it work ?
Thanks
You're using an absolute path
import getGraphAccessToken from "/javascripts/ssoAuthES6.js";
// ^ this will look in your topmost directory on your OS
The relative path, from commands.js, would be:
import getGraphAccessToken from "../../javascripts/ssoAuthES6.js";
Alternatively, you can set Webpack to look for modules from your root directory by adding the following to your webpack configuration:
{
// ...
resolve: {
modules: [path.resolve(__dirname, "src"), "node_modules"],
},
// ...
}
Then you can import from your project's root directory from anywhere, like so:
import getGraphAccessToken from "javascripts/ssoAuthES6.js";
Some other points:
Since you're setting the extensions: [".ts", ".tsx", ".html", ".js"], you don't need to provide file extensions for those imports
You specify .ts and .tsx in your webpack config, but you are using .js files. Consider removing the Typescript extensions
If you are using Typescript, you will need to update import paths in your tsconfig.json
You can consider import path aliases in both Webpack and Typescript to be more explicit that your imports are coming from your project root. Instructions here

Resolve url() to image without bundling

I'm integrating Webpack into an already established front-end environment. Sass and resolve-url-loader are working and Webpack finds the files that are referenced by the url() in the CSS. My problem is, I don't want to copy the files referenced by url() into the dist/ folder, I want to link to them where they are.
My files are setup like this
www/
index.html
assets/
js/
main.js
css/
main.scss
components/
thing.scss
images/
pic.jpg
dist/
output.js
output.css
with main.scss importing thing.scss which contains the line
background: url(../../images/pic.jpg)
resolve-url-loader correctly resolves this to be ../images/pic.jpg and css-loader finds the file and the loader for the file (file-loader) is called. However, I would like to not copy the file into dist/ (which I did by adding emitFile: false to file-loader) and to rewrite the url to be relative from the CSS output (../assets/images/pic.jpg). How do I do this?
For reference, here is my webpack.config.js
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
{
entry: './assets/js/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'output.js',
publicPath: 'dist/'
},
module: {
rules: [{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader, {
loader: "css-loader",
options: {
sourceMap: true,
url: false
}
}, {
loader: "resolve-url-loader",
options: {
debug: true,
sourceMap: true
}
}, {
loader: "sass-loader",
options: {
sourceMap: true,
sourceMapContents: false
}
}
]
}, {
test: /\.(png|svg|jpg|gif)$/,
use: [{
loader: 'file-loader',
options: {
emitFile: false
}
}]
}]
},
plugins: [new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
})],
}
Not the best answer but it works.
Remove resolve-url-loader and keep css-loader on url:false. Then just write your URL paths as they would work from the output file.
I'll probably accept it and bundle my images though.

WebPack importing react custom packages in another folder

I am enhancing a website with ReactJS.
My folder structure looks something like this:
_npm
node_modules
package.json
package-lock.json
webpack.config.js
_resources
js
react
reactapp1.js
reactapp2.js
components
FormDisplay.js
I want to import a custom reactjs package into the FormDisplay component.
When I enter:
import PlacesAutocomplete from 'react-places-autocomplete'
This doesn't work. But if I enter:
import PlacesAutocomplete from "./../../../_npm/node_modules/react-places-autocomplete";
This works. I understand why this is the case. I was wondering if there was a way that I can just enter:
import PlacesAutocomplete from 'react-places-autocomplete';
How do I make it work with just that line of code, without having to find the path to node_modules folder?
My webpack config:
const path = require("path");
const webpack = require("webpack");
const PATHS = {
app: path.join(__dirname, "../_resources/react/"),
build: path.join(__dirname, '../wordpress_site/wp-content/themes/custom_theme/assets/js/'),
};
module.exports = {
entry: {
reactapp1: path.join(PATHS.app, "reactapp1.js"),
reactapp2: path.join(PATHS.app, "reactapp2.js")
},
output: {
filename: "[name].bundle.js",
//path: path.join(__dirname, "dist")
path: PATHS.build
},
module:{
rules: [
{
test: /\.js?$/,
exclude: /(node_modules)/,
use: {
loader: "babel-loader",
options: {
presets: ["env", "react"],
plugins: ["transform-class-properties"]
}
}
}
]// rules array
}, // module
}
Have you tried using webpack's resolve-modules?
resolve: {
modules: ['_npm/node_modules']
}
Might work

Bundle JS files with webpack scripts?

I'm super new to webpack and I do not seem to find a way to bundle JS files as I did with Gulp in a very easy way. I've been searching a bit but didn't find any straight answer to it.
Right now I'm creating two minified files by using in my package.json file, but I would love to have a single one instead:
"scripts": {
"stand-alone": "concurrently 'webpack --config=webpack.config.js src/whatever.vue demos/build.min.js --output-library=whatever1' 'webpack --config=webpack.config.js src/whatever2.js demos/mixin.min.js --output-library=whatever2'",
},
Then my webpack.config.js looks like this:
const webpack = require('webpack');
module.exports = {
resolve: {
alias: {
'vue$': 'vue/dist/vue.js'
}
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
scss: 'vue-style-loader!css-loader!sass-loader',
js: 'babel-loader'
}
}
},
{
test: /\.js$/,
use: {
loader: 'babel-loader',
}
}
]
},
plugins: [
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
drop_console: false,
}
})
],
};
I believe you are looking for entry points.
In your webpack.config.js module exports object:
Define the entry property:
entry: {
app: ['./path/to/file.js', './path/to/file2.js'],
},
Define the output property:
output: {
path: '/path/to/assets', // ex. '../../wwwroot/dist'
filename: '[name].js', // Substitutes [name] with the entry name, results in app.js
publicPath: '/'
},
Change your script to:
"scripts": {
"stand-alone": "webpack --config=webpack.config.js",
},
If you are using Vue + Webpack, I recommend that you take a look to vue-cli and generate a project using the webpack template. It is more advanced, but you can see the documentation and get an idea of what you are missing.
Run the following:
npm install -g vue-cli // install vue cli globally
vue init webpack my-project // create a sample project
If you want to generate multiple output files, you can have more than one entry point like so:
entry: {
app: ['./path/to/file.js', './path/to/file2.js'],
mixins: './path/to/mixins.js',
vendors: ['./path/to/vendor.js', './path/to/vendor2.js']
},
This will write to disk ./path/to/assets/app.js, ./path/to/assets/mixins.js, /path/to/assets/vendors.js.

How can I include a multi part library with webpack?

I created a multi part library similar to the example from webpack/webpack/.../multi-part-library. In my apps I want to be able to import parts of my library like this:
ìmport Button from 'myLib/atoms/button';
// or
import { Button } from 'myLib/atoms';
My webpack configuration for the apps looks like this and I get an error (Cannot resolve module 'myLib/atoms' or Cannot resolve module 'myLib/atoms/button'):
module.exports = {
'entry': {
'app': './client.js',
},
'output': {
'filename': 'bundle.js',
},
'externals': {
'react': true,
'react-dom': true,
'myLib': true,
},
'module': {
'loaders': [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
},
]
},
};
The webpack configuration for the library looks like this:
const files = glob.sync('**/*.js', {
cwd: path.join(__dirname, 'atomic-design'),
absolute: true,
});
let entries = {};
files.forEach((file) => {
const name = path.basename(path.dirname(file));
const newName = `atoms/${name}`;
entries[newName] = file;
});
module.exports = {
'entry': entries,
'output': {
'path': path.join(__dirname, 'lib'),
'filename': 'myLib.[name].js',
'library': ['myLib', '[name]'],
'libraryTarget': 'umd',
'umdNamedDefine': 'myLib',
},
'externals': {
'react': true,
'react-dom': true,
},
'module': {
'loaders': [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel'
},
]
}
};
The files are structured like this:
- app
- client.js
- webpack.config.js
- myLib
- webpack.config.js
- atomic-design
- button
- index.js
- text-field
- index.js
So far I could only find tutorials for creating libraries with webpack, where they only use small examples of libraries.
Thanks for your help in advance!
Best regards,
JBrieske
I believe you need to add the paths (and adjust the from 'path' accordingly) for the modules you're trying to import to resolve.modulesDirectories.
Relevant documentation: https://webpack.github.io/docs/configuration.html#resolve-modulesdirectories.
Bear in mind that this will change in Webpack2, which is feature complete and is just short of documentation for a release.

Categories