[pyroxar]

Miałem problem taki jak tu: github
Polegał on na tym, ze w plikach script/build były ścieżki do plików (/home/***/plik1), a nie powinno być. Więc pomysł jest taki, że na development ładuje: react-hot-loader/babel, a na produkcji nie. Napisałem stosowne pliki, ale scieżek nie ma: ani na dev, ani na produkcji, wygląda na to, że react-hot-loader/babel w ogóle sie nie ładuje...

1) Jak moge to sprawdzić, co zostało załadowane przez webpack?
2) jeśli faktycznie w obu przypadkach react-hot-loader/babel się nie ładuje, a powinno na dev, to co moge zrobić?
package.json:
"watch": "webpack --mode development --progress --hide-modules --watch",
"build": "export NODEOPTIONS='--max-old-space-size=4096' && webpack --mode production --progress --hide-modules",
Mój webpack:

const path = require('path');
const sass = require('sass');
const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
const UnusedWebpackPlugin = require('unused-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
	cache: true,
	entry: './react/app.js',
	output: {
	path: path.resolve(__dirname, 'public/scripts/build'),
	filename: '[name].[contenthash].js',
	publicPath: '/scripts/build/',
	},
	//devtool: "source-map",
	module: {
	rules: [
	{
	test: /\.(js)$/,
                use: "babel-loader",
	exclude: /(node_modules)/,
	},
	{
	test: /\.(css)$/,
	use: [
	{
	loader: 'style-loader',
	},
	{
	loader: 'css-loader',
	},
	{
	loader: 'postcss-loader',
	},
	],
	},
	{
	test: /\.(sa|sc)ss$/,
	use: [
	{
	loader: 'style-loader',
	},
	{
	loader: 'css-loader',
	options: {
	modules: {
	exportLocalsConvention: 'dashes',
	localIdentName: 'put-[name]-[local]-[hash:base64:5]',
	},
	},
	},
	{
	loader: 'postcss-loader',
	},
	{
	loader: 'resolve-url-loader',
	},
	{
	loader: 'sass-loader',
	options: {
	implementation: require('sass'),
	sourceMap: true,
	sassOptions: {
	includePaths: [
	path.resolve(__dirname, 'react/styles'),
	path.resolve(__dirname, 'react/fonts')
	],
	},
	},
	},
	],
	},
	{
	test: /\.(png|jpe?g|gif|svg)$/,
	use: [
	{
	loader: 'file-loader',
	options: {},
	},
	],
	},
	{
	test: /\.(woff|woff2|ttf|otf|eot)$/,
	use: [
	{
	loader: 'file-loader',
	options: {
	name: '[name].[ext]',
	outputPath: 'fonts/',
	esModule: false
	},
	},
	],
	},
	{
	test: /\.(js)$/,
	exclude: /node_modules/,
	use: [
	{
	options: {
	eslintPath: require.resolve('eslint'),

	},
	loader: require.resolve('eslint-loader'),
	},
	],
	},
	],
	},
	resolve: {
	alias: {
	Partials: path.resolve(__dirname, 'react/components/partials'),
	Views: path.resolve(__dirname, 'react/components/views'),
	Handlers: path.resolve(__dirname, 'react/handlers'),
	Images: path.resolve(__dirname, 'react/images'),
	Styles: path.resolve(__dirname, 'react/styles'),
	Utils: path.resolve(__dirname, 'react/utils'),
	Context: path.resolve(__dirname, 'react/context'),
	Hooks: path.resolve(__dirname, 'react/hooks'),
	Data: path.resolve(__dirname, 'react/data')
	},
	descriptionFiles: ['package.json'],
	},
	plugins: [
	new UnusedWebpackPlugin({
	// Source directories
	directories: [path.join(__dirname, 'react')],
	// Exclude patterns
	exclude: ['*.test.js'],
	// Root directory (optional)
	root: __dirname,
	}),

	new CopyWebpackPlugin({
	patterns: [
	{
	from: path.join(__dirname, 'scss'),
	to: path.resolve(__dirname, 'public/style/build/[path][name].css'),
	transform(content, path) {
	const result = sass.renderSync({
	file: path,
	});

	return result.css.toString();
	},
	},
	{
	from: path.join(__dirname, 'js'),
	to: path.resolve(__dirname, 'public/scripts/build'),
	},
	],
	}),

	new WebpackManifestPlugin({
	basePath: '/scripts/build/',
	fileName: path.resolve(__dirname, 'public/manifest.json'),
	}),
	]
};

Mój babel.config.js:

const process = require('process');

module.exports = api => {
  var args = process.argv;
  var isProd = false;

  args.forEach((val, index) => {
    console.log(`${index}: ${val}`);
    if( val === "production")isProd = true;
  });

  api.cache(true);
  const plugins = ["@babel/plugin-proposal-object-rest-spread", "@babel/plugin-syntax-dynamic-import", "@babel/plugin-proposal-optional-chaining"];

  if(isProd === false) {
    plugins.unshift("react-hot-loader/babel");
    console.log("Loading: react-hot-loader/babel");
  }
  console.log(plugins);
  return {
        use: {
	    loader: 'babel-loader',
	    options: {
	    presets: ['@babel/preset-react', '@babel/preset-env'],
	    plugins,
	    cacheDirectory: true,
	    },
    },
  };

};

#webdev #react #nodejs #webpack #webmastering #javascript #programowanie #programista15k