I have defined following method in a Vue page:
getIsoCountryCode: function(country){
console.log(countries);
return "flag-icon-" + countries.getAlpha2Code(country, 'en');
}
The function returns flag-icon-undefined, even though it works when I test it outside the Vue/Webpack environment.
Webpack config:
const { VueLoaderPlugin } = require("vue-loader");
const path = require("path");
module.exports = {
entry: "./lib/team-page/team.js",
devtool: "source-map",
watch: true,
resolve: {
alias: {
flag_icon_css: __dirname + "/node_modules/flag-icon-css/css/flag-icon.css"
}
},
output: {
path: path.resolve(__dirname, "public/lib"),
filename: "team.js"
},
mode: "development",
module: {
rules: [{
type: 'javascript/auto',
test: /\.(json|html)/,
exclude: /(node_modules|bower_components)/,
use: [{
loader: 'file-loader',
options: { name: '[name].[ext]' },
}]
},
{
test: /\.vue$/,
loader: "vue-loader"
},
{
test: /\.scss$/,
use: [
{loader: "style-loader"},
{
loader: "css-loader"
},
{
loader: "sass-loader"
}
]
},
{
test: /\.css$/,
use: [
{loader: "style-loader"},
{
loader: "css-loader"
}
]
},
{
test: /\.js$/,
loader: "babel-loader"
},
{
test: /\.svg$/,
loader: 'file-loader',
options: {
name: '../assets/flags/[name].[ext]'
}
}
]
},
plugins: [new VueLoaderPlugin()]
};
I checked in the debugger, and found this piece of code in the Webpack-compiled file:
var codes = __webpack_require__(/*! ./codes.json */ "./node_modules/i18n-iso-countries/codes.json");
It still points to the node_modules folder, even though I would have expected it to be in the bundle. (Edit: this doesn't seem to matter, axios is defined in the same way and that works as expected.)
I added the rule suggested here to my config file, but it still doesn't work.
Edit: to get it to work, you have to register the locale first. For English: countries.registerLocale(require("i18n-iso-countries/langs/en.json"));
Related
I have a webpack config file(version 5.28.0) that I am trying to alter, in order to create two versions of the user.js file that is generated. I'd like a user.js and legacy_user.js file to be generated. Both files I would like to be generated from the contents of the 'scripts/user' directory, with the exception of I'd like the user.js file to compile excluding the legacy_user.js file that is in the 'scripts/user' directory and the legacy_user.js file to compile excluding the user.js file that is in the 'scripts/user' directory. I have tried the below but the contents of the user.js file keeps overwriting the contents of the legacy_user.js file and they end up being identical:
module.exports = (options = {}) => {
return [
{
mode: options.production ? 'production' : 'development',
entry: {
app: path.resolve(__dirname, 'scripts/app'),
user: path.resolve(__dirname, 'scripts/user'),
'video/trim': path.resolve(__dirname, 'scripts/video/trim')
},
output: { path: path.resolve(__dirname, '../public_html/dist') },
module: {
rules: [
{
test: /\.js$/,
exclude: [/(node_modules)/, /legacy_user\.js$/],
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env'],
plugins: ['#babel/plugin-transform-runtime']
}
}
}, {
test: /\.(s[ac]ss|css)$/i,
use: ['style-loader', 'css-loader', 'sass-loader']
},
{ test: /\.(png|jpg|woff(2)?|ttf|eot|svg)$/, loader: 'file-loader' }
]
},
},
{
mode: options.production ? 'production' : 'development',
entry: {
legacy_user: path.resolve(__dirname, 'scripts/user')
},
output: {
path: path.resolve(__dirname, '../public_html/dist')
},
module: {
rules: [
{
test: /\.js$/,
exclude: [/(node_modules)/, /user\.js$/],
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env'],
plugins: ['#babel/plugin-transform-runtime']
}
}
}, {
test: /\.(s[ac]ss|css)$/i,
use: ['style-loader', 'css-loader', 'sass-loader']
},
{ test: /\.(png|jpg|woff(2)?|ttf|eot|svg)$/, loader: 'file-loader' }
]
},
}
]
}
Any help on this would be greatly appreciated!
i'm making a react and django app and got stuck at this, I've tried everything, i even deleted my project and created a new one but nothing seems to be working, when i navigate to the files in devtools the code is completely different from mine, idk why they are so different the app file is completely diff to my file is app.jsx but in the devtools it imports app.js and the content is different to.
this is my actual index.js code
this is the index.js from the devtools
this is my webpack.config.js, i don't think this ha any issues:-
const webpack = require('webpack');
const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, './static/Main'),
filename: 'main.js'
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: {
loader: "babel-loader",
},
exclude: /node_modules/
},
{
test: /\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 1
}
},
'postcss-loader'
]
},
{
test: /\.svg$/,
use: 'file-loader'
},
{
test: /\.png$/,
use: [
{
loader: 'url-loader',
options: {
mimetype: 'image/png'
}
}
]
},
{
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
}
]
},
optimization: {
minimize: true,
},
plugins: [
new CleanWebpackPlugin(),
new webpack.DefinePlugin({
"process.env": {
NODE_ENV: JSON.stringify("development"),
},
})
],
};
I have a project that uses Webpack 4. I use file-loader to handle images in html and fonts in the styles. But for the images, file-loader creates the image in dist folder but puts "module.exports = __webpack_public_path__ + "assets/fonts/main-logo.svg";" string in it. So i can see the correct path in the html but i can't see the image. Here is my webpack file:
webpack.common.js
const path = require('path');
module.exports = {
entry: "./src/index.js",
module: {
rules: [
{
test: /\.html$/,
use: ["html-loader"]
},
{
test: /\.(svg|png|jpg|gif)$/,
use: {
loader: "file-loader",
options: {
esModule: false,
name: "[name].[ext]",
outputPath: "assets/images"
}
}
},
{
test: /\.(woff(2)?|ttf|eot|svg)([\?]?.*)?$/,
exclude: /node_modules/,
use: {
loader: "file-loader",
options: {
esModule: false,
name: "[name].[ext]",
outputPath: "assets/fonts"
}
}
}
]
}
}
And this is the webpack.dev.js file for development env.
const common = require('./webpack.common');
const merge = require('webpack-merge');
const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');
module.exports = merge(common, {
mode: "development",
output: {
filename: "main.js",
path: path.resolve(__dirname, "dist")
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/template.html"
})
],
module: {
rules: [
{
test: /\.scss$/,
use: ["style-loader", "css-loader", "sass-loader"]
}
]
}
});
You are testing for files with .svg extension in two rules with the same loader.
If your intention is to output SVGs to assets/fonts you should remove the extension from the image files test:
const path = require('path');
module.exports = {
entry: "./src/index.js",
module: {
rules: [
{
test: /\.html$/,
use: ["html-loader"]
},
{
test: /\.(png|jpg|gif)$/,
use: {
loader: "file-loader",
options: {
esModule: false,
name: "[name].[ext]",
outputPath: "assets/images"
}
}
},
{
test: /\.(woff(2)?|ttf|eot|svg)([\?]?.*)?$/,
exclude: /node_modules/,
use: {
loader: "file-loader",
options: {
esModule: false,
name: "[name].[ext]",
outputPath: "assets/fonts"
}
}
}
]
}
}
Otherwise, if you want to output SVGs to assets/images, you should remove the extension from the fonts test:
const path = require('path');
module.exports = {
entry: "./src/index.js",
module: {
rules: [
{
test: /\.html$/,
use: ["html-loader"]
},
{
test: /\.(svg|png|jpg|gif)$/,
use: {
loader: "file-loader",
options: {
esModule: false,
name: "[name].[ext]",
outputPath: "assets/images"
}
}
},
{
test: /\.(woff(2)?|ttf|eot)([\?]?.*)?$/,
exclude: /node_modules/,
use: {
loader: "file-loader",
options: {
esModule: false,
name: "[name].[ext]",
outputPath: "assets/fonts"
}
}
}
]
}
}
Here is the image which shows the first time of loading
After microseconds, everything is fine such as design, javascript, images, etc...
Here is my webpack.config.js:
const path = require('path');
const webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.html$/,
use: [
{
loader: 'html-loader',
options: { minimize: true }
}
]
},
{
test: /\.(scss|css)$/,
use: [
{
// Adds CSS to the DOM by injecting a `<style>` tag
loader: 'style-loader'
},
{
// Interprets `#import` and `url()` like `import/require()` and will resolve them
loader: 'css-loader'
},
{
// Loader for webpack to process CSS with PostCSS
loader: 'postcss-loader',
options: {
plugins: function () {
return [
require('autoprefixer')
];
}
}
},
{
// Loads a SASS/SCSS file and compiles it to CSS
loader: 'sass-loader'
},
]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [
'file-loader'
]
},
]
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/index.html",
filename: "./index.html"
})
]
};
I don't know what I'm missing but I know definitely missing something but not indicating. I tried but didn't get it to work.
I'd really appricitate if could help me resolve this issue.
Thanks
Apparently CSS always loads after JS. Have a look at this issue.
You could also set display: none to your body or main div and change it in the CSS. It would take the same time to load, but you wouldn't see ugly styled content during those microseconds.
I have a no-sql database in the root of my project and I don't want webpack to include it in its bundle. Now I have to rebuild everytime the db gets updated. I'm using webpack 2.2.1. This is what I have:
var path = require('path')
var utils = require('./utils')
var config = require('../config')
var vueLoaderConfig = require('./vue-loader.conf')
function resolve (dir) {
return path.join(__dirname, '..', dir)
}
module.exports = {
entry: {
app: './resources/main.js'
},
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
resolve: {
extensions: ['.js', '.vue', '.json'],
modules: [
resolve('resources'),
resolve('node_modules')
],
alias: {
'vue$': 'vue/dist/vue.common.js',
'src': resolve('resources'),
'assets': resolve('resources/assets'),
'components': resolve('resources/components')
}
},
module: {
rules: [
{
test: /\.(js|vue)$/,
loader: 'eslint-loader',
enforce: "pre",
include: [resolve('resources'), resolve('test')],
options: {
formatter: require('eslint-friendly-formatter')
}
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('resources'), resolve('test')]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
query: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
query: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
}
}
I tried to exclude it by adding it to the externals like so
externals: ['./../db.json'],
Or adding a rule like so
{
test: /\.json$/,
exclude: resolve('db.json')
}
as long as you require()/import it, you will always have to re-build, because webpack will convert it into a new file, as a webpack module.
What you really have to do is load it via AJAX from the browser after your app has started, with your AJAX tool of choice.