Reputation: 55
JS file not generating in the same order after Webpack 4 Upgrade
I am in the process of upgrading my site from Webpack 3 to Webpack 4. I'm noticing with the new Webpack 4 configuration, the JavaScript file compiles without errors, but an interactive map on the homepage doesn't generate correctly. Therefore, something is going wrong with the compilation, but I'm not sure what.
While Webpack compiles various types of files, including Javascript, SCSS (css-loader, postcss-loader, sass-loader), png, jpg, etc., it appears the only file with errors is the JavaScript file.
This conclusion because after compiling the site, if I replace the JavaScript file with the version that's hosted on the site, the map appears correctly.
I've conducted a diff analysis of the two JavaScript files, and the weirdest part is that it looks like all of the same elements are included in the JavaScript file, just that in the newer version the order of elements is different.
At first I suspected there might have been an issue with the babel-loaders included, since I know beginning in Webpack 4, Babel's stage presets have been removed -- therefore it's no longer possible to specify only (babel-preset-es2015 and babel-preset-stage-2).
I've been having a hard time with this, and I would love it if anyone has some pointers of other things I might try investigating.
I can't figure out why the order of the JavaScript output is changing, and what difference that is making on the output. The file itself is more than 22,000 lines long.
Since the GitDiff wasn't particularly helpful, given that there were large blocks of code that appeared later on in the file, I tried running a terminal command to output only the lines of code that were different in each file, though the differences appear to be minor.
Rather than analyze the file specifically for changes in what might be wrong, I'm curious to know what other things I should be looking at, or if anyone has a suggestion on how I might go about troubleshooting this more.
Apologies if I'm missing something basic, I'm a little new to Webpack, and have mostly been teaching myself.
Webpack 3 (Old) Files
package.json
{
"name": "xxxxxxxxxx",
"version": "0.0.2",
"scripts": {
"build": "BUILD=true webpack --config webpack-src/webpack.config.js -p",
"start": "WATCH=true BUILD=true webpack -d --config webpack-src/webpack.config.js --optimize-minimize"
},
"devDependencies": {
"autoprefixer": "6.7.0",
"babel-core": "^6.18.2",
"babel-loader": "^6.2.7",
"babel-preset-es2015": "^6.9.0",
"babel-preset-stage-2": "^6.11.0",
"css-loader": "^0.23.1",
"eslint": "4.19.1",
"eslint-config-airbnb": "6.0.2",
"eslint-loader": "^1.3.0",
"eslint-plugin-react": "^4.2.3",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^0.9.0",
"fs-extra": "1.0.0",
"html-loader": "^0.4.4",
"img-loader": "^4.0.0",
"node-sass": "^4.14.1",
"postcss-loader": "3.0.0",
"postcss-scss": "3.0.5",
"raw-loader": "^0.5.1",
"sass-loader": "^4.0.2",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"webpack": "^3.12.0"
},
"dependencies": {
"fecha": "^4.2.1",
"ical": "^0.8.0",
"jquery": "^3.6.0",
"leaflet": "1.0.2",
"lodash": "^4.17.21",
"lunr": "2.3.9",
"slug": "0.9.1",
"source-map-loader": "^0.2.4",
"whatwg-fetch": "2.0.1"
}
}
webpack.config
var path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HHCleanup = require('./plugins/HHCleanup');
const autoprefixer = require('autoprefixer');
var webpackConfig = {
watch: !!process.env.WATCH,
entry: {
app: ['whatwg-fetch', './webpack-src/js/loader.js'],
styles: './webpack-src/sass/screen.scss',
},
output: {
path: path.resolve(__dirname, '../static/lib/'),
publicPath: '',
filename: '[name].js',
jsonpFunction: 'xxxxxxx'
},
plugins: [
new ExtractTextPlugin('[name].css'),
],
module: {
rules: [
{
enforce: "pre",
test: /\.js$/,
exclude: /node_modules/,
loader: "eslint-loader"
},
{
test: /\.js$/,
exclude: /node_modules/,
use: "babel-loader",
include: path.resolve(__dirname, 'js'),
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
plugins: () => [autoprefixer()],
sourceMap: true,
},
},
{
loader: 'postcss-loader',
options: {
plugins: () => [autoprefixer()],
postcssOptions: {
parser: "postcss-scss",
},
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true,
},
},
]
})
},
{
test: /\.png$/,
use: [{
loader: 'url-loader',
query: {
limit: 10000,
mimetype: 'image/png'
}
}
]
},
{
test: /\.jpg$/,
use:
[ {
loader: 'url-loader',
query: {
limit: 10000,
mimetype: 'image/jpg'
}
}
]
},
{ test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, use: 'url-loader' },
],
},
};
module.exports = webpackConfig;
Webpack 4 Files (New, current)
package.json
{
"name": "xxxxxxxxx",
"version": "0.0.2",
"scripts": {
"build": "BUILD=true webpack --config webpack-src/webpack.config.js --node-env production",
"start": "WATCH=true BUILD=true webpack -d --config webpack-src/webpack.config.js --optimize-minimize"
},
"devDependencies": {
"@babel/core": "^7.20.7",
"@babel/plugin-proposal-class-properties": "^7.0.0",
"@babel/plugin-proposal-decorators": "^7.0.0",
"@babel/plugin-proposal-export-namespace-from": "^7.0.0",
"@babel/plugin-proposal-function-sent": "^7.0.0",
"@babel/plugin-proposal-json-strings": "^7.0.0",
"@babel/plugin-proposal-numeric-separator": "^7.0.0",
"@babel/plugin-proposal-throw-expressions": "^7.0.0",
"@babel/plugin-syntax-dynamic-import": "^7.0.0",
"@babel/plugin-syntax-import-meta": "^7.0.0",
"@babel/preset-env": "^7.20.2",
"autoprefixer": "6.7.0",
"babel-loader": "^8.3.0",
"eslint": "^7.32.0",
"eslint-config-airbnb": "6.0.2",
"eslint-plugin-react": "^4.2.3",
"eslint-webpack-plugin": "^2.7.0",
"file-loader": "1.1.6",
"fs-extra": "1.0.0",
"html-loader": "^0.4.4",
"img-loader": "^4.0.0",
"mini-css-extract-plugin": "^1.6.2",
"node-sass": "^7.0.3",
"postcss": "^8.4.22",
"postcss-loader": "^4.2.0",
"postcss-nested": "^6.0.1",
"postcss-scss": "^4.0.6",
"raw-loader": "^0.5.1",
"sass-loader": "10.3.1",
"url-loader": "^0.5.7",
"webpack": "^4.46.0",
"webpack-cli": "^3.3.12"
},
"dependencies": {
"css-loader": "^5.1.1",
"fecha": "^4.2.1",
"ical": "^0.8.0",
"jquery": "^3.6.0",
"leaflet": "^1.0.2",
"lodash": "^4.17.21",
"lunr": "2.3.9",
"slug": "0.9.1",
"source-map-loader": "^0.2.4",
"style-loader": "^2.0.0",
"whatwg-fetch": "2.0.1"
}
}
webpack.config
var path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HHCleanup = require('./plugins/HHCleanup');
const webpack = require('webpack');
const autoprefixer = require('autoprefixer');
const ESLintPlugin = require('eslint-webpack-plugin');
var webpackConfig = {
// .... other webpack, like output, etc.
optimization: {
minimize: false
},
watch: !!process.env.WATCH,
entry: {
app: ['whatwg-fetch', './webpack-src/js/loader.js'],
styles: './webpack-src/sass/screen.scss',
},
output: {
path: path.resolve(__dirname, '../static/lib/'),
publicPath: '',
filename: '[name].js',
jsonpFunction: 'hackshackersJsonp'
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css'
}),
new ESLintPlugin(),
],
module: {
rules: [
// {
// enforce: "pre",
// test: /\.js$/,
// exclude: /node_modules/,
// loader: "eslint-loader",
// options: {
// formatter: require('eslint/lib/cli-engine/formatters/stylish')
//}
// options: {
// formatter: require('eslint').CLIEngine.getFormatter('stylish')
//
// }
// },
{
test: /\.js$/,
exclude: /node_modules/,
include: path.resolve(__dirname, 'js'),
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env' ],
},
}
},
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
importLoaders: 4,
sourceMap: true,
},
},
{
loader: 'postcss-loader'
},
'sass-loader',
],
},
{
test: /\.png$/,
use: [{
loader: 'url-loader',
query: {
limit: 10000,
mimetype: 'image/png'
}
}
]
},
{
test: /\.jpg$/,
use:
[ {
loader: 'url-loader',
query: {
limit: 10000,
mimetype: 'image/jpg'
}
}
]
},
{ test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, use: 'url-loader' },
],
},
};
module.exports = webpackConfig;
.babelrc
{
"presets": [
"@babel/preset-env"
],
"plugins": [
"@babel/plugin-syntax-dynamic-import",
"@babel/plugin-syntax-import-meta",
"@babel/plugin-proposal-class-properties",
"@babel/plugin-proposal-json-strings",
[
"@babel/plugin-proposal-decorators",
{
"legacy": true
}
],
"@babel/plugin-proposal-function-sent",
"@babel/plugin-proposal-export-namespace-from",
"@babel/plugin-proposal-numeric-separator",
"@babel/plugin-proposal-throw-expressions"
]
}
Upvotes: 0
Views: 32