আমি ওয়েবপ্যাকটিতে খুব নতুন, আমি দেখতে পেলাম যে প্রোডাকশন বিল্ডে আমরা সামগ্রিক কোডের আকার হ্রাস করতে পারব। বর্তমানে ওয়েবপ্যাকটি প্রায় 5 এমবি প্রায় 8 এমবি ফাইল এবং মেইন.জেগুলি তৈরি করে। উত্পাদন বিল্ডে কোডের আকারটি কীভাবে হ্রাস করবেন? আমি ইন্টারনেট থেকে একটি নমুনা ওয়েবপ্যাক কনফিগারেশন ফাইল পেয়েছি এবং আমি আমার অ্যাপ্লিকেশনটির জন্য কনফিগার করেছি এবং আমি চালনা করি npm run buildএবং এটি শুরু করি এবং এটি ./dist/ডিরেক্টরিতে কিছু ফাইল উত্পন্ন করে generated
- এখনও এই ফাইলগুলি ভারী (উন্নয়নের সংস্করণ হিসাবে একই)
- এই ফাইলগুলি কীভাবে ব্যবহার করবেন? বর্তমানে আমি অ্যাপ্লিকেশনটি চালানোর জন্য ওয়েবপ্যাক-ডেভ-সার্ভার ব্যবহার করছি।
প্যাকেজ.জসন ফাইল
{
"name": "MyAPP",
"version": "0.1.0",
"description": "",
"main": "src/server/server.js",
"repository": {
"type": "git",
"url": ""
},
"keywords": [
],
"author": "Iam",
"license": "MIT",
"homepage": "http://example.com",
"scripts": {
"test": "",
"start": "babel-node src/server/bin/server",
"build": "rimraf dist && NODE_ENV=production webpack --config ./webpack.production.config.js --progress --profile --colors"
},
"dependencies": {
"scripts" : "", ...
},
"devDependencies": {
"scripts" : "", ...
}
}
webpack.config.js
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var public_dir = "src/frontend";
var ModernizrWebpackPlugin = require('modernizr-webpack-plugin');
module.exports = {
devtool: 'eval-source-map',
entry: [
'webpack-hot-middleware/client?reload=true',
path.join(__dirname, public_dir , 'main.js')
],
output: {
path: path.join(__dirname, '/dist/'),
filename: '[name].js',
publicPath: '/'
},
plugins: [
plugins
],
module: {
loaders: [loaders]
}
};
ওয়েবপ্যাক.প্রডাকশন.কনফিগ.জেএস
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var public_dir = "src/frontend";
var ModernizrWebpackPlugin = require('modernizr-webpack-plugin');
console.log(path.join(__dirname, 'src/frontend' , 'index.html'));
module.exports = {
devtool: 'eval-source-map',
entry: [
'webpack-hot-middleware/client?reload=true',
path.join(__dirname, 'src/frontend' , 'main.js')
],
output: {
path: path.join(__dirname, '/dist/'),
filename: '[name].js',
publicPath: '/'
},
plugins: [plugins],
resolve: {
root: [path.resolve('./src/frontend/utils'), path.resolve('./src/frontend')],
extensions: ['', '.js', '.css']
},
module: {
loaders: [loaders]
}
};