I want to make vanilla js/bootstrap website and I am using webpack. I have been following various instructions and tutorials but they do not seem to work.
Here is my webpack.config.js:
const path = require('path')
module.exports = {
entry: {
auth: [
path.resolve(__dirname, 'src/js/auth.js'),
path.resolve(__dirname, 'src/js/msal-2.28.1.js')
]
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
},
entry: {
main: [
path.resolve(__dirname, 'src/js/index.js'),
path.resolve(__dirname, 'src/js/api.js')
]
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
},
devServer: {
static: path.resolve(__dirname, 'dist'),
port: 3000,
hot: true
},
module: {
rules: [
{
test: /\.(scss)$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader'
},
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: () => [
require('autoprefixer')
]
}
}
},
{
loader: 'sass-loader'
}
]
}
]
}
}
But the error I get when I run webpack is:
Module not found: Error: Can't resolve 'auth' in '/Users/me/Projects/AProject/src/js'
Did you mean './auth'?
All of the .js files exist where they should:
Image of JS files in correct folder structure
So I am at a loss as to what is going on. If I remove the second entry point (main) it builds fine no errors.
I have treid following every single tutorial and guide I can find and it just doesn't work.
Thanks to #Juho Vepsäläinen
There were two errors occuring:
I had an import for auth.js in api.js
I have multiple entry: points and apparently JS will only use the last one.
Here is working config:
const path = require('path')
module.exports = {
entry: {
auth: [
path.resolve(__dirname, 'src/js/auth.js'),
path.resolve(__dirname, 'src/js/msal-2.28.1.js')
],
main: [
path.resolve(__dirname, 'src/js/index.js'),
path.resolve(__dirname, 'src/js/api.js')
]
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
},
devServer: {
static: path.resolve(__dirname, 'dist'),
port: 3000,
hot: true
},
module: {
rules: [
{
test: /\.(scss)$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader'
},
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: () => [
require('autoprefixer')
]
}
}
},
{
loader: 'sass-loader'
}
]
}
]
}
}
Related
After I've added webpack in my react app, once the webpack started, it shows the white screen, and the whole bundle gets downloaded at one time. Even though I've done code splitting in react.
my webpack config:
/* eslint-disable no-un`enter code here`def */
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const HtmlWebpackInjectPreload = require("#principalstudio/html-webpack-inject-preload");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
module.exports = {
entry: path.resolve(__dirname, './index.js'),
devtool: "inline-source-map",
output: {
path: path.resolve(__dirname, "build"),
filename: "bundle.js",
publicPath: '/'
},
devServer: {
contentBase: path.resolve(__dirname, 'build'),
port: 4000,
hot: true,
},
resolve: {
extensions: [".*",".js", ".jsx", ".css"],
fallback: {
stream: false
}
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules)/,
use: ["babel-loader"],
},
{
test: /\.css$/,
exclude: /\.module\.css$/,
use: ["style-loader", "css-loader"],
},
{
test: /\.module\.css$/,
use: [
"style-loader",
{
loader: "css-loader",
options: { importLoaders: 2, modules: true },
},
"postcss-loader",
],
},
{
test: /\.(jpe?g|png|gif|woff|woff2|eot|ttf|svg)(\?[a-z0-9=.]+)?$/,
use: [
{
loader: "url-loader",
options: {
limit: 8192,
},
},
],
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve('./index.html')
}),
new CleanWebpackPlugin(),
new HtmlWebpackInjectPreload({
files: [
{
match: /.*\.woff2$/,
attributes: { as: "font", type: "font/woff2", crossorigin: true },
},
{
match: /\.[a-z-0-9]*.css$/,
attributes: { as: "style" },
},
],
}),
],
};
The attached bundle image also gets larger up to 19MB. What's going wrong I'm not able to figure out.
I am getting a syntax error in one of my css files from monaco-editor in node_modules. It is an unknown word error:
> 1 | // Imports
| ^
2 | import ___CSS_LOADER_API_IMPORT___ from "../../../../../../css-loader/dist/runtime/api.js";
3 | var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(function(i){return i[1]});
# ./node_modules/monaco-editor/esm/vs/platform/contextview/browser/contextMenuHandler.css 2:12-317 9:17-24 13:15-29
However, I have css-loader configured in my webpack.config.js:
const HtmlWebPackPlugin = require("html-webpack-plugin");
const PerspectivePlugin = require("#finos/perspective-webpack-plugin");
const path = require("path");
const plugins = [
new HtmlWebPackPlugin({
title: "Perspective React Example",
template: "./src/frontend/index.html",
}),
new PerspectivePlugin(),
];
module.exports = {
context: path.resolve(__dirname),
entry: "./src/frontend/index.tsx",
mode: "development",
devtool: "source-map",
resolve: {
extensions: [".ts", ".tsx", ".js"],
},
plugins: plugins,
module: {
rules: [
{
test: /\.ts(x?)$/,
//exclude: /node_modules/,
loader: "ts-loader",
},
{
test: /\.css$/,
//exclude: /node_modules/,
use: [
"style-loader",
{
loader: "css-loader",
options: {
importLoaders: 1,
},
},
'postcss-loader'
],
},
],
},
devServer: {
// superstore.arrow is served from here
contentBase: [
path.join(__dirname, "dist"),
path.join(__dirname, "node_modules/superstore-arrow"),
],
},
experiments: {
executeModule: true,
syncWebAssembly: true,
asyncWebAssembly: true,
},
output: {
filename: "app.js",
path: __dirname + "/dist",
},
};
I also have a config file for postcss-loader:
module.exports = {
plugins: [
require('autoprefixer')
]
};
I'm not sure what is wrong with what I'm doing, so I'm wondering if there is another loader I need to add to webpack.config.js or if my configuration is incorrect?
I had same issue, try this:
use: [
"style-loader",
"css-loader",
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
[
"postcss-preset-env",
{
// Options
},
],
],
},
},
},
],
How can i ignore the script tag in Html webpack plugin?
Because I have added this
<script src="cordova.js"/>
tag into my index.html template anonymously for my app development.
See my configuration in Webpack.config.js:
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
mode: "development",
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, "www"),
filename: "./js/build/[name].build.js",
chunkFilename: "./js/build/[name].build.js",
// publicPath: "./js/build/",
},
module: {
rules: [
{
test: /\.m?js$/,
use: {
loader: "babel-loader",
options: {
presets: ["#babel/preset-env"],
},
},
},
{
test: /\.(sa|sc|c)ss$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: "./",
},
},
"css-loader?url=false",
"sass-loader",
],
},
{
test: /\.html$/,
use: ["html-loader"],
},
{
test: /\.(svg|png|jpeg|jpg|gif)$/,
use: {
loader: "file-loader",
options: {
name: "[name].[ext]",
outputPath: "res",
},
},
},
],
},
plugins: [
new MiniCssExtractPlugin({
filename: "./css/build/[name].css",
// chunkFilename: "../css/[id].css"
}),
new HtmlWebpackPlugin({
template: "./src/index.html",
}),
// new BundleAnalyzerPlugin()
],
// devtool: "inline-source-map",
};
I just wanted to ignore the script on production and I have researched this many times but unfortunately I don't see any solution
So, if I got the problem right, you want to ignore a certain resource when bundling for production.
The html-loader has an option to filter sources based on attribute, attribute value, context file and anything you have available in you webpack.config.js.
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// Assuming you are passing arguments to your webpack config like argv.mode
const PRODUCTION = true;
module.exports = {
mode: "development",
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, "www"),
filename: "./js/build/[name].build.js",
chunkFilename: "./js/build/[name].build.js",
// publicPath: "./js/build/",
},
module: {
rules: [
{
test: /\.m?js$/,
use: {
loader: "babel-loader",
options: {
presets: ["#babel/preset-env"],
},
},
},
{
test: /\.(sa|sc|c)ss$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: "./",
},
},
"css-loader?url=false",
"sass-loader",
],
},
{
test: /\.html$/,
use: {
loader: "html-loader",
options: {
sources: {
urlFilter: (attribute, value, resourcePath) => {
if (PRODUCTION && /cordova.js$/.test(value)) {
return false;
}
return true;
},
}
},
},
},
{
test: /\.(svg|png|jpeg|jpg|gif)$/,
use: {
loader: "file-loader",
options: {
name: "[name].[ext]",
outputPath: "res",
},
},
},
],
},
plugins: [
new MiniCssExtractPlugin({
filename: "./css/build/[name].css",
// chunkFilename: "../css/[id].css"
}),
new HtmlWebpackPlugin({
template: "./src/index.html",
}),
// new BundleAnalyzerPlugin()
],
// devtool: "inline-source-map",
};
In the html module rule, I added an options property to html-loader with an example how you could ignore a certain resource with urlFilter. Check the html-loader docs on filtering resources
You will need to get a reference to the variables you passed to your cli like --mode eg. line 5-6. (Not in the current example) See webpack docs on env vars.
Hellor there, I am working with react-fontawesome and webpack 4.33 version and I have this issue when I use a IconComponent it throws me an error TypeError: Object(...) is not a function.
It seems that the code points right here:
var renderedIcon = Object(_fortawesome_fontawesome_svg_core__WEBPACK_IMPORTED_MODULE_0__["icon"])(iconLookup, _objectSpread({}, classes, transform, mask, {
symbol: symbol,
title: title
}));
I have this in my webpack dev config file:
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const webpack = require('webpack')
module.exports = {
entry: {
app: path.resolve(__dirname,'src/index.js'),
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/[name].js',
publicPath: 'http://localhost:9001/',
chunkFilename: 'js/[id].[chunkhash].js'
},
devServer: {
contentBase: path.resolve(__dirname, 'dist'),
open: true,
port: 9001,
hot: true,
},
module: {
rules: [
{
test: /\.js$/,
use: 'babel-loader',
exclude: /node_modules/,
},
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.jpg|png|gif|woff|woff2|eot|ttf|svg|mp4|webm$/,
use: {
loader: 'file-loader',
options: {
outputPath: 'assets/',
}
}
},
]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, 'public/index.html')
}),
],
}
I think I didn't add some configuration to my webpack file or should I report this as bug in the repository of react-fontawesome?
I am using Webpack 2 for my portfolio website, but it's not an SPA - therefore, the intention is not to output everything into my bundled JS.
I have a few entry points for the .pug, .scss and .js files. Like so:
entry: {
app: [
path.resolve(__dirname, 'src/pug/app.pug'),
path.resolve(__dirname, 'src/js/app.js'),
path.resolve(__dirname, 'src/scss/app.scss')
]
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/[name].js'
}
However, when looking at the source for the app.js, I see the rendered HTML from my .pug files.
For the .pug compiling, I'm using HtmlWebpackPlugin. I guess the easiest way for me to explain what's going on is to show you the webpack.config.babel.js file:
import webpack from 'webpack';
import path from 'path';
import autoprefixer from 'autoprefixer';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import ExtractTextPlugin from 'extract-text-webpack-plugin';
import SvgStorePlugin from 'external-svg-sprite-loader/lib/SvgStorePlugin';
import bourbon from 'bourbon';
import neat from 'bourbon-neat';
const extractScss = new ExtractTextPlugin({
filename: 'css/[name].css',
allChunks: true
});
const config = {
entry: {
app: [
path.resolve(__dirname, 'src/pug/app.pug'),
path.resolve(__dirname, 'src/js/app.js'),
path.resolve(__dirname, 'src/scss/app.scss')
]
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/[name].js'
},
module: {
rules: [
{
test: /\.pug$/,
use: [
{
loader: 'html-loader'
},
{
loader: 'pug-html-loader',
options: {
pretty: false,
exports: false
}
}
]
},
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: [
{
loader: 'babel-loader',
options: {
presets: [
['es2015']
]
}
}
]
},
{
test: /\.(jpe?g|png|gif)$/i,
use: [
{
loader: 'file-loader',
options: {
name: '/images/[name].[ext]'
}
},
{
loader: 'image-webpack-loader',
options: {
progressive: false,
optipng: {
optimizationLevel: 7,
quality: '90',
speed: 5
},
mozjpeg: {
quality: 90
},
gifsicle: {
interlaced: false
}
}
}
]
},
{
test: /\.svg$/,
use: [
{
loader: 'external-svg-sprite-loader',
query: {
name: 'svg/sprite.svg',
iconName: '[name]'
}
}
]
},
{
test: /\.scss$/,
use: extractScss.extract([
{
loader: 'css-loader'
},
{
loader: 'postcss-loader',
options: {
plugins() {
return [
autoprefixer({
browsers: ['last 2 versions', 'Explorer >= 9', 'Android >= 4']
})
];
}
}
},
{
loader: 'sass-loader',
options: {
includePaths: [
bourbon.includePaths,
neat.includePaths
]
}
}
])
}
]
},
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
stats: 'errors-only',
open: false
},
plugins: [
new SvgStorePlugin(),
new HtmlWebpackPlugin({
title: 'Portfolio',
minify: {
collapseWhitespace: true
},
hash: true,
template: 'src/pug/app.pug',
filetype: 'pug',
filename: 'index.html'
}),
extractScss
]
}
process.traceDeprecation = false;
export default config;
I don't see any CSS in the app.js bundle and the entry point is setup just the same, so might it have something to do with the HtmlWebpackPlugin itself? Perhaps I'm not understanding how this works correctly and my configuration is wrong.
I'm new to Webpack (coming from Gulp), so please bear with me if the answers to my questions seem rather obvious.
Thanks for your help.
Update:
For reference, my project structure is as follows:
And I would call an image from my .pug file in /pug/components/example.pug with a path like img(src="../images/example.jpg"). This worked prior to removing .pug as an entry point in the Webpack config as user Tatsuyuki suggested below.
Do not add the template as an source:
app: [
// path.resolve(__dirname, 'src/pug/app.pug'),
path.resolve(__dirname, 'src/js/app.js'),
path.resolve(__dirname, 'src/scss/app.scss')
]
Instead, specify the template option for HtmlWebpackPlugin:
new HtmlWebpackPlugin({
template: 'src/index.pug'
})
Reference