When I run the server using npm run start, I am getting following error:
✖ 「wds」: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- configuration has an unknown property 'debug'. These properties are valid:
object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry?, externals?, infrastructureLogging?, loader?, mode?, module?, name?, node?, optimization?, output?, parallelism?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, serve?, stats?, target?, watch?, watchOptions? }
The 'debug' property was removed in webpack 2.0.0.
Loaders should be updated to allow passing this option via loader options in module.rules.
Until loaders are updated one can use the LoaderOptionsPlugin to switch loaders into debug mode:
plugins: [
new webpack.LoaderOptionsPlugin({
debug: true
})
]
- configuration.module has an unknown property 'loaders'. These properties are valid:
object { defaultRules?, exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, noParse?, rules?, strictExportPresence?, strictThisContextOnImports?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, unsafeCache?, wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp? }
-> Options affecting the normal modules (`NormalModuleFactory`).
My webpack.config.js is as following:
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: [
'./src/Main.js'
],
output: { path: __dirname, filename: 'bundle.js' },
cache: true,
debug: true,
devtool: 'source-map',
module: {
loaders: [
{
test: /\.glsl$/,
loader: 'webpack-glsl',
include: [
path.resolve(__dirname, 'src', 'shaders')
]
}
]
},
devServer: {
compress: true,
disableHostCheck: true,
},
plugins: [
new webpack.LoaderOptionsPlugin({
debug: true
})
]
};
What is your webpack version ?
As for webpack 4 - you need to change from "loaders" to "rules"
module: {
rules: [
{ test: /\.glsl$/, use: 'webpack-glsl' }
]
...
Hope this is the answer you are expecting.
You should change loaders to rules in webpack 4:
change loaders
to rules .See Loaders
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: [
'./src/Main.js'
],
output: { path: __dirname, filename: 'bundle.js' },
devtool: 'source-map',
module: {
rules: [
{ test: /\.glsl$/, use: 'webpack-glsl' }
]
},
devServer: {
compress: true,
disableHostCheck: true,
},
plugins: [
new webpack.LoaderOptionsPlugin({
debug: true
})
]
};
to see debug property.See Debug
Related
I am trying to build a react app but each time I run npm start, I am greeted with this message
Module not found: Error: Can't resolve 'buffer' in '/Users/abdus/Documents/GitHub/keywords-tracker/node_modules/buffer-equal-constant-time'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
It gives the same message for a few different modules. I have tried npm installing these modules but the error persists
this is my webpack set up that works. you should install all the packages that listed in fallback:
// const path = require("path");
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const webpack = require("webpack");
module.exports = {
mode: "development",
target: "web",
entry: ["regenerator-runtime/runtime", "./src/index.js"],
output: {
filename: "bundle.js",
path: path.join(__dirname, "dist"),
publicPath: "/",
},
resolve: {
extensions: [".js", ".css"],
alias: {
// add as many aliases as you like!
components: path.resolve(__dirname, "src/components"),
},
fallback: {
// path: require.resolve("path-browserify"),
fs: false,
assert: require.resolve("assert/"),
os: require.resolve("os-browserify/browser"),
constants: require.resolve("constants-browserify"),
stream: require.resolve("stream-browserify"),
crypto: require.resolve("crypto-browserify"),
http: require.resolve("stream-http"),
https: require.resolve("https-browserify"),
},
},
// devtool: "eval-cheap-source-map",
devtool: "eval",
module: {
rules: [
{ test: /\.(js|jsx)/, loader: "babel-loader", exclude: /node_modules/ },
{ test: /\.css$/, use: ["style-loader", "css-loader"] },
// {
// test: /\.m?js/,
// resolve: {
// fullySpecified: false
// }
// },
{
test: /\.(woff(2)?|ttf|eot|jpg|jpeg|png|gif)(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: "file-loader",
options: {
name: "[name].[contenthash].[ext]",
outputPath: "fonts/",
},
},
],
},
{
test: /\.svg$/,
use: [
{
loader: "svg-url-loader",
options: {
limit: 10000,
},
},
],
},
{
test: /\.json5$/i,
loader: "json5-loader",
type: "javascript/auto",
options: {
esModule: true,
},
},
],
},
devServer: {
contentBase: path.join(__dirname, "build"),
historyApiFallback: true,
overlay: true,
},
plugins: [
new HtmlWebpackPlugin({
title: "NFT",
template: "src/index.html",
}),
// new CopyWebpackPlugin({
// patterns: [{ from: "assets", to: "assets" }],
// }),
],
};
you can get this webpack5-Boilerplate
Since there are too many polyfills, instead of manually installing all, you can use node-polyfill-webpack-plugin package. instead of fallback property
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
plugins: [
new HtmlWebpackPlugin({
title: "esBUild",
template: "src/index.html",
}),
// instead of fallback
new NodePolyfillPlugin(),
// new webpack.ProvidePlugin({
// process: "process/browser",
// Buffer: ["buffer", "Buffer"],
// React: "react",
}),
],
It seems like you are using a front-end react app and some dependency is internally using the buffer module which is only available in target: node under webpack. So you will need to add a polyfill for the same.
module.exports = {
resolve: {
fallback: {
buffer: require.resolve('buffer'),
}
},
}
You can check the docs here at webpack: https://webpack.js.org/configuration/resolve/#resolvefallback
From Webpack 5 onwards, webpack doesn't polyfill for browser-based applications.
while setup a new project for development, the app is not hot reloading. The app consists of multiple apps separated in its different folders.Currently, there are 2 apps html_nodes_prototype and second_app in src/apps folder. Each app consist of index.html, style.css and main.js when I visit the link http://localhost:8080/second_app/second_app.html, the app shows but If I change something in src/apps/second_app/main.js. It doesn't hot reload, I've to manually reload to get changes. I've set up a webpack-dev-server. Error prompts in the console. I couldn't figure out what's wrong with the config file.
Error in console
[HMR] Update failed: ChunkLoadError: Loading hot update chunk second_app failed.
(missing: http://localhost:8080/second_app.5b0047c2bf2b48c8a084.hot-update.js)
at http://localhost:8080/second_app/second_app.bundle.js:987:26
at new Promise (<anonymous>)
at loadUpdateChunk (http://localhost:8080/second_app/second_app.bundle.js:982:20)
at http://localhost:8080/second_app/second_app.bundle.js:1411:29
at Array.forEach (<anonymous>)
at Object.__webpack_require__.hmrC.jsonp (http://localhost:8080/second_app/second_app.bundle.js:1406:22)
at http://localhost:8080/second_app/second_app.bundle.js:819:45
at Array.reduce (<anonymous>)
at http://localhost:8080/second_app/second_app.bundle.js:815:53
paths.js
const path = require("path");
module.exports = {
// Source files
src: path.resolve(__dirname, "../src"),
// Production build files
build: path.resolve(__dirname, "../dist"),
// public path
public: path.resolve(__dirname, "../public/"),
};
webpack.dev.js
const common = require("./webpack.common");
var HtmlWebpackPlugin = require("html-webpack-plugin");
const merge = require("webpack-merge").merge;
const paths = require("./paths");
module.exports = merge(common, {
mode: "development",
output: {
filename: "[name]/[name].bundle.js",
path: paths.build,
},
module: {
rules: [
{ test: /\.scss$/, use: ["style-loader", "css-loader", "sass-loader"] },
{ test: /\.css$/, use: ["style-loader", "css-loader"] },
],
},
devServer: {
historyApiFallback: true,
// contentBase: paths.build,
open: true,
compress: true,
hot: true,
port: 8080,
},
plugins: [
new HtmlWebpackPlugin({
filename: "html_nodes_prototype/html_nodes_prototype.html",
title: "HTML Nodes",
template: "src/apps/html_nodes_prototype/index.html",
chunks: ["html_nodes_prototype", "vendor"],
}),
new HtmlWebpackPlugin({
filename: "second_app/second_app.html",
title: "Second app",
hot: true,
template: "src/apps/second_app/index.html",
chunks: ["second_app", "vendor"],
}),
],
});
webpack.common.js
const paths = require("./paths");
module.exports = {
mode: "development",
entry: {
html_nodes_prototype: paths.src + "/apps/html_nodes_prototype/main.js",
second_app: paths.src + "/apps/second_app/main.js",
vendor: paths.src + "/apps/_vendor/vendor.js",
},
module: {
rules: [{ test: /\.m?js$/, use: ["babel-loader"] }],
},
};
Adding runtimeChunk: 'single' to webpack.dev.js works for me. Found the answer here
module.exports = {
...,
optimization: {
runtimeChunk: 'single'
},
...
}
I'm using webpack 4.43.0.
How do I prevent codesplitting from happening in webpack? All these files are created - 0.bundle.js up to 11.bundle.js (alongside the expected bundle.js), when I run webpack. Here's my webpack config:
/* eslint-env node */
const path = require('path');
module.exports = {
entry: './media/js/src/main.jsx',
mode: process.env.WEBPACK_SERVE ? 'development' : 'production',
output: {
path: path.resolve(__dirname, 'media/js'),
filename: 'bundle.js'
},
resolve: {
extensions: ['*', '.js', '.jsx']
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
include: path.resolve(__dirname, 'media/js/src'),
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env', '#babel/preset-react']
}
}
}
]
}
};
You can use webpack's LimitChunkCountPlugin to limit the chunk count produced by code splitting:
In your webpack.config.js file:
const webpack = require('webpack');
module.exports = {
plugins: [
new webpack.optimize.LimitChunkCountPlugin({
maxChunks: 1
})
],
...
};
You could also pass the --optimize-max-chunks option to the webpack command directly.
So, in your package.json file:
{
"scripts": {
"build": "webpack --optimize-max-chunks 1",
...
},
...
}
Now, when you run npm run build, webpack will build only one file (or "chunk").
// Full list of options: https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-build
build: {
scopeHoisting: true,
vueRouterMode: 'history', // available values: 'hash', 'history'
showProgress: true,
gzip: false,
analyze: false,
distDir: 'dist',
productName:'pos_host_ui',
minify:true,
// Options below are automatically set depending on the env, set them if you want to override
// extractCSS: false,
// https://quasar.dev/quasar-cli/cli-documentation/handling-webpack
extendWebpack (cfg) {
const webpack = require('webpack');
cfg.plugins.push(
new webpack.optimize.LimitChunkCountPlugin({
maxChunks: 1
})
);
cfg.module.rules.push({
resourceQuery: /blockType=i18n/,
type: 'javascript/auto',
use: [
{ loader: '#kazupon/vue-i18n-loader' },
{ loader: 'yaml-loader' },
]
});
}
Here is my folder structure:
I want to minify and bundle the CSS files inside my src/css folder and output it as a single CSS file inside dist. All the examples I've seen so far recommend require-ing the CSS file inside a JS file. I do not want that. Is there a way to configure in webpack.config.js to just minify and copy these files?
Got it working.
Install dev-dependecies
npm i extract-text-webpack-plugin --save-dev
npm i css-loader --save-dev
webpack.config.js
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const extractCSS = new ExtractTextPlugin('bundle.min.css')
module.exports = {
entry: {
'bundle.min.css': [
__dirname + '/src/styles/abc.css',
__dirname + '/src/styles/xyz.css',
__dirname + '/src/styles/mno.css'
]
},
devtool: '',
output: {
path: __dirname + '/dist/styles/',
filename: '[name]'
},
module: {
rules: [{
test: /\.css$/i,
use: extractCSS.extract({
use: {
loader: 'css-loader',
options: {
minimize: true
}
}
})
}]
},
resolve: {
alias: {},
modules: [],
extensions: ['.css']
},
plugins: [
extractCSS
]
};
bundle.min.css will get generated. Based on minimize: true/false, minification will be decided. Enjoy!
It will go in three steps;
first you will need two loaders and plugin; named css-loader and style-loader and extract-text-webpack-plugin respectively.
Then your config might look like following:
const webpack = require('webpack');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const path = require('path');
module.exports = {
entry: {
app: './src/index.js'
},
output: {
path: 'dist',
filename: 'js/[name]-bundle.js'
},
devtool: "cheap-source-map",
resolveLoader: {
modules: [
'node_modules',
path.join(__dirname, '../node_modules'),
]
},
module: {
loaders: [
{
test: /.css?$/,
loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' }),
exclude: /node_modules/
}
]
},
plugins: [
new ExtractTextPlugin("css/[name].css"),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
screw_ie8: true,
conditionals: true,
unused: true,
comparisons: true,
sequences: true,
dead_code: true,
evaluate: true,
join_vars: true,
if_return: true
},
output: {
comments: false
}
}),
]
}
And then in your entry file, require them like require('./style.css');
Remember, it will follow the paths as your source.
If you are loading font files and images in you css, you might need the file-loader plugin as well which will copy all assets in directory.
The file-loader config will look like:
{
test: /.png?$/,
loader: 'file-loader?name=img/[name].[ext]',
exclude: /node_modules/
}
The UgligyJsPlugin will also minify the CSS.
I'm trying to minimize my bundle.js file with webpack, but getting errors in my config:
module.exports = {
entry: "./entry.js",
output: {
devtoolLineToLine: true,
sourceMapFilename: "./bundle.js.map",
pathinfo: true,
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [
{ test: /\.css$/, loader: "style!css" }
]
},
plugins: [
new webpack.optimize.UglifyJsPlugin({
include: /\.min\.js$/,
minimize: true
})
]
};
The error:
/Users/leongaban/Projects/TickerTags/ionic/TickerTags/www/webpack.config.js:16
new webpack.optimize.UglifyJsPlugin({
^
ReferenceError: webpack is not defined
Seems like you're missing var webpack = require('webpack'); at the top of your configuration file.
It works for me this way