I have the following webpack config file:
const path = require('path');
const config = {
output: {
filename: '[name].bundle.js',
path: 'assets'
},
resolve: {
modules: [
'./js',
'./js/jquery'
],
alias: {
'jquery': 'jquery/jquery-1.10.2.js',
'jquery-ui': 'jquery/jquery-ui.js'
}
},
entry: {
settings : './js/model/settings.js'
}
};
module.exports = config;
On every build webpack ends with an error "Error: Can't resolve 'jquery-ui/autocomplete'" but jquery autocomplete is included in jquery ui. What is missing?
Related
I am building custom gutenberg blocks using npm, webpack and #wordpress/scripts. Everything was fine until I tried to use block.json file. To use block.json file I need block.asset.php file in the build directory because that's the way WordPress core is coded... (https://github.com/WordPress/gutenberg/issues/40447)
And now my problem is that running npm run build does not generate .asset.php file and I do not know why. When I register blocks using wp_enqueue_script or when I manually create an empty .asset.php it works fine.
My webpack.config.js now looks like this:
const defaultConfig = require("#wordpress/scripts/config/webpack.config");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const path = require('path');
module.exports = {
...defaultConfig,
entry: {
'cgbms-section-block': './src/section-block.js',
'cgbms-article-block': './src/article-block.js',
'cgbms-article-header-block': './src/article-header-block.js',
'cgbms-category-block': './src/category-block.js',
'cgbms-category-block-edit': './src/category-block-edit.js',
'cgbms-card-block': './src/card-block.js',
'style-front': './src/css/style-front.scss',
'style-editor': './src/css/style-editor.scss',
},
output: {
path: path.join(__dirname, './build/'),
filename: './blocks/[name].js'
},
module: {
...defaultConfig.module,
rules: [
...defaultConfig.module.rules,
]
},
plugins: [
new MiniCssExtractPlugin({
filename: './css/[name].css'
})
],
externals: {
'#wordpress/blocks': 'wp.blocks',
'#wordpress/block-editor': 'wp.blockEditor'
},
}
Okay so solution is actually really simple.
I think I had to import default plugins config:
...defaultConfig.plugins
So my whole webpack.config.js is now:
const defaultConfig = require("#wordpress/scripts/config/webpack.config");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const path = require('path');
module.exports = {
...defaultConfig,
entry: {
'cgbms-section-block': './src/section-block.js',
'cgbms-article-block': './src/article-block.js',
'cgbms-article-header-block': './src/article-header-block.js',
'cgbms-category-block': './src/category-block.js',
'cgbms-category-block-edit': './src/category-block-edit.js',
'cgbms-card-block': './src/card-block.js',
'style-front': './src/css/style-front.scss',
'style-editor': './src/css/style-editor.scss',
},
output: {
path: path.join(__dirname, './build/'),
filename: './blocks/[name].js'
},
module: {
...defaultConfig.module,
rules: [
...defaultConfig.module.rules,
]
},
plugins: [
...defaultConfig.plugins,
new MiniCssExtractPlugin({
filename: './css/[name].css'
})
]
}
as you can see I also removed externals block.
What I'm trying to achieve is to create a separate webpack assets file for copying static assets from the src folder to the web folder.
node version: 8.15.0
yarn version: 1.13.0
webpack: 4.19.1
copy-webpack-plugin: 6.0.0
To start, I already have a webpack.common.js file which deals with all the js files, and I have created the assets file, which can be seen below.
When I run
webpack --config=webpack/webpack.assets.js --mode development --progress --color
or
webpack --config=webpack/webpack.config.js --config=webpack/webpack.assets.js --mode development --progress --color --env development
I get this error ERROR in Path must be a string. Received undefined and I can't figure it out where it comes from.
By the way I just started dealing with webpack recently.
webpack.common.js
const webpack = require('webpack');
const path = require('path');
const PATHS = {
src: path.join(process.cwd(), 'src', 'js'),
dist: path.join(process.cwd(), 'web', 'js')
};
module.exports = {
entry: {
homepage: path.resolve(PATHS.src, 'pages/homepage.js'),
otherfile: path.resolve(PATHS.src, 'pages/othefile.js'),
}
output: {
path: PATHS.dist,
filename: '[name].js',
chunkFilename: '[name].js',
publicPath: '/js/'
},
...
}
webpack.assets.js
const webpack = require('webpack');
const path = require('path');
const CopyPlugin = require('copy-webpack-plugin');
const PATHS = {
src: path.join(process.cwd(), 'src', 'svg'),
dist: path.join(process.cwd(), 'web', 'svg')
};
module.exports = (env) => {
const svgFormat = env === 'production' ? '[name].[hash].[ext]' : '[name].[ext]';
return merge(commmonConfig, {
entry: [
path.resolve(PATHS.src, 'logo1.svg'),
path.resolve(PATHS.src, 'logo2.svg')
],
output: {
path: PATHS.dist
},
module: {
rules: [
{
test: /\.(svg)$/,
use: [
{
loader: 'file-loader',
options: {
name: svgFormat,
},
},
],
},
]
},
plugins: [
new CopyPlugin([
{
from: PATHS.src,
to: PATHS.dist,
force: true,
toType: 'dir'
},
{
copyUnmodified: true,
debug: 'debug'
}
])
]
});
};
What I would like is to be able to run the assets commands with no errors, as the actual files get copied correctly.
Any ideas are very much appreciated!
You have passed your options object as a second pattern.
Move it outside of the patterns array and pass it as the second parameter instead:
plugins: [
new CopyPlugin(
[
{
from: PATHS.src,
to: PATHS.dist,
force: true,
toType: 'dir'
}
],
{
copyUnmodified: true,
debug: 'debug'
}
)
]
You get the error as your options object is being treated as a pattern but does not have a from property.
I'm using webpack4 to bundle my vendor files. Everything works well and I included the bundle.js file on my webpage.
But the issue is that I can't access the socket.io from my js file. Am getting an error in the console as below:
main.js:276 Uncaught ReferenceError: io is not defined
at main.js:276
Here is my socket.io code
var socket = io().connect();
socket.on('logout', function (data) {
if (data.includes(userId))
window.location.href = '/auth/signout';
});
Here is my webpack.config.js file
const path = require('path');
const glob = require('glob');
const webpack = require('webpack');
module.exports = {
target: "web",
entry: {
page1: glob.sync('./public/js/vendor/*.js')
},
output: {
path: path.resolve(__dirname, "./public/build"),
filename: "bundle.js",
},
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: 'jquery',
"window.jQuery": 'jquery',
})
],
module: {
rules: [
{test: /modernizr/, loader: 'imports-loader?this=>window!exports-loader?window.Modernizr'},
{test: path.resolve(__dirname, './public/js/vendor/wow.min.js'), loader: 'imports-loader?this=>window!exports-loader?window.WOW'}
]
},
resolve: {
modules: [
path.resolve(__dirname, "./public/js/vendor")
]
},
externals: {
jquery: 'jQuery',
jspdf: 'jspdf',
moment: 'moment',
$: 'jQuery'
},
mode: 'development',
devtool: 'inline-source-map',
};
I don't know what am doing here. I searched a lot but not find anything helpful!
Thanks
Are you missing initialization of io ?
const io = require('socket.io')(app);
We are trying to migrate from grunt to webpack.
In our project, we use a JS file called boiler to define the frequently accessed core classes.
__boiler__.js
define(function (require) {
return {
Helpers: require('helpers/_helpers_'),
Enums: require('enums/_enums_'),
Context: require('context'),
...
};
});
And Web Pack Config
webpack.config.js
const path = require('path');
module.exports = {
resolve: {
extensions: ['.js', '.scss'],
alias: {
app: path.resolve(__dirname, './dev_files/app'),
Boiler: path.resolve(__dirname, './dev_files/app/core/_boiler_')
}
},
entry: './dev_files/main.js',
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [{
test: /\.(html)$/,
use: {
loader: 'html-loader'
}
},
{
test: /\.js$/,
use: ['babel-loader']
}
]
}
};
Then when I tried to do webpack build, it gave me some errors like:
ERROR in ./dev_files/app/core/_boiler_.js
Module not found: Error: Can't resolve 'context' in 'C:\Myproject\dev_files\app\core'
resolve 'context' in 'C:\Myproject\dev_files\app\core'
Parsed request is a module
using description file: C:\Myproject\package.json (relative path: ./dev_files/app/core)
Field 'browser' doesn't contain a valid alias configuration
resolve as module
....
I'm a noob when in JavaScript and WebPack in general. Could someone give me an idea what am I doing wrong here? Thanks.
I assume you are using require for your module loading.
try to export your definition so that it can be found/included by webpack
module.export = (function (require) {
return {
Helpers: require('helpers/_helpers_'),
Enums: require('enums/_enums_'),
Context: require('context'),
// ...
};
});
Im trying to integrate PhotoSwipe into my current Project
this is the webpack.config.js
module.exports =
{
entry: './input.js',
output:
{
path: 'js/',
filename: 'output.js'
},
resolve:
{
alias:
{
'photoswipe_js': './node_modules/photoswipe/dist/photoswipe.js',
'photoswipe_ui_default': './node_modules/photoswipe/dist/photoswipe-ui-default.js'
}
},
watch: true
};
this is my main file
require(['photoswipe_js', 'photoswipe_ui_default'], function( PhotoSwipe, PhotoSwipeUI_Default )
{
console.log(PhotoSwipe);
console.log(PhotoSwipeUI_Default);
});
for some reason its trying to find the compiled file from the project root
like
'/1.output.js'
I need it to try to fetch the output file from
'/bundles/mybundle/js/1.output.js'
instead, how can I do that?
Add publicPath to your output object :
module.exports =
{
...
output:
{
path: 'js/',
filename: 'output.js',
publicPath: '/bundles/mybundle/js/'
},
...
};