Webpack 到底怎么用？

Question

RT，我是前端小小白，如果提了很愚蠢的问题请见谅?。我的疑问是我从网上搜索到的 Webpack 的教程基本都是讲怎么配置 Webpack，就算有 Hello World 事例，也是通过 JS 操作 DOM 输出的。难道 HTML 的代码要用 JS 写？然后我感觉 Webpack 一个主要作用就是把多个 JS 甚至 CSS 文件打包成一个 JS 文件，目的是为了减少请求次数，我这样理解对吗？

Answer 1

1.webpack是一个自动构建的打包工具，一款模块加载器兼打包工具，它能把各种资源，JS、css（含less/sass）、图片等都作为模块来使用和处理。也有提供热刷新的插件，方便我们开发。下面是两个教程，可以学下！webpack教程。webpack入坑之旅
2.“难道 HTML 的代码要用 JS 写。”这个不是的，我们之前怎么写html，怎么写JS现在还是怎么写，只是现在大多是模块化开发而已。webpack就是把那些开发的模块打包。

Answer 2

就一些框架来说，比如说React，HTML其实就是用JS写的。打包成一个文件确实会减少请求次数，但是更重要是配合Webpack等工具使得前端可以更容易进行模块化开发，可以轻松的实现模块复用，配合一些插件可以实现各种语言的预处理和打包，比如scss转换为浏览器识别的css，jsx,typescript转换为浏览器识别的js等等

Answer 3

1楼给的两个链接写的很好，但是有点过时了，比如loader那一块的写法已经改了，所以建议你看官方文档吧

https://webpack.js.org/

英文看起来吃力的话可以选择中文，先过一遍，再细读几遍，跟着做，不难上手。

Answer 4

首先的了解webpack对于整个项目的意义，webpack看单词也明白是一种包装打包的工具，同时配合npm script 可以在项目中完成一整套工作流如start dev，build，release等操作

Answer 5

楼主应该是对模块化的JS概念不清晰。
以前写一个HTML页面，如果要引用javascript，css，会使用script,link标签，如果要引用很多js或者css，则会出现大量标签，难以调试管理维护。
因此出现了模块化的编程，就像C#用using，java用import一样，通过模块、命名空间对js以及相应的资源（如css,图片）进行管理。
这样代码就更清晰，可读性更高，更方便管理维护。

Answer 6

可以去看看中文文档和教程http://www.jqhtml.com/7626.html