webpack ट्यूटोरियल
वेबपैक के साथ शुरुआत करना

टिप्पणियों

require("./code.js") // Load Javascript dependency
var css = require("./styles.css"); // Load CSS as a string
var base64Image = require("./image.png"); // Load an image as a base64 string

// From code.js
console.log("Hello, World");
// From styles.css
var css = "body { margin: 0; padding: 0; } h1 { color: #FF0000; }";
// From image.png
var base64Image = "data:image/gif;base64,R0lGODlhPQBEAPeoAJosM//AwO/AwHVYZ/z595kzAP/s7P+goOXMv8+fhw/v739/f+8PD98fH/8mJl+fn/9ZWb8/PzWlwv///6wWGbImAPgTEMImIN9gUFCEm/gDALULDN8PAD6atYdCTX9gUNKlj8wZAKUsAOzZz+UMAOsJAP/Z2ccMDA8PD/95eX5NWvsJCOVNQPtfX/8zM8+QePLl38MGBr8JCP+zs9myn/8GBqwpAP/GxgwJCPny78lzYLgjAJ8vAP9fX...";

संस्करण

स्थापना

आवश्यक शर्तें:

NodeJS और NPM

वेबपैक स्थापित करने के दो तरीके हैं: विश्व स्तर पर या प्रति-परियोजना। यह प्रति-परियोजना स्थापित निर्भरता के लिए सबसे अच्छा है, क्योंकि यह आपको प्रत्येक परियोजना के लिए वेबपैक के विभिन्न संस्करणों का उपयोग करने की अनुमति देगा और उपयोगकर्ता को विश्व स्तर पर वेबपैक स्थापित करने की आवश्यकता नहीं होगी।

प्रति परियोजना स्थापित करना

अपने प्रोजेक्ट के रूट फ़ोल्डर से निम्न कमांड चलाएँ:

npm install webpack --save-dev

फिर आप node_modules स्थापित node_modules निष्पादन योग्य चला सकते हैं:

./node_modules/.bin/webpack

या अपने package.json फ़ाइल में एक NPM स्क्रिप्ट बनाएँ, जहाँ आप node_modules भाग को छोड़ सकते हैं - node_modules उस फ़ोल्डर को उसके PATH में शामिल करने के लिए पर्याप्त स्मार्ट है।

// in package.json:
{
  ...
  "scripts": {
    "start": "webpack"
  },
  ...
}

// from terminal:
npm start

विश्व स्तर पर स्थापित

प्रॉम्प्ट पर निम्न कमांड चलाएँ:

npm install webpack -g

बेबेल के साथ webpack.config.js का उदाहरण

निर्भरता

npm i -D webpack babel-loader

webpack.config.js

const path = require('path');

module.exports = {
  entry: {
    app: ['babel-polyfill', './src/'],
  },
  output: {
    path: __dirname,
    filename: './dist/[name].js',
  },
  resolve: {
    extensions: ['', '.js'],
  },
  module: {
    loaders: [{
      test: /\.js$/, 
      loaders: ['babel-loader'],
      include: path.resolve(__dirname, 'src')
    }],
  }
};

जावास्क्रिप्ट का उदाहरण + सीएसएस + फ़ॉन्ट्स + छवियाँ

आवश्यक मॉड्यूल

npm install --save-dev webpack extract-text-webpack-plugin file-loader css-loader style-loader

फ़ोल्डर संरचना

.
└── assets
    ├── css
    ├── images
    └── js

webpack.config.js

const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const path = require('path');
const glob = require('glob');

module.exports = {
  entry: {
    script: path.resolve(__dirname, './assets/js/app.js'),
    style: path.resolve(__dirname, './assets/css/app.css'),
    images: glob.sync(path.resolve(__dirname, './assets/images/**/*.*')),
  },
  context: __dirname,
  output: {
    path: path.resolve('./dist/assets'),
    publicPath: '/dist/assets',
    filename: '[name].js',
  },
  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract({
            fallback: 'style-loader',
            use: 'css-loader'
        }),
      },
      {
        test: /(\.woff2?|\.woff|\.ttf|\.eot|\.svg)(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'file-loader?name=[name]-[hash:6].[ext]',
      },
      {
        test: /\.(png|jpe?g|gif|ico)$/,
        loader: 'file-loader?name=[name].[ext]',
      },
    ],
  },
  plugins: [
    new ExtractTextPlugin('app.css' /* optional: , { allChunks: true } */),
  ],
};

glob.sync('./assets/images/**/*.*') को एंट्री के रूप में इमेज फोल्डर में सभी फाइलों की आवश्यकता होगी।

ExtractTextPlugin उत्पन्न आउटपुट को पकड़ लेगा और एक बंडल css फ़ाइल ExtractTextPlugin ।

वेबपैक सरल उदाहरण

वेबपैक का उपयोग करने के लिए न्यूनतम आवश्यक निम्नलिखित कमांड है:

webpack ./src/index.js ./dist/bundle.js

// this is equivalent to:

webpack source-file destination-file

वेब पैक स्रोत फ़ाइल को ले जाएगा, आउटपुट गंतव्य पर संकलित करेगा और स्रोत फ़ाइलों में किसी भी निर्भरता को हल करेगा।

