I am facing this problem :
First, I am starting webpack to build the project. On localhost, everything works fine. In the build folder, index.html and index.js are getting built.
But, when I run it in the browser (not using local server) but using these files, it appears "not found".
Checked webpack.config.js - everything is placed in a single index.js.
This is webpack.config.js:
var path = require('path');
module.exports = {
entry: './entry.js',
output: {
filename: 'build/index.js',
publicPath: '/build'
},
resolve: {
extensions: ['', '.js', '.jsx', '.json']
},
module: {
loaders: [
{
test: /\.jsx?$/,
loader: 'babel-loader',
include: path.resolve(__dirname, "app"),
query: {
presets:['react', 'es2015', 'stage-0']
}
},
{
test: /\.scss$/,
loader: 'style-loader!css-loader!sass-loader'
}
]
}
};
There is no eror. But there is text "Not found"
Related
This is my webpack file, nothing special
const path = require('path')
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'public/scripts'),
publicPath: '/public/scripts/',
filename: 'bundle.js'
},
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
}]
},
devServer: {
contentBase: path.resolve(__dirname, 'public'),
watchContentBase : true,
publicPath: '/scripts/'
}
}
However, when I run 'npm run webpack-dev-server', I get the normal node.js output but the website does not update when new changes are made. I deleted the bundle.js file and when I ran it again, I got an error saying 'bundle.js cannot be found'. I figured out that bundle.js is not being recompiled at all when running this command.
I am on windows if that makes any difference. Any help would be appreciated.
EDIT: Below is my folder structure.
You need to use watchContentBase option for devServer:
watchContentBase:true
Would also recommend setting hot:true for modules replecement and open:true - so when you will run the dev server it will automatically open you your site at default browser.
More on devServer options you could find here - https://webpack.js.org/configuration/dev-server/#devserverwatchoptions-
EDIT
So after quite long conversation in chat, here are the results:
Still to "live-reload" the page you should use watchContentBase
But there were other issues in this case - publicPath in devServer and outputPath were not the same and then index.html should reference bundle.js under /public/scripts
New webpack.config.js:
const path = require('path')
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, '/public/scripts'),
publicPath: '/public/scripts',
filename: 'bundle.js'
},
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
}]
},
devServer: {
contentBase: path.resolve(__dirname, 'public'),
watchContentBase : true,
publicPath: '/public/scripts'
}
}
New src for bundle in Index.html:
/public/scripts/bundle.js
When I run webpack server, Below config by default opens index.html available in public folder.
so, Instead of index.html, I want to create another.html or may be like a folder inside which an html eg. public/someFolder/another.html and want to open it, when webpack server is run.
how to run a different html file instead of index.html when webpack server runs?
webpack.config.js
const path = require("path");
module.exports = {
entry: "./myFile.js",
output: {
path: path.join(__dirname, "public"),
filename: "bundle.js",
},
module: {
rules: [
{
loader: "babel-loader",
test: /\.js$/,
exclude: /node_modules/,
},
{
test: /\.s?css$/,
use: ["style-loader", "css-loader", "sass-loader"],
},
],
},
devtool: "cheap-module-eval-source-map",
devServer: {
contentBase: path.join(__dirname, "public"),
historyApiFallback: true,
},
};
Have a look at HtmlWebpackPlugin
You can specify a custom path and a custom .html file.
output: {
filename: './dist/subdirectory/myindex.html'
},
plugins: [new HtmlWebpackPlugin()]
The default is of course index.html
I am writing an electron app using react as for the UI and webpack for bundling. Webpack is configured right now for the react part of the application as follows:
const path = require('path');
const HtmlWebPackPlugin = require("html-webpack-plugin");
const CopyWebpackPlugin = require('copy-webpack-plugin')
module.exports = {
mode: 'development',
entry: './src/index.tsx',
target:'node',
output: {
filename: '[name].bundle.js',
path: path.join(__dirname, 'build')
},
module: {
rules: [
{
test: /\.tsx?$/,
exclude: /node_modules/,
use: {
loader: 'ts-loader'
}
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader'
}
]
},
{
test: /\.css$/,
loader: 'css-loader',
options: {
sourceMap: true,
},
},
{
test: /\.scss$/,
use: [{
loader: "css-loader", options: {
sourceMap: true
}
}, {
loader: "sass-loader", options: {
sourceMap: true
}
}]
}
]
},
resolve: {
extensions: ['.tsx', '.ts', '.js']
},
plugins: [
new HtmlWebPackPlugin({
template: "./index.html",
filename: "./index.html"
}),
new CopyWebpackPlugin([{ from: 'public',ignore: ['*.html'] }])
],
devtool: 'eval-source-map'
}
In my index.html I need to use the following script tag for electron's rendering process :
<script>
require('build/bundle.js')
</script>
When I run webpack-dev-server everything compiles without error, but when I open chrome dev tools I see this error :
Uncaught ReferenceError: require is not defined
at (index):12
I had to target node in my webpack.config to make electron work so I assume the require function works in browser as well since if I were to create an electron app in a pure node.js environment(without webpack and react) it works without any additional configuration. So I guess there is an issue with my webpack configuration, but I can't find any useful resource online unfortunately. Can anyone help me out? Thanks in advance!
Electron is basically a chromium browser connected to a node process through « IPC ».
This means you don’t have require available in the browser.
You need to import your script like this:
<script src="/build/bundle.js"></script>
And also you need to change the target from node to electron-renderer for the browser code.
If you also need to build code for the node side you need to add the electron-main target.
See https://webpack.js.org/configuration/
I have issue with Webpack building production bundle with test files + test libs included.
In this case it is Enzyme and Jest which we use.
Webpack version 3.10.0
Webpack.build.js
const path = require('path');
const webpack = require('webpack');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = function() {
return {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, '../build'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.js$/,
exclude: [
/node_modules/,
/__snapshots__/,
/test-util/,
],
loader: 'babel-loader'
},
{
test: /\.scss$/,
use: [
{
loader: 'isomorphic-style-loader'
},
{
loader: 'css-loader'
},
{
loader: 'sass-loader'
}
]
},
]
},
plugins: [
new UglifyJsPlugin(),
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify(process.env.NODE_ENV),
}
}),
]
}
};
Here is the file structure
I have tried to workaround the issue by placing Enzyme as external resource in webpack.
externals: {
'enzyme': 'enzyme',
'enzyme-adapter-react-16': 'enzyme-adapter-react-16',
}
That does exclude it from build but (it is workaround) it still builds the snapshot files
I have tried to make "test" regex of babel-loader more specific and exclude test files but it failed.
This is new project and I spent whole day trying to make it bundle only what is necesary. Drained all of my know-how, my google know-how and know-how of the poeple I know or I work with. Hope that SO will be smarter :)
I am tring to load image locally, the image file is in the same folder of jsx file. The webpack.config.js is looks like this:
path = require('path');
module.exports = {
context: __dirname,
entry: "./app/entry.jsx,
output: {
path: path.join(__dirname, 'lib'),
filename: "bundle.js",
devtoolModuleFilenameTemplate: '[resourcePath]',
devtoolFallbackModuleFilenameTemplate: '[resourcePath]?[hash]'
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel',
query: {
presets: ['react']
}
},
{
test: /\.css$/,
loader: "style-loader!css-loader?root=."
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
loader: 'url?limit=10000!img?progressive=true'
}
]
},
devtool: 'source-map',
resolve: {
extensions: ["", ".js", ".jsx" ]
}
};
and the jsx is like this
var loadingImg = require('url!img!./loading.gif');
the error shows in console is:
ERROR in Loader app/node_modules/url/url.js didn't return a function
# app/components/session/login.jsx 5:17-49
How should I load this image?
Nothing is jumping out at me as incorrect in your webpack config file. I would take a look at the way you're calling the image in your code, doesn't look right to me. I'm not sure where you're trying to use the code, but you could do something like;
<img src={require("../../images/some-filepath/some-image.png")} />
or:
<Image source={{uri: '../../images/some-filepath/some-image.png'}} />
I did make a tutorial a while ago for using the image-webpack-loader, if you want to take a look.
Anyway, hope this helps!