前端项目自动化构建工具——Webpack入门教程

  参考资料: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' }

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zydpfs.html