webpack 简介

Posted 2020-09-11

1.webpack 可以做什么

webpack 可以看做是一个模块打包机， 它可以将你的项目结构中的一些浏览器不能直接运行的拓展语言（Typescript，scss等），将其打包并编译成浏览器可以运行的格式。

一切都为模块

就require.js，来说 ， 它的模块化是将js模块化 ， 而 webpack 将图片， 样式， js 都模块化处理 ，也就是说你可以像在require.js中引入模块一样 ， 引入图片，样式模块，并且它还支持 AMD/CMD和CommonJs 规范，让不管你是喜欢像require.js的格式，还是commonJs格式来写都是一样的， 如果你想使用ES6的语法 ， 只需要在webpack的配置里面加上编译es6语法的loader就可以了 ， 它会自动将你的es6语法编译成es5的格式，当然并不会兼容IE9以下的浏览器。

资源预处理

在 webpack 中， 你不需要处理你的静态资源， 你只需要把这些资源包含进来， 然后打包你所有的模块， 然后在另一个页面里引用就可以了， 所有的资源都会用你配置好的 loader 预加载处理好。比如：合并雪碧图， scss编译，js的合并压缩等等。

2.为什么要使用 webpack

webpack 的优点：

1.忽略不用的静态资源。这对删减不必要的CSS尤其有用。Webpack只会将你的应用真正需要使用的资源放到dist目录中

2.便捷的代码分裂。例如，你知道你的文件Homepage.js只需要require几个特定的CSS样式，Webpack会根据你的需要创建一个homepage.css文件来减少文件体积。

3.你来控制静态资源被执行的方式。如果一个图片大小低于某个特定的值，你可以用base64来将它转码直接引入到你的javascript文件中，从而减少HTTP请求次数。如果一个JSON文件太大，那么你可以通过一个URL来加载它。你可以通过require(‘./style.less’)来将less文件自动转为纯CSS

4.稳定的生产环境。你不会将不用的图片或旧的CSS部署到服务器上。

5.当你熟练掌握了之后用起来会非常快。你可以热更新页面，管理正确地CSS，自动更新CDN缓存。Webpack可以自动更新文件名及相关内容。

就像上面说的那些， webpack 可以做到模块化， 资源处理这些事情， 它可以简化我们的工作， 提高工作效率， 让我们只关心页面逻辑， 而不用去理会资源的优化，压缩等等问题，这些 webpack 都可以帮我们做到,但是也并不是所有的项目我们都需要使用到 webpack。

比如一个项目它可能只有一个页面，一个js，这样简单的需求， 我们再去使用 webpack 就会显得很庞大，只有那些包含大量css、图片等静态资源的应用，webpack 才会对我们产生帮助。

3.学习webpack

webpack2 的文档相比 1 来说要好很多了，讲的基本上都可以。https://webpack.js.org/concepts/