I am trying to bundle my JS files through Webpack (version 5.x) but it is not bundling order-wise. Here is my configuration file:
const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
mode: "production",
entry: [
"./src/assets/js/plugins/jQuery.js",
"./src/assets/js/plugins/mdb.js",
"./src/assets/js/plugins/aos.js",
"./src/assets/js/main.js",
],
output: {
filename: "assets/js/[name].[contenthash].js",
path: path.resolve(__dirname, "dist"),
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: "./src/index.html",
}),
]
};
I am expecting in the bundle file orderwise like jQuery.js, mdb.js, aos.js and main.js that I added in the entry. Please help me find the issue and a better way to buddle the JS files.
Thank You
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.
So, I'm trying to get this application setup so I can start coding it. But everytime I build the application; webpack automatically adds auto/file.js to the script tags, but it should really be: file.js. So it's adding the auto/ part by itself. I've checked every webpack config file, and I cannot understand why it adds the auto/ prefix to my scripts.
Also like to mention this is a ElectronJS project.
Here are my configurations for webpack.
webpack.config.js
const mainConfig = require("./webpack.main.config");
const rendererConfig = require("./webpack.renderer.config");
const config = [mainConfig, rendererConfig];
module.exports = config;
webpack.base.config.js
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const config = {
plugins: [
new UglifyJsPlugin({
test: /\.js($|\?)/i,
sourceMap: true,
uglifyOptions: {
compress: true
}
})
]
};
module.exports = config;
webpack.main.config.js
const path = require("path");
const merge = require("webpack-merge");
const base = require("./webpack.base.config");
const buildPath = path.resolve(__dirname, "./dist");
const main = merge(base, {
entry: "./main.js",
output: {
filename: "main.js",
path: buildPath
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: "babel-loader"
},
]
},
node: {
__dirname: false,
__filename: false
},
target: "electron-main"
});
module.exports = main;
webpack.renderer.config.js (this is where i think the problem is happening)
const path = require("path");
const merge = require("webpack-merge");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const base = require("./webpack.base.config");
const buildPath = path.resolve(__dirname, "./dist");
const renderer = merge(base, {
entry: "./src/renderer.js",
output: {
filename: "renderer.js",
path: buildPath
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/index.html"
})
],
target: "electron-renderer",
});
module.exports = renderer;
And after the build, when I open the index.html file from the dist directory, the script tag is like this: <script src="auto/renderer.js"></script> when it should just be <script src="renderer.js"></script>
What could be causing this? Is there any configuration I am missing here?
Thanks in advance!
Solved it by updating webpack.
I would like to bundle my chrome extension with Webpack. The source consists multiple entries and the content of the webpack.config.js looks as follows:
const path = require("path");
module.exports = {
entry: {
actions: './src/actions/index.js',
options: './src/options/index.js'
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, "dist")
}
};
And folder structure:
The actions/index.js and options/index.js files are entries.
My goal is, when the src get bundled then dist folder should looks as follows:
How to configure the webpack config to get the desired folder structure above?
Thanks
This should solve your problems ;)
file structure
src
├── actions
│ ├── index.html
│ └── index.js
└── options
├── index.html
└── index.js
webpack.config.js
const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
actions: './src/actions/index.js',
options: './src/options/index.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name]/index.js'
},
plugins: [
new HtmlWebPackPlugin({
template: './src/actions/index.html',
filename: 'actions/index.html',
chunks: ['actions']
}),
new HtmlWebPackPlugin({
template: './src/options/index.html',
filename: 'options/index.html',
chunks: ['options']
})
]
};
And a more correct version ;)
const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const ENTRY = {
actions: './src/actions/index.js',
options: './src/options/index.js'
}
const entryHtmlPlugins = Object.keys(ENTRY).map(entryName => {
return new HtmlWebPackPlugin({
template: `./src/${entryName}/index.html`,
filename: `${entryName}/index.html`,
chunks: [entryName]
});
});
module.exports = {
entry: ENTRY,
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name]/index.js'
},
plugins: entryHtmlPlugins
};
I created a branch on github many-outputs
You can specify the output path for each entry, this will copy the js files into the structure you want.
In order to generate html file for each entry, you can use 2 times HTMLWebpackPlugin with specifying chunk option.
Don't forget to put a src/options.html & src/actions.html html files as a templates.
const path = require('path');
module.exports = {
entry: {
'actions/index': './src/actions/index.js',
'options/index': './src/options/index.js',
},
output: {
filename: 'index.js',
path: path.resolve(__dirname, 'dist'),
},
plugins: [
new HtmlWebpackPlugin({
template: path.join(__dirname, 'src', 'options.html'),
filename: 'options.html',
chunks: ['options'],
}),
new HtmlWebpackPlugin({
template: path.join(__dirname, 'src', 'actions.html'),
filename: 'actions.html',
chunks: ['actions'],
}),
],
};
Recently, I managed to use ejs-loader with Webpack 4. But, I started to get trouble with the script tag that webpack create into index.html when it launch : <script type="text/javascript" src="main.js"></script>. His src is not right because if we look my build I need src="/dist/main.js" :
node_modules/
dist/
index.html
main.js
publics/
src/
views/
server.js
package.json
webpack.config.js
What I need to add into my webpack.congfig.js to create a src like I want ?
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
devtool: 'source-map',
module: {
rules: [{
test: /\.ejs$/,
use: ['ejs-loader']
}]
},
plugins: [
new HtmlWebpackPlugin({
template: './views/pages/index.ejs'})
]
}
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
devtool: 'source-map',
output: {
publicPath: '/dist/' // <---- this
},
module: {
rules: [{
test: /\.ejs$/,
use: ['ejs-loader']
}]
},
plugins: [
new HtmlWebpackPlugin({
template: './views/pages/index.ejs'})
]
}
I'm using webpack to generate hashed bundle filenames.
Assuming I'm using static HTML, CSS & JS, what is the best way to automatically update index.html to point to the latest bundles?
For example,
update:
<script src="e8e839c3a189c25de178.app.js"></script>
<script src="c353591725524074032b.vendor.js"></script>
to:
<script src="d6cba2f2e2fb3f9d98aa.app.js"></script>
<script src="c353591725524074032b.vendor.js"></script> // no change
automatically everytime a new bundle version is available.
Amazingly, this is what the html-webpack-plugin is for.
var webpack = require('webpack');
var path = require('path');
var HTMLWebpackPlugin = require('html-webpack-plugin');
module.exports = function(env) {
return {
entry: {
main: './src/index.js',
vendor: 'moment'
},
output: {
filename: '[chunkhash].[name].js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
names: ['vendor', 'manifest']
}),
new HTMLWebpackPlugin({
tempate: path.join(__dirname, './src/index.html')
})
]
}
};
This generates an index.html in the dist directory that includes the script's in the correct order.
youtube example