I build my project using webpack and want to be able to look at the code in browser but webpack devtools doesn't appear in browser.
I wonder why? I did everything like they say in a book.
Here is my webpack.config file
var path = require('path');
module.exports = {
entry: "./src/App.js",
output: {
path: path.join(__dirname, "dist", "assets"),
filename: 'bundle.js',
sourceMapFilename: 'bundle.map'
},
devtool: "#source-map",
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: "babel-loader",
options: {
presets: ["#babel/preset-env", "#babel/preset-react"]
}
}
}
]
}
}
And here is devtools in browser without webpack in it
Why doesn't it appear in the browser devtools?
You havent set the mode, which defaults to production. See here: https://webpack.js.org/configuration/mode/
And it should be source-map, without the #. Also added sourceMap to the module options, see if that helps.
var path = require('path');
module.exports = {
mode: 'development', // This
entry: "./src/App.js",
output: {
path: path.join(__dirname, "dist", "assets"),
filename: 'bundle.js',
sourceMapFilename: 'bundle.map'
},
devtool: "source-map", // This
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: "babel-loader",
options: {
presets: ["#babel/preset-env", "#babel/preset-react"]
sourceMap: true, // This
}
}
}
]
}
}
Related
I am trying to load images from local storage but i have tried all options left on stackoverflow but not working yet.Below is the folder structure
And below is the code for file-loader
{
test: /\.(jpg|png|svg)$/,
loader: 'file-loader',
options: {
name: '[path][name].[hash].[ext]',
},
},
I tried using import Star from '../images/star.svg'; and then <img src={Star} alt="star" /> but getting below error
ERROR in ./client/images/star.svg
Module parse failed: C:\Users\muaz\Desktop\learn-redux - Copy\client\images\star.svg Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
And also tried src={require("../images/star.svg")} and getting same result.But i have already installed file-loader on dev depencies:
My full devServe.js code is
var path = require('path');
var webpack = require('webpack');
module.exports = {
devtool: 'source-map',
entry: [
'webpack-hot-middleware/client',
'./client/index'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/static/'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
module: {
loaders: [
// js
{
test: /\.js$/,
loaders: ['babel'],
include: path.join(__dirname, 'client')
},
// CSS
{
test: /\.styl$/,
include: path.join(__dirname, 'client'),
loader: 'style-loader!css-loader!stylus-loader'
},
{
test: /\.css$/,
include: path.join(__dirname, 'client'),
loader: 'style-loader!css-loader!stylus-loader'
},
{
test: /\.(jpg|png|svg)$/,
loader: 'file-loader',
options: {},
},
]
}
};
How can I target all CSS and SCSS files in a folder with an entry point, process them and then output the result into a single file in Webpack 4?
For JavaScript seems very straightforward: In the following example, I'm getting all files with js extension located in assets/js then they are transpiled and saved into /dist/bundle.js:
const path = require("path")
const glob = require("glob")
module.exports = {
devtool: 'source-map',
entry: glob.sync("./assets/js/*.js"),
output: {
path: path.resolve(__dirname, "./dist/js/"),
filename: 'bundle.js',
publicPath: '/dist'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: { presets: ["es2015"] }
}
}
]
},
}
I'd like to do the same (along with the previous example) but with CSS and SCSS files. I've tried:
const path = require("path")
const glob = require("glob")
const mcep = require("mini-css-extract-plugin")
module.exports = {
devtool: 'source-map',
entry: {
javascript: glob.sync("./assets/js/*.js"),
css: glob.sync("./assets/css/**/"),
},
output: {
path: path.resolve(__dirname, "./dist/js/"),
filename: 'bundle.js',
publicPath: '/dist'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: { presets: ["es2015"] }
}
},
{
test: /\.(sa|sc|c)css$/,
use: [
{
loader: mcep.loader
},
{
loader: "file-loader",
/*options: {
name: "bundle.css",
outputPath: "dist/css/"
}*/
},
{
loader: "style-loader" // creates style nodes from JS strings
},
{
loader: "css-loader" // translates CSS into CommonJS
},
{
loader: "sass-loader" // compiles Sass to CSS
}
]
}
]
},
plugins: [
new mcep({
filename: "./dist/css/[name].css",
chunks: ['css']
})
]
}
but it does not work. Again, I'd like to target all files within a specific folder, process them and ouput them into /dist/css/something.css, I don't want to import them into a js file.
Thanks
This is my webpack.config.js file
I've just done a build with electron-packager for the first time and realized that I'm pointing only the devServer in here.
I've been doing some research but haven't found much that's helpful. I'd love some help as to setting up my Webpack config to hit my production server.
My main issue is I don't really know where to start, i.e. what's important in a webpack prod config vs a dev config. Is it as simple as providing an alternate URL is different bundling of files?
Thanks!
const webpack = require('webpack');
const path = require('path');
module.exports = {
entry: {
app: ['webpack/hot/dev-server', './scripts/app.js']
},
output: {
// path: './public/built',
path: path.resolve(__dirname, 'public/built'),
filename: 'bundle.js',
publicPath: 'http://localhost:8080/built/'
},
devServer: {
// contentBase: './public',
contentBase: path.join(__dirname, 'public'),
publicPath: 'http://localhost:8080/built/'
},
module: {
rules: [
{
test: /\.jsx?$/,
enforce: "pre",
loader: "eslint-loader",
exclude: /node_modules/
},
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['react', 'es2015', 'stage-3']
}
},
{ test: /\.css$/, loader: 'style-loader!css-loader' },
{ test: /\.scss$/, loader: 'style-loader!css-loader!sass-loader'},
{ test: /\.(ttf|eot|otf|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" },
],
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.IgnorePlugin(new RegExp("^(fs|ipc)$")),
new webpack.LoaderOptionsPlugin({
options: {
eslint: {
failOnWarning: false,
failOnError: true
}
}
})
]
}
I'm trying to migrate my code from webpack v1 to v2 and add in the sass-loader, however I get the error
throw new WebpackOptionsValidationError(webpackOptionsValidationErrors);
I'm very confused as to what the final file is supposed to look like:
let webpack = require('webpack');
let path = require('path');
module.exports = {
devtool: 'eval-source-map',
entry: [
'./src/index'
],
module: {
rules: [
{
test: /\.scss$/,
use: [
"style-loader", // creates style nodes from JS strings
"css-loader", // translates CSS into CommonJS
"sass-loader" // compiles Sass to CSS
]
}],
test: /\.js?$/,
loader: 'babel-loader',
exclude: /node_modules/
},
resolve: {
extensions: ['.js'],
options: {
enforceExtension: false
}
},
output: {
path: path.join(__dirname, '/dist'),
publicPath: '/',
filename: 'bundle.js'
},
devServer: {
contentBase: './dist',
hot: true,
historyApiFallback: true
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new webpack.LoaderOptionsPlugin({
debug: true,
options: {
context: __dirname
}
})
]
};
At the moment the code is a mix of the two versions. I am using webpack version 2.2.1. Thanks.
There are several things you need to change:
Your test: /\.js?$/ and the corresponding loader and exclude should be another object inside the rules array:
module: {
rules: [
{
test: /\.scss$/,
use: [
"style-loader", // creates style nodes from JS strings
"css-loader", // translates CSS into CommonJS
"sass-loader" // compiles Sass to CSS
]
},
{
test: /\.js?$/,
loader: 'babel-loader',
exclude: /node_modules/
}
]
},
resolve.options does not exist, it is just resolve.enforceExtension directly:
resolve: {
extensions: ['.js'],
enforceExtension: false
},
And finally, although it's not an error but just a warning, new webpack.NoErrorsPlugin() is deprecated and has been replaced with:
new webpack.NoEmitOnErrorsPlugin()
Also if you haven't yet, you should have a look at the migration guide from the official docs https://webpack.js.org/guides/migrating/.
I have a webpack config —
{
entry: ['./src/index.js'],
output: {
path: path.resolve(__dirname, '../', 'public'),
filename: 'bundle.js'
},
devtool: '#inline-source-map',
devServer: {
contentBase: './public'
},
module: {
loaders: [
{test: /\.css$/, loader: 'style-loader!css-loader'},
{
test: /.js$/,
loader: 'babel',
exclude: /node_modules/,
query: {
cacheDirectory: true,
presets: ['es2015', 'react'],
plugins: ['transform-decorators-legacy', 'transform-object-rest-spread']
}
}
]
}
}
I run the webpack command from the command line it never comes to a stop.
UPDATE:
Apparently it is running in Watch mode. Though I have not passed the watch flag.
UPDATE 1:
The problem was with a npm module config — https://github.com/lorenwest/node-config/wiki/Reserved-Words.
The module contains some reserved words which include watch and was auto added to my configuration.