You can use multiple HtmlWebpackPlugin plugins to create more than one HTML file in production, but only one of the HTML files will be used by the DevServer. Is there any way to use all the HtmlWebpackPlugin plugins in development as well?
module.exports = {
entry: {
main: './src/main.js',
anotherEntry: './src/anotherEntry.js'
},
// This only serves the index.html file on 404 responses
devServer: {
contentBase: './dist',
historyApiFallback: true,
port: 3000,
},
// ...
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: './src/main.html',
chunks: ['main'],
}),
new HtmlWebpackPlugin({
filename: 'anotherEntry.html',
template: './src/anotherEntry.html',
chunks: ['anotherEntry'],
}),
]
};
historyApiFallback can be given manual rewrites to control in a more fine-grained manner what the DevServer should fallback to on 404 responses. This way we can serve the other files in development as well.
module.exports = {
entry: {
main: './src/main.js',
anotherEntry: './src/anotherEntry.js'
},
devServer: {
contentBase: './dist',
historyApiFallback: {
rewrites: [
{ from: /^\/anotherEntry/, to: '/anotherEntry.html' },
{ to: '/index.html' },
],
},
port: 3000,
},
// ...
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: './src/main.html',
chunks: ['main'],
}),
new HtmlWebpackPlugin({
filename: 'anotherEntry.html',
template: './src/anotherEntry.html',
chunks: ['anotherEntry'],
}),
]
};
Related
I have webpack in my plain HTML, CSS, and Javascript application. I use webpack to convert scss to CSS. I want my javascript to be the same untouched in my dist folder, as I want to edit it later my wordpress projects. Webpack is adding a lot of code, which makes the JS files hard to edit later. Here is my config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { HotModuleReplacementPlugin } = require("webpack");
const HtmlWebpackPartialsPlugin = require("html-webpack-partials-plugin");
module.exports = {
mode: "development",
entry: {
index: "./src/js/index.js",
about: "./src/js/about.js",
courses: "./src/js/courses.js",
contactUs: "./src/js/contact-us.js",
},
output: {
filename: "js/[name].bundle.js",
path: path.resolve(__dirname, "dist"),
assetModuleFilename: "images/[name][ext]",
},
devServer: {
static: { directory: path.join(__dirname, "dist") },
port: 9000,
hot: true,
},
plugins: [
new MiniCssExtractPlugin({
filename: "css/[name].css",
}),
new HtmlWebpackPlugin({
title: "Leads",
filename: "index.html",
template: "./src/pages/index.html",
chunks: ["index"],
}),
new HtmlWebpackPlugin({
title: "Leads About",
filename: "about-us.html",
template: "./src/pages/about-us.html",
chunks: ["about"],
}),
new HtmlWebpackPlugin({
title: "Courses",
filename: "courses.html",
template: "./src/pages/courses.html",
chunks: ["courses"],
}),
new HtmlWebpackPlugin({
title: "Contact Us",
filename: "contact-us.html",
template: "./src/pages/contact-us.html",
chunks: ["contactUs"],
}),
new HtmlWebpackPartialsPlugin({
path: path.join(__dirname, "./src/partials/footer.html"),
location: "partialfooter",
template_filename: [
"index.html",
"about-us.html",
"courses.html",
"contact-us.html",
],
}),
new HtmlWebpackPartialsPlugin({
path: path.join(
__dirname,
"./src/partials/components/infrastructure.html"
),
location: "infrastructure",
template_filename: [
"index.html",
"about-us.html",
"courses.html",
"contact-us.html",
],
}),
new HotModuleReplacementPlugin(),
],
module: {
rules: [
{
test: /\.js$/,
exclude: "/node_modules",
use: {
loader: "babel-loader",
options: {
presets: ["#babel/preset-env"],
},
},
},
{
test: /\.s[ac]ss$/i,
use: [
MiniCssExtractPlugin.loader,
// Creates `style` nodes from JS strings
// "style-loader",
// Translates CSS into CommonJS
"css-loader",
// Compiles Sass to CSS
"sass-loader",
],
},
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: "asset/resource",
},
],
},
optimization: {
minimize: false,
},
};
How can I get webpack to convert my sass files, but simply copy my JS files?
Perhaps you could use copy-webpack-plugin https://webpack.js.org/plugins/copy-webpack-plugin/ to copy files from your src static folder to your build destination folder. Roughly like this -
const CopyPlugin = require("copy-webpack-plugin");
module.exports = {
plugins: [
new CopyPlugin({
patterns: [
{ from: "source", to: "dest" },
{ from: "other", to: "public" },
],
}),
],
};
The code that Webpack adds can allow many features for JavaScript like transpiling ES6 JavaScript to ES5, bundling, code-splitting and dynamic imports. But if you don't need them a straight copy might do.
Hi I have the following problem with my Webpack Config:
I want to have 3 different .js files from my src folder. Each file is supposed to be connected to only the corresponding html file with the same name:
Example: I want app.html only to inject app.js and not index.js and register.js as well.
As for now, Webpack generates 3 html files and 3 .js files, however every .html file gets referenced all 3 .js files, which breaks my code, since I don't have the corresponding id's for eventlisteners in index that the code written app.js.
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
index: ['./src/js/index.js'],
register: ['./src/js/register.js'],
app: ['./src/js/app.js'],
},
output: {
filename: '[name].js',
path: __dirname + '/dist',
},
devServer: {
contentBase: './dist'
},
plugins: [
new HtmlWebpackPlugin({
inject: true,
chunks: 'index',
template:'./src/index.html',
filename: './src/index.html'
}),
new HtmlWebpackPlugin({
inject: true,
chunks: 'register',
template:'./src/register.html',
filename: './src/register.html'
}),
new HtmlWebpackPlugin({
inject: true,
chunks: 'app',
template:'./src/app.html',
filename: './src/app.html'
})
],
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
}
};
Here you have an example adding one chunks to the html
const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const config = [{
site: 'index'
}, {
site: 'register'
}, {
site: 'app'
}];
const entryHtmlPlugins = config.map(({
site
}) => {
return new HtmlWebPackPlugin({
filename: `${site}.html`,
chunks: [site],
});
});
module.exports = {
mode: 'production',
entry: {
index: './src/js/index.js',
register: './src/js/register.js',
app: './src/js/app.js',
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, './dist'),
},
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
}, ],
},
plugins: [...entryHtmlPlugins],
};
Idk why but all my code runs twice when I run webpack-dev-server(webpack serve)...
my folders path:
dist
src
js
app.js
loadBro.js
scss
main.scss
index.html
List item
here is my webpack.config.js:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
mode: 'development',
entry: {
app:'./src/js/app.js',
loadBro: './src/js/loadBro.js'
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
},
devtool: 'inline-source-map',
devServer:{
open:true,
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: 'src/index.html',
filename: 'index.html',
chunks: ['app', 'loadBro'],
}),
module: {
rules: [
{
test: /\.scss$/,
use: ['style-loader', 'css-loader','sass-loader']
},
],
},
};
you already applied plugins: [new HtmlWebpackPlugin({template: ...}) then no need add <script src="bundle whatever u give here"></script>
I have create multiple javascript and html pages for navigation with webpack. I am using HtmlWebpackPlugin implementing the multiple pages for webpack. Please excuse me for brevity as I am new with the webpack development.
Here's my webpack config:
module.exports = {
entry: {
index: './app/src/producer/index.js',
process: './app/src/process/process.js',
results: './app/src/results/results.js'
},
mode: 'production',
output: {
path: buildPath,
filename: '[name].[hash:20].js'
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'app/src/producer/index.html',
inject: 'body',
chunks: ['index']
}
),
new HtmlWebpackPlugin({
filename: 'process.html',
template: 'app/src/process/index.html',
inject: 'body',
chunks: ['process']
}
),
new HtmlWebpackPlugin({
filename: 'results.html',
template: 'app/src/results/index.html',
inject: 'body',
chunks: ['results']
}
),
Here's my project structure for pagination:
So here is my directory structure：
and this is my webpack configuration:
var fs = require('fs')
var path = require('path')
var autoprefixer = require('autoprefixer')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
module.exports = {
entry: {
index: 'src/index/main.js',
video: 'src/video/main.js'
},
output: {
path: path.resolve(__dirname, '../dist/'),
filename: '[name].[hash].js',
chunkFilename: '[id].[chunkhash].js'
},
module: {
loaders: ....
},
resolve: {
extensions: ['', '.js', '.less'],
alias: {
'src': path.resolve(__dirname, '../src')
}
},
resolveLoader: {
root: path.join(__dirname, 'node_modules')
},
plugins: [
....some other plugins....
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
},
mangle: false
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'common',
chunks: ['index', 'video'],
minChunks: 2
}),
new HtmlWebpackPlugin({
filename: 'index.html',
chunks: ['common', 'index'],
template: 'src/index/index.html',
inject: false,
minify: false
}),
new HtmlWebpackPlugin({
filename: 'video.html',
chunks: ['common', 'video'],
template: 'src/video/index.html',
inject: false,
minify: false
})
]
};
after I webpacked my project, I got result as follows:
And my question is that is it possible to keep my directory structure the same as before webpacking the project? Where did I miss?