वेबपैक, रिएक्ट जेएसएक्स, बैबल, ईएस 6, सरल विन्यास

सुनिश्चित करें कि आप सही npm निर्भरता स्थापित करते हैं (बैबल ने खुद को संकुल के एक समूह में विभाजित करने का फैसला किया, "सहकर्मी निर्भरता" के साथ कुछ करने के लिए):

npm install webpack webpack-node-externals babel-core babel-loader babel-preset-react babel-preset-latest --save

webpack.config.js :

module.exports = {
    context: __dirname, // sets the relative dot (optional)
    entry: "./index.jsx",
    output: {
        filename: "./index-transpiled.js"
    },
    module: {
        loaders: [{
            test: /\.jsx$/,
            loader: "babel?presets[]=react,presets[]=latest" // avoid .babelrc
        }]
    }, // may need libraryTarget: umd if exporting as a module
    externals: [require("webpack-node-externals")()], // probably not required
    devtool: "inline-source-map"
};

webpack-node-externals एक ऐसा फंक्शन है जो आपके node_modules स्कैन करता है और यह सुनिश्चित करता है कि वे आपके फ्रंट-एंड कोड के साथ ट्रांसप्ल्ड और बंडल नहीं किए गए हैं, हालांकि यह सुनिश्चित करता है कि बंडल उनके लिए संदर्भ बनाए रखता है। यह तेजी से वाष्पीकरण के साथ मदद करता है, क्योंकि आप पुस्तकालयों को फिर से एन्कोडिंग नहीं कर रहे हैं।

Node.js के साथ सरल वेबपैक सेटअप

फ़ोल्डर संरचना

.
├── lib
├── modules
|   ├── misc.js
|   ├── someFunctions.js
├── app.js
├── index.html
├── package.json
├── webpack.config.js
└── webserver.js   

package.json

{
  "name": "webpack-example-with-nodejs",
  "version": "1.0.0",
  "description": "Example using webpack code-splitting with some Node.js to support the example",
  "main": "webserver.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "@Gun",
  "license": "ISC",
  "devDependencies": {
    "body-parser": "^1.17.1",
    "express": "^4.15.2",
    "http": "0.0.0",
    "morgan": "^1.8.1",
    "multer": "^1.3.0",
    "webpack": "^2.4.1"
  }
}

webpack.config.js

var path = require('path'); // used to get context

module.exports = {
    context: path.join(__dirname, 'app'), // resolves entry below, must be absolute path
    entry: './app.js', // entry point or loader for the application
    output: {
        path: path.join(__dirname, 'app/lib'), // express static folder is at /app/lib
        filename: '[name].bundle.js', // the file name of the bundle to create.  [name] is replaced by the name of the chunk (code-splitting)
        publicPath: 'static' // example uses express as the webserver
    }
};

webserver.js

var express = require('express'),
    path = require('path'),
    bodyParser = require('body-parser'),
    multer = require('multer')()
    logger = require('morgan'),
    fs = require('fs'),
    http = require('http');

var app = express();
var port = 31416;

app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.use(logger('short'));
app.use('/jsBundles',express.static('lib'));
app.get('/', function(request, response){
    response.sendFile(__dirname + '/index.html');
});

var server = http.createServer(app).listen(port, function(){
    console.log("I feel a disturbance in the port:" + port);
});

index.html

<!DOCTYPE html>
<html>
    <body>
        <div id="someValue"><label for="num">Enter a number:</label><input id="num" /></div>
        <div class="buttonList">
            <ul>
                <li><button id="doubleIt">double it</button></li>
                <li><button id="tripleIt">triple it</button></li>
            </ul>
        </div>
        <div id="someOtherValue">
            And the count shall be: <span id="theCount"></span>
        </div>
        <script src="/jsBundles/main.bundle.js"></script>        
    </body>
</html>

app.js

require(['./modules/someFunctions'],function(){
        window.onload = function(){
                var someFunctions  = require('./modules/someFunctions');             
                document.getElementById('doubleIt').onclick = function(){
                        var num = document.getElementById('num').value;
                        document.getElementById('theCount').innerHTML = someFunctions.Double(num);
                };

                document.getElementById('tripleIt').onclick = function(){
                        var num = document.getElementById('num').value;
                        document.getElementById('theCount').innerHTML = someFunctions.Triple(num);
                };
        };
});

misc.js

var self = {};
self.isNumber = function(value){
    // http://stackoverflow.com/questions/9716468/is-there-any-function-like-isnumeric-in-javascript-to-validate-numbers
    return !isNaN(parseFloat(value)) && isFinite(value);
};
module.exports = self;

someFunctions.js

require(['./misc'], function(){
    var misc= require('./misc');

    var self = {};
    self.Double = function(value){
        if(!misc.isNumber(value)){
            return 0;
        };
        return value*2;
    }

    self.Triple = function(value){
        if(!misc.isNumber(value)){
            return 0;
        };
        return value*3;
    }

    module.exports = self;
});

ध्यान दें

निर्भरता स्थापित करने के लिए npm i -save-dev चलाएं

एक बार निर्भरता स्थापित करने के बाद नोड चलाएं

सर्वर शुरू करने के लिए नोड webserver.js चलाएं