参考资料:https://www.webpackjs.com/(中文文档) https://www.webpackjs.com/(官方文档)
首先有必要说明一下,本文侧重讲解webpack基本配置属性,不附带实例,将会以通俗易懂的形式地讲解;如若需要实例进行相关练习,可将本文作为理论基础;
Webpack是前端项目自动化构建工具,本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。(官网定义)。
那么用我们人话来说:webpack是一个前端模块化的解决方案,更侧重点打包,可以把开发中的资源文件(图片、js文件、css文件等)看成是一个个的模块,然后通过webpack提供的loader(加载器)和plugins(插件)来进行处理、合并以及压缩,打包成符合生产环境、体积更小的文件资源,以方便提升浏览器的渲染速度;
首先我们要理解一下webpack的四大核心概念:
入口(entry)
出口(output)
loader(加载器)
plugins(插件)
入口(entry):
webpack入口指的是通过配置来指示webpack的入口文件,即从哪里开始,我们可以在webpack中配置entry属性,来指定入口文件的路径;
我们可以看一个简单的案例:
//必须将模块抛出webpack才能访问得到 module.exports = { //entry属性指定入口文件 值为相对路径 entry: './src/app.js' }