I have two HTML pages, each will include it's own bundle. Here is my project structure:
public/
-- dist/
src/
-- firebase/
-- network/
webpack.config.js
Here's my webpack config:
const path = require('path');
const CleanTerminalPlugin = require('clean-terminal-webpack-plugin');
module.exports = {
mode: "development",
entry: {
network: path.resolve(__dirname, 'src') + '/network/index.ts',
firebase: path.resolve(__dirname, 'src') + '/firebase/index.ts'
},
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
],
},
resolve: {
extensions: ['.tsx', '.ts', '.js'],
},
output: {
path: path.resolve(__dirname, 'public') + '/dist',
},
plugins: [new CleanTerminalPlugin()]
};
I expect this to create two bundles in public/dist with the names firebase.js and network.js. Instead I get an error:
ERROR in main Module not found: Error: Can't resolve './src/' in 'path/to/project/root'
It also says Field 'browser' doesn't contain a valid alias configuration /path/to/project/root/src/index doesn't exist
And repeats that for .tsx, .ts and .js
I don't know why it's looking for an index.* file in my src/. I didn't specify that as an entry file. If I create a src/index.ts it builds, but only makes one bundle called main which is not my expected behavior.
It ended up being a really stupid issue, but I'll post the answer in case someone needs it.
I was invoking webpack with webpack ./src but webpack without the ./src worked as expected.
Related
I want to create a JavaScript function with which I can specify a path to a folder and load each of the files in that folder into PixiJS, without having to know the name and extension of each of those files. It seems like the fs module in Node.js is the thing to use here.
When I use import * as fs from 'fs'; at the top of my game.ts file, I get this error:
ERROR in ./src/my-subproject/game.ts
Module not found: Error: Can't resolve 'fs' in 'C:\Users\me\WebDev\MyProject\src\my-subproject'
# ./src/my-subproject/game.ts 33:24-37
# multi ./src/my-subproject/game.ts
This thread seems possibly relevant to my situation. It says it won't work because it's "web and not a local file system." What does this mean? If I really can't access my asset files for whatever reason, how is PixiJS able to load them when I give it the file paths?
If that's not the problem, I think it might be an issue with my Webpack. I've seen many different suggestions for modifying my Webpack online and none of them worked for me. For instance,
https://www.freecodecamp.org/news/requiring-modules-in-node-js-everything-you-need-to-know-e7fbd119be8/
https://github.com/pugjs/pug-loader/issues/8
Module not found: Error: Can't resolve 'fs' when using readFileSync
This is my complete webpack.config.js file:
const path = require('path');
module.exports = {
mode: "development",
entry: [
path.resolve('src/my-subproject', 'game.ts')
],
output: {
path: path.resolve('dist'),
filename: 'game-bundle.js'
},
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: '/node_modules/',
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: [
['#babel/preset-env', {
useBuiltIns: 'usage',
targets: {
"chrome": "61",
}
}]
]
}
},
],
},
resolve: {
extensions: [ '.txs', '.ts', '.js'],
modules: [
path.resolve('src'),
'node_modules'
]
},
devtool: 'inline-source-map',
devServer: {
port: 8000,
open: true,
contentBase: path.resolve('dist'),
watchContentBase: true
}
};
If I do need to add something to webpack.config.js, could you specify where exactly I should put it? Most sources are unclear about that. Thanks!
I have a problem with dynamic require js files after webpack bundling.
Environment:
webpack, ts-loader, typescript.
src/index.ts:
require(path.resolve(__dirname, './test.js'));
dist/test.js:
console.log('I should be printed after require # index');
I don't know why but webpack think that there is no file:
1) Warning while running webpack -p
WARNING in ./src/index.ts
5:0-43 Critical dependency: the request of a dependency is an expression
# ./src/index.ts
2) Error while running script:
Error: Cannot find module "C:\Users\user\path\to\dist\test.js".
3) My webpack config is:
const nodeExternals = require('webpack-node-externals');
module.exports = {
entry: {
index: "./src/index.ts"
},
output: {
filename: "[name].js"
},
target: "node",
externals: [ nodeExternals() ],
node: {
"__dirname": false
},
resolve: {
extensions: [".ts", ".tsx", ".js"]
},
module: {
rules: [
{ test: /\.tsx?$/, loader: "ts-loader" }
]
}
}
Expected:
NodeJS just dynamically require path while index.js script execution.
Please help to setup that properly.
Thanks!
Problem solved using __non_webpack_require__ function.
I am trying to bundle and server a small app I have on a webpack dev server. So far it has been good, however it seems to be unable to locate my jsx files. I have an index in each of my react smart component folders that looks like so :
import Component from './component';
import container from './container';
import reducers from './reducers';
export default {
Component,
container,
Container: container(),
reducers
};
Webpack is complaining when I try to run the bundle and saying
client:47 ./client/ux-demo/index.js
Module not found: Error: Cannot resolve 'file' or 'directory' ./component in /Users/me/projects/ux-demo/client/ux-demo
resolve file
The only real difference is it is a jsx file, rather than a js file, but I have babel-loader in place.
Here is my webpack.config file
var path = require('path');
var webpack = require('webpack');
module.exports = {
devtool: 'eval',
entry: [
'webpack-dev-server/client?http://localhost:3000',
'webpack/hot/only-dev-server',
'./client/app.jsx'
],
output: {
path: path.join(__dirname, 'client'),
filename: 'bundle.js',
publicPath: '/client/'
},
plugins: [
new webpack.HotModuleReplacementPlugin()
],
module: {
loaders: [{
test: /\.js$/,
loaders: ['react-hot', 'babel-loader'],
include: path.join(__dirname, 'client')
}, {
test: /\.jsx$/,
loaders: ['react-hot', 'babel-loader'],
include: path.join(__dirname, 'client')
}]
}
};
Unsure what I am doing wrong here, thanks!
You need to tell webpack that resolve .jsx files also
resolve:{
extensions:['.jsx']
}
I have a project like this:
root/
webpack-config.js
app/
app.js
js/
dep.js
core/
module.js
Here is the webpack config file:
module.exports = {
entry: './app/app.js',
output: {
path: __dirname,
filename: "[name]-bundle.js"
},
module: {
loaders: [
{ test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }
]
},
resolve: {
modulesDirectories: ['core']
}
...
in app.js, I have:
import local_dep from './js/dep';
import myModule from 'module';
This works as expected with webpack 1.x, but the myModule module isn't resolved with webpack 2, I'm getting "Module not found: can't resolve 'module' in ... \app".
It seems the modulesDirectories entry is ignored and the base URL corresponds to the entry's folder.
What can I do to make modules resolve correctly with webpack 2 ?
from: http://moduscreate.com/webpack-2-tree-shaking-configuration/
In Webpack 2, resolvers from root, modulesDirectories, and fallback settings will merge into a single property – modules. Here is how we can resolve file and module locations in Webpack 2:
resolve: {
modules: [
path.resolve('./client'),
'node_modules'
]
},
You can specify a number of directories in modules, but make sure not to forget node_modules or npm package dependencies will fail to load.
So in your case what was before:
resolve: {
modulesDirectories: ['core']
}
now needs to be
resolve: {
modules: ['core'] // also 'node_modules'
}
Edit: As others have noted, for Webpack 2, something like this works:
{
resolve: {
extensions: ['.js', '.jsx'],
modules: ['node_modules', path.resolve(__dirname, 'core')]
},
}
For Webpack 1, I have a setup that has this entry:
config.resolve = {
// Allows us to include js and jsx files without specifying the extension
extensions: ['', '.jsx', '.js'],
root: [path.resolve('./core')]
};
Thanks to Christopher Davies I fixed the problem by adding:
resolveLoader: {
root: path.join(__dirname, 'node_modules')
},
resolve: {
root: ['./core']
}
I had to add resolveLoader line otherwise I was getting an error about babel-loader that could not be loaded.
From my initial understanding of webpack's multiple entry point such as
entry: {
a: "./a",
b: "./b",
c: ["./c", "./d"]
},
output: {
path: path.join(__dirname, "dist"),
filename: "[name].entry.js"
}
It will bundle them as a.entry.js, b.entry.js and c.entry.js. There is no d.entry.js since it's part of c.
However at work, these values are confusing me so much. Why is the value an http link and not a file?
app: [
'webpack/hot/dev-server',
'webpack-dev-server/client?http://localhost:21200',
'./lib/index.js'
],
test: [
'webpack/hot/dev-server',
'webpack-dev-server/client?http://localhost:21200',
'./test/test.js'
]
As already stated in a comment on the question, the HTTP URLs are used for webpack-dev-server and its hotloading module. However, you want to ommit those modules for the production version of your bundle, since you don't need the hotloading and it makes your bundle easily over 10.000 lines of code (additionally!).
For the personal interest of the poster, here is an example production config (minimalistic), for a project of mine (called dragJs).
// file: webpack.production.babel.js
import webpack from 'webpack';
import path from 'path';
const ROOT_PATH = path.resolve('./');
export default {
entry: [
path.resolve(ROOT_PATH, "src/drag")
],
resolve: {
extensions: ["", ".js", ".scss"]
},
output: {
path: path.resolve(ROOT_PATH, "build"),
filename: "drag.min.js"
},
devtool: 'source-map',
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel',
include: path.resolve(ROOT_PATH, 'src')
},
{
test: /\.scss$/,
loader: 'style!css!sass'
}
]
},
plugins: [
new webpack.optimize.UglifyJsPlugin()
]
};
A few things:
I only use one entry point, but you could use multiple, just as you do in your example
The entry point only refers to my js file - no webpack-dev-server for production
The config file is written using ECMAScript2015 (thus the name *.babel.js)
It uses sourcemaps and an uglify optimization plugin
The presets for the babel-loader are specified in my .babelrc file
Run webpack with this config via webpack -p --config ./webpack.production.babel.js
If there are any further questions, I would be grateful to answer them in the comments.