标签：
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.
[Javascript] Introduce to Webpack
标签：
原文地址：http://www.cnblogs.com/Answer1215/p/4310082.html
