webpack 小记_html-js-css

写了很多的 js，有一天突然发现自己并不是很清楚 webpack 这个 *** 作原理，所以补上这么一篇记录点滴进步。
webpack帮助文档
webpack菜鸟教程

为什么要使用 webpack ？

核心问题，webpack 有什么用。应该有很多小伙伴写过 js 代码，但是写到那些比较大的页面的时候，就会发生很多的重复，并且产生复用，这种方式叫做面向过程的编码，不适合大型项目，难以维护。

// index.js
const element = document.createElement('h2');
element.textContent = 'Hello word';
element.addEventListener('click', () => {
})

所以会转成面向对象的编码，即把原来的 js 封装到一个有 function 的类中，在引入到相关 html 的页面中，但是这时，又出现了一个问题。

// helloword.js
function HelloWord() {
    const element = document.createElement('h2');
    element.textContent = 'Hello word';
    element.addEventListener('click', () => {
    })
}

export default HelloWord;

// index.js
new HelloWord();

随着封装 js 对象的增加，在 index.html 中引用