मैं वेबपैक के लिए बहुत नया हूं, मैंने पाया कि निर्माण में हम समग्र कोड के आकार को कम करने में सक्षम हो सकते हैं। वर्तमान में वेबपैक लगभग 8MB फाइलें और main.js 5MB के आसपास बनाता है। उत्पादन निर्माण में कोड के आकार को कैसे कम करें? मुझे इंटरनेट से एक नमूना वेबपैक कॉन्फ़िगरेशन फ़ाइल मिली और मैंने अपने एप्लिकेशन के लिए कॉन्फ़िगर किया और मैंने इसे चलाया npm run buildऔर इसका निर्माण शुरू किया और इसने ./dist/निर्देशिका में कुछ फ़ाइलों को उत्पन्न किया ।
- अभी भी ये फाइलें भारी हैं (विकास संस्करण के समान)
- इन फ़ाइलों का उपयोग कैसे करें? वर्तमान में मैं एप्लिकेशन को चलाने के लिए वेबपैक-देव-सर्वर का उपयोग कर रहा हूं।
package.json फ़ाइल
{
"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]
}
};webpack.production.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');
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]
}
};
1
क्या आपको अपने अंतिम प्रश्न का उत्तर मिला? "इन फ़ाइलों का उपयोग कैसे करें? वर्तमान में मैं एप्लिकेशन को चलाने के लिए वेबपैक-देव-सर्वर का उपयोग कर रहा हूं।"
—
रैंडी
वेबपैक से पहले इंटरनेट इतना बेहतर था, बस इस सवाल और जवाब को देखें।
—
रैंडी एल