Webpack 4 ./src directory not found - javascript

I am trying to split the webpack config to base, dev and prod configs. Here is my entry section of webpack.base.babel.js file
module.exports = options => ({
mode: options.mode,
entry: options.entry,
output: Object.assign(
{
// Compile into js/build.js
path: path.resolve(process.cwd(), 'build'),
publicPath: '/',
},
options.output,
), // Merge with env dependent settings
Here is the entry section of webpackdev.babel.js file:
module.exports = require('./webpack.base.babel')({
mode: 'development',
// Add hot reloading in development
entry: [
require.resolve('react-app-polyfill/ie11'),
'webpack-hot-middleware/client?reload=true',
path.join(process.cwd(), 'app/app.js'),
],
// Don't use hashes in dev mode for better performance
output: {
filename: '[name].js',
chunkFilename: '[name].chunk.js',
},
My start script in package.json looks like: "start": "webpack-dev-server --mode development"
But when I run npm start I get the bellow error:
ERROR in Entry module not found: Error: Can't resolve './src'
. I am on Windows 10. Could anybody explain what's wrong with my webpack config. I am specifying the entry file as app/app.js but still webpack is defaulting to src/index.js.
Thanks in advance.

Just hand in your webpack config explicitely by changing your npm start script to:
"start": "webpack-dev-server --config webpackdev.babel.js"
Webpack searches for webpack.config.js in the root folder automatically. Starting with v4, Webpack also claims to be a zero config bundler, so it will use opinionated defaults, if no config can be located. E.g.:
entry point of your project is assumed to be src/index
output will be put in dist/main.js
production mode will minify and do optimizations
Your config seems to be right, but Webpack can't find it and assumes the default entry, thus your error Can't resolve './src'.

Related

Build index.html with webpack to use with dev server

Im using webpack for running my Three.js application with the following configuration in the webpack.config file:
module.exports = {
entry: `${__dirname}/src/tut15.js`,
output: {
path: __dirname + '/dist',
filename: 'index_bundle.js'
},
devtool: 'inline-source-map',
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 9000
},
plugins: [
new HtmlWebpackPlugin()
]
}
package.json
"scripts": {
"start": "webpack-dev-server --open",
"build": "webpack --config webpack.config.babel.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
With the HtmlWebpackPlugin it autogenerates the html for me. But since I want to create a custom html index file with some new tags this doesnt work for me. So I build the project
npm run-script build
and runs the index.html in the dist folder manually with my applied edits and everything works.
If I remove the HtmlWebpackPlugin from the webpack.config and build the project again and then run:
npm start
livereload works for my js files together with my new index.html with custom tags in the distfolder.
Questions:
It doesnt feels correct to create the changes in the dist folder. How can I generate a index.html straight from source? I guess that might solve all my problems being able to run dev server with a custom index.html
Or is it possible to get some livereload for the build as well?
after I have built my project it generates index.html and index.bundle in my distfolder. If I remove the index.bundle the project works anyway. What exactly does index.bundle do?
What is the best approach or do I need to build my project each time Im doing an update in my index file?
Thanks!
For questions regarding custom index.html and hot-reloading at least.
The plugin has some config you can add for templating.
new HtmlWebPackPlugin({
filename: 'index.html',
template: './public/index.html',
}),

Use webpack to bundle all node_modules

I am using Webpack to bundle a node project. In the project I am using conventional-recommended-bump to bump the package version.
When I run webpack I get the following warning:
WARNING in ./node_modules/conventional-changelog-preset-loader/index.js 5:30-37
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
# ./node_modules/conventional-recommended-bump/index.js
Then when I run the bundle I get the following error:
Error: Unable to load the "angular" preset package. Please make sure it's installed.
This suggests to me that webpack has failed to bundle all the dependencies included in the package I am using.
My webpack config is as follows:
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
resolve: {
alias: {
handlebars: 'handlebars/dist/handlebars.js',
},
modules: ['node_modules'],
},
target: 'node',
};
Nothing obvious to me why webpack is failing to include the releveant dependencies in the bundle.
I tried adding this to the config, it got rid of the warning but the output was still the same.
module: {
unknownContextCritical: false,
},
Any help will be really appreciated

Setting up webpack/HMR for Shopify development

I am trying to setup webpack's dev server and HMR to work with Shopify theme development. When running the server and opening the local IP, I get this error from Shopify's DNS provider, CloudFlare.
How can I properly setup webpack to inject hot changes (css/JS) to my proxied Shopify store (the mystore.myshopify.com url)?
My webpack config as follows:
const path = require("path");
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
module.exports = {
mode: "development",
devServer: {
contentBase: false,
hot: true,
https: true,
proxy: {
"**": {
target: "http://mystore.myshopify.com",
secure: false
}
},
},
entry: "./src/scripts/index.js",
output: {
filename: "./app.js",
path: path.resolve(__dirname, "dist")
},
plugins: [
],
module: {
rules: [
{
test: /\.s[ac]ss$/i,
use: [
// Creates `style` nodes from JS strings
'style-loader',
//postcss here (autoprefixer, babel etc)
// Translates CSS into CommonJS
'css-loader',
// Compiles Sass to CSS
'sass-loader',
],
},
],
},
};
My proposed solution for hot reloading with webpack and shopify.
In your package.json you will want the following scripts
A webpack build script that watches for changes. I have also added a progress parameter so I can see when it updates. This will be watching your /src folder for changes.
"webpack:build": "cross-env NODE_ENV=development webpack --watch --progress",
A shopify theme serve script that uploads the theme files from a /dist folder that is the output of a webpack build.
"shopify:serve": "cd dist && shopify theme serve"
You can link these two scripts together into one using the following.
"deploy:serve": "run-p -sr webpack:build shopify:serve"
So what happens is the webpack build script listens for changes in your /src code. When a change is main it re-builds the output to the /dist folder that shopify theme serve is listening on. When that updates, shopify uploads the changes.
Voila.
Here is the repo for this implementation if you want to play around - https://github.com/Sambuxc/9119-shopify-theme/
As of writing this, my dev versions are:
Node 18.7.0
Npm 8.15.0
Shopify Cli 2.21.0
Good luck and I hope this helps future developers.
Please reach out to me with any further questions if you get stuck.

How can I move "index.html" when using webpack?

Generally,when will "index.html" be loaded using webpack?
I want to move "index.html" to in build/.
I'm in trouble over data flow from npm start using webpack.
In package.json, "start" is defined as:
"node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js".
However,I couldn't find where it would jump from "webpack-dev-server.js".
I found two description about "index.html" in it as below:
.boolean("history-api-fallback").describe("history-api-fallback", "Fallback to /index.html for Single Page Applications.")
and
console.log("404s will fallback to %s", options.historyApiFallback.index || "/index.html");
when I try moving "index.html" to in build/, browser returned "Cannot Get error".
"index.html" and webpack.config.js are in same folder now.
./ index.html package.json src/ test/
../ build/ node_modules/ public/ style/
webpack.config.js
One way is to update the script (in package.json) so it copies index.html to the destination folder:
"scripts": {
"start": "node node_modules/.bin/webpack-dev-server --content-base src",
"build": "node node_modules/.bin/webpack && cp src/index.html build/index.html"
}
npm run build should now also copy src/index.html to build/index.html.
I'm not a webpack expert, but I faced the same issue, and was able to solve it using a plugin: html-webpack-plugin
First install it: npm install html-webpack-plugin --save-dev
Then edit your webpack.config.js:
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
//Your config here (entry, module, resolve, etc.)
devServer: {
contentBase: './build' //Or any other path you build into
},
plugins: [
//other plugins if any
new HtmlWebpackPlugin({
template: './index.template.html', //your template file
filename: 'index.html',
inject: 'body'
})
]
};
This is going to copy your index.template.html to ./build/index.html and serve files from there.
It will also inject all assets at the bottom of the <body> tag.
You can further costumize this setup to fit your need of course, just refer to the plugin docs.

How to get browser reload when editing html/jade files in webpack

This is part of the code I have in my webpack.config.js
const common = {
entry: {
style: PATHS.style,
app: PATHS.jsComp
},
output: {
path: PATHS.build,
filename: '[name].js'
},
module: {
loaders: [
{ test: /\.jade$/, loader: "jade" }
]
},
plugins: [
new HtmlWebpackPlugin({
title: 'Webpack demo',
template: PATHS.template, // Load a custom template (ejs by default but can be changed)
inject: 'body' // Inject all scripts into the body (this is the default so you can skip it)
})
]
};
I'm showing you the section where I think the problem is, I don't think you needed the entire code, but it's basically a slightly modified version of this git file
When I run webpack-dev-server everything works. JavaScript and SASS changes do reload the browser but when I change by jade file, the browser doesn't reload. In the terminal I have tried running these variations of webpack-dev-server
webpack-dev-server
webpack-dev-server --inline --hot
webpack-dev-server --inline --hot --colors
webpack-dev-server --inline --hot --colors --content-base app
webpack-dev-server --inline --hot --colors --content-base app --host 0.0.0.0
webpack-dev-server --inline --hot --colors --host 0.0.0.0
None of the above 6 variations get the browser reloading when I made changes to the jade file.
Also, if I remember correctly, after every tutorial I have went through (before finding this setup), the browser never reloaded on html changes.
Is there anything else that I need to install (globaly or otherwise)
According to the documentation, you should do 3 things:
add an entry point to the webpack configuration: webpack/hot/dev-server.
add the new webpack.HotModuleReplacementPlugin() to the webpack configuration.
add hot: true to the webpack-dev-server configuration to enable HMR on the server.
As far as I see, I think the only thing of those 3 that you already did is using the hot: true. I use to run the webpack-dev-server via Gulp, so my configurations stay in a JS object, not in command line arguments.
Try this:
import webpack from 'webpack';
const common = {
entry: {
style: PATHS.style,
app: [
PATHS.jsComp,
'webpack/hot/dev-server', `webpack-dev-server/client?http://localhost:3000`
]
},
output: {
path: PATHS.build,
filename: '[name].js'
},
module: {
loaders: [
{ test: /\.jade$/, loader: "jade" }
]
},
devServer: {
hot: true
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
title: 'Webpack demo',
template: PATHS.template, // Load a custom template (ejs by default but can be changed)
inject: 'body' // Inject all scripts into the body (this is the default so you can skip it)
})
]
};
Edit:
After discussing in the comments, I think that my answer does not address your case. I thought you were trying to reload the application after some Jade module (say, some AngularJS component were using import with jade-loader to load a Javascript template string from a Jade file) were changed. But as it turns out, you are trying to reload when your base HTML (well, Jade, but the base of your page) file is changed.
If you are using some modern Javascript framework (React, Angular etc), chances are your base HTML will be very small, and the real thing happens in Javascript.
Anyway, I don't think that your need is currently supported neither by webpack-dev-server or html-webpack-plugin.

Categories