Header Ads Widget

Webpack Tutorial

What is webpack?

Webpack is a powerful module bundler. A bundle is a JavaScript file that incorporate assets that belong together and should be served to the client in a response to a single file request. A bundle can include JavaScript, CSS styles, HTML, and almost any other kind of file. Webpack roams over your application source code, looking for import statements, building a dependency graph, and emitting one (or more) bundles. With plugins and rules, Webpack can preprocess and minify different non-JavaScript files such as TypeScript, SASS, and LESS files. You determine what Webpack does and how it does it with a JavaScript configuration file, webpack.config.js.

webpack advance

Webpack installation

In order to use webpack you need to have node.js installed. If you don't have node.js in your machine, please install it first. Below command will install webpack globally.

    npm install webpack -g
    //-g will install it globally
    

Generate you first bundle file

First of all Create a .js file and write few lines of JavaScript code.

    /*===test.js=== */
    documet.write('Welcome to webpack tutorial');
    

Use the below commad to generate the bundle file

    webpack ./test.js bundle.js
    // test.js is source file and mybundle.js is generated bundle file
    

Above command will take test.js as source file and generate a bundle file bundle.js. So the first argument is the source file and the last argiument is the bundle file(which will be generated by webpack. NOTE: You can give any name to your bundle file.

Create a HTML file

    <html>
      <head>
          <meta charset="utf-8">
      </head>
      <body>
          <script src="bundle.js" charset="utf-8" ></script>
      </body>
  	</html>
    
Now Open the index.html file, It should display:
welcome to the webpack tutorial

Simple configuration Example:

    {
       context: __dirname + "/app",
       entry: "./entry",
       output: {
           path: __dirname + "/dist",
           filename: "bundle.js"
       }
    }
    

entry is the entry point for the bundle. If you pass a string: The string is resolved to a module which is loaded upon startup. So here in above example context: __dirname + "/app" is the directory of entry point and entry: "./entry" is the entry file name. The output of will be a bundle file filename: "bundle.js". You can give any name to bundle file.

If you pass an array for enry point: All modules are loaded upon startup. The last one is exported.

    entry: ["./entry1", "./entry2"]
    

If you pass an object: Multiple entry bundles are created. The key is the chunk name. The value can be a string or an array.

    {
        entry: {
            page1: "./page1",
            page2: ["./entry1", "./entry2"]
        },
        output: {
            // Make sure to use [name] or [id] in output.filename
            //  when using multiple entry points
            filename: "[name].bundle.js",
            chunkFilename: "[id].bundle.js"
        }
    } 
    

Loaders

Module Loader

In order to use webpack you need to have node.js installed. If you don't have node.js in your machine, please install it first. Below command will install webpack globally.

    module.exports = {
     entry: "./entry.js",
     output: {
      path: __dirname,
      filename: "bundle.js"
     },
    module: {
        loaders: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          loader: 'babel-loader',
          query: {
            presets: loaderPresets
          }
        }, {
          test: /\.css$/, loader: 'style-loader!css-loader' //CSS Loader
        }, {
          test: /\.less$/, loader: 'style-loader!css-loader!less-loader' //Less Loader
        }, {
          test: /\.json$/, loader: 'json-loader' //JSON Loader
        }, {
          test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
          loader: 'url-loader?name=/[hash].[ext]&limit=10000&mimetype=application/font-woff' // Font .woff Loader
        }, {
          test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
          loader: 'url-loader?name=/[hash].[ext]&limit=10000&mimetype=application/font-woff' // font .woff2  Loader
        }, {
          test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
          loader: 'url-loader?name=/[hash].[ext]&limit=10000&mimetype=application/octet-stream'// .ttf image Loader
        }, {
          test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
          loader: 'file-loader' //File Loader 
        }, {
          test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
          loader: 'url-loader?limit=10000&mimetype=image/svg+xml' //.svg image Loader
        }, {
          test: /\.(jpg|png)$/,
          loader: 'file?name=/[path][name].[hash].[ext]' // .jpg/.png image loader
        }]
    }
    

Config file

    module.exports = {
     entry: "./entry.js",
     output: {
      path: __dirname,
      filename: "bundle.js"
     },
    module: {
        loaders: [
        {
          test: /\.js$/,
        }, {
          test: /\.css$/, loader: 'style-loader!css-loader' 
        }, {
          test: /\.less$/, loader: 'style-loader!css-loader!less-loader' 
        }, {
          test: /\.json$/, loader: 'json-loader' //JSON Loader
        }, {
          test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
          loader: 'url-loader?name=/[hash].[ext]&limit=10000&mimetype=application/font-woff'
        }, {
          test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
          loader: 'url-loader?name=/[hash].[ext]&limit=10000&mimetype=application/font-woff' 
        }, {
          test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
          loader: 'url-loader?name=/[hash].[ext]&limit=10000&mimetype=application/octet-stream'
        }, {
          test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
          loader: 'file-loader' //File Loader 
        }, {
          test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
          loader: 'url-loader?limit=10000&mimetype=image/svg+xml'
        }, {
          test: /\.(jpg|png)$/,
          loader: 'file?name=/[path][name].[hash].[ext]' 
        }]
    }
    

Pretty output

while starting server we can pass few optional command as well

    webpack-dev-server --progress --colors --inline --hot --port 8080 --host 172.168.35.86
    

--colors give a colourful output at console

--inline embed the webpack-dev-server runtime into the bundle.

--hot adds the HotModuleReplacementPlugin and switch the server to hot mode. Note: make sure you don’t add HotModuleReplacementPlugin twice.

--hot --inline also adds the webpack/hot/dev-server entry.

--lazy no watching, compiles on request (cannot be combined with --hot)

--port You can manullay assign the port no (EX: 8080)

--host You can manullay assign the host ip address (EX: 172.168.35.86), now you can access your application over a network. EX: http://172.168.35.86:8080

You can nuse webpack-dev-server for development. Install it globally.

    npm install webpack-dev-server -g //webpack server innstalled globally
    webpack-dev-server --progress --colors //this will start a server in dev mode
    

Post a Comment

0 Comments