[Javascript] Introduce to Webpack

浏览数：37 / 时间：2015年06月08日

To use webpack, first you need to run:

npm install webpack

 

2. Create a webpack.config.js file:

module.exports = {
    entry: ‘./index.js‘,
    output: {
        filename: ‘bundle.js‘,
        path: __dirname
    }
};

 

3. Using Command.js style to exports files, for example:

//alert-button.js

var _ = require(‘lodash‘);
module.exports = {
  setupButtons: function() {
    var alertButtons = document.querySelectorAll(‘[data-alert]‘);
    _.each(alertButtons, function(button) {
      button.addEventListener(‘click‘, function() {
        alert(button.innerText);
      });
    });
  }
};

Here, we use lodash in the file, therefore, we need to require lodash into the file.

 

//index.js

‘use strict‘;
var AlertButtons = require(‘./alert-buttons‘);
var LameDomBinding = require(‘./lame-dom-binding‘);

document.addEventListener(‘DOMContentLoaded‘, function() {
  AlertButtons.setupButtons();
  LameDomBinding.bindEls(document.getElementById(‘textarea1‘), document.getElementById(‘textarea2‘));
});

index.js file use alert-button.js and lamedombinding.js, therefore, we also need to require those two fiels.

 

//lamedombinding.js

module.exports = {
  bindEls: function(el1, el2) {
    el1.addEventListener(‘keyup‘, function() {
      el2.value = el1.value;
    });
    el2.addEventListener(‘keyup‘, function() {
      el1.value = el2.value;
    });
  }
};

 

4. Our aim at replace all the javascript included files with only one file: bundle.js:

we run:

webpack --watch

The bundle.js file will be created, then we can include only bundle.js into the html file.

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： 编程语言 Java C C# Javascript js Python Ruby Spring 程序 VB

相关文章

随机文章

您可能还喜欢

您可能还喜欢