Я работаю над новым проектом, настроенным на реакцию с использованием веб-пакетов и babel. Ниже приведен файл webpack.config. js file
Структура папки:
node_modules/
src/
- api/
- components/
- index.jsx
- stats.html
webpack.config.js
babel.config.js
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
const { ContextReplacementPlugin, HashedModuleIdsPlugin } = require('webpack');
const isProd = process.env.NODE_ENV === 'production';
// Callback function defined on window to manage chunk loading
const WEBPACK_JSONP_CALLBACK = 'wpjpLogMeIn';
// Upper size bound for inlining PNGs as data-uris
const INLINE_IMG_LIMIT = 16 * 1024;
const INLINE_FONT_LIMIT = 16 * 1024;
// Array of modules to be split into a vendor chunk
const VENDOR_MODULES = [
'@babel/polyfill',
'core-js',
'react-router',
'react-router-dom',
'react-redux',
'redux'
];
// Define the filename pattern for use in JS files created by the build
// Development filenames do not include the chunkhash suffix
const OUTPUT_FILENAME = isProd
? 'inovmac-services-[name]-[chunkhash:8].js'
: 'inovmac-services-[name].js';
const devtool = isProd ? 'source-map' : 'eval-source-map';
const publicPath = './src/dist/';
const outputPath = 'dist';
const imagePath = 'images';
const stylePath = 'styles';
const fontPath = 'fonts';
const scriptPath = 'javascript';
// Exclude non-English moment locales
const limitMomentLocales = new ContextReplacementPlugin(/moment[\/\\]locale$/, /en/);
const miniCssExtractPlugin = new MiniCssExtractPlugin({
filename: isProd ? `${stylePath}/[name]-[chunkhash:8].css` : `${stylePath}/[name].css`,
chunkFilename: isProd ? `${stylePath}/[name]-[chunkhash:8].css` : `${stylePath}/[name].css`
});
const analyzer = new BundleAnalyzerPlugin({
analyzerMode: 'static',
generateStatsFile: false,
reportFilename: '../stats.html',
openAnalyzer: false
});
// Ensure module IDs are deterministic (numeric IDs aren't)
const hashedModules = new HashedModuleIdsPlugin({
hashFunction: 'sha256',
hashDigest: 'hex',
hashDigestLength: 8
});
const externals = {
'prop-types': 'window.PropTypes',
'react': 'window.React',
'react-dom': 'window.ReactDOM',
'react-thunk': 'window.ReactThunk'
};
const jsxIncludes = [
path.resolve(__dirname, 'src/')
];
module.exports = {
entry: {
vendor: VENDOR_MODULES,
app: './src/index.jsx'
},
output: {
path: path.resolve(__dirname, "dist"),
filename: `${scriptPath}/${OUTPUT_FILENAME}`,
chunkFilename: `${scriptPath}/${OUTPUT_FILENAME}`,
publicPath,
jsonpFunction: WEBPACK_JSONP_CALLBACK
},
optimization: {
splitChunks: {
cacheGroups: {
vendor: {
name: 'vendor',
chunks: 'all',
test: (module) => {
const vendorRoot = `${__dirname}/node_modules`;
for (const vendorModule of VENDOR_MODULES) {
if (module.context && module.context.startsWith(`${vendorRoot}/${vendorModule}`)) {
return true;
}
}
return false;
}
}
}
},
runtimeChunk: {
name: 'runtime'
}
},
devtool,
resolve: {
extensions: ['.js', '.jsx'],
symlinks: false
},
externals,
module: {
rules: [
{
test: /\.jsx?$/,
include: jsxIncludes,
use: {
loader: 'babel-loader'
}
},
/* Global styles (standard CSS) */
{
include: [
path.resolve(__dirname, 'src/global')
],
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'less-loader'
]
},
/* Component styles (React CSS modules) */
{
include: [
path.resolve(__dirname, 'src/components')
],
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
importLoaders: 1,
modules: true,
localIdentName: '[path]-[local]--[hash:base64:5]'
}
},
'less-loader'
]
},
{
test: /\.(png|jpg|gif|svg)$/,
use: {
loader: 'url-loader',
options: {
limit: INLINE_IMG_LIMIT,
name: imagePath + '/[name]-[md5:hash:base36:8].[ext]'
}
}
},
{
test: /\.(ttf|woff|woff2|eot)$/,
use: {
loader: 'url-loader',
options: {
limit: INLINE_FONT_LIMIT,
name: fontPath + '/[name]-[md5:hash:base36:8].[ext]'
}
}
}
]
},
plugins: [
miniCssExtractPlugin,
hashedModules,
analyzer,
limitMomentLocales
]
};
Это мой пакет. json часть скриптов,
"name": "inovma c",
"version": "1.0.0",
"description": "",
"main ":" src / index.jsx ",
" scripts ": {
"clean": "rimraf ./dist/",
"build": "npm run clean && NODE_ENV=production webpack --mode production --progress",
"build:dev": "npm run clean && NODE_ENV=development webpack --mode development",
"build:watch": "npm run clean && NODE_ENV=development webpack --mode development --watch",
"test": "npm run lint && NODE_ENV=test jest && npm run build",
"test:dev": "npm run lint && NODE_ENV=test jest",
"start": "webpack-dev-server"
}
Но все, что я вижу при обслуживании приложения, это структура каталогов,
представление приложения localhost
Ниже показано, как выглядит папка dist, введите описание изображения здесь
Пожалуйста, дайте мне знать, что Я скучаю. Спасибо