Webpack基本功能理解以及使用

KnewOne 发布于2019-08-26 10:09 / 1810人阅读

摘要：在这个过程中，会用到一些解析工具用来预处理一些模块以及拓展语言例如这些工具的配置使用都是在中完成的。属性，表示进行转换时，应该使用哪个。插件接口功能极其强大，可以用来处理各种各样的任务。

对于前端工程化，webpack一个神奇的工具，既然是个神奇的工具。那我们保留我们的好奇心，来聊一聊它，首先我们要搞清楚webpack到底是用来解决什么问题的，然后我们来看看它到底是怎么做的，最后来看看它的一些基本用法，下面就来侃一侃。

什么是webpack以及webpack的作用（解决什么问题）

如今web前端的业务功能越来越复杂，实现方式也越来越丰富，在web页面开发过程中我们通常会引用很多第三方模块以及一些拓展语言（stylus，Scss， JSX...）来简化开发难度，而这些第三方模块和一些拓展语言浏览器不能直接识别，所以要通过经过打包过程生成可以让浏览器识别的格式。

就像一幢居民楼，要建起这样一座居民楼，最基本的材料是砖、瓦、钢筋、混凝土。而要组合这些材料形成一幢建筑，肯定是有一定的方法流程以及工具的，比如第一步先搭建地基，后面用塔吊不断的在地基上叠加完善就形成了一幢建筑。在这个过程中，用到的方法流程以及工具起到的作用就类似于webpack。

进入正题，webpack其实就是一个JavaScript模块集成工具，同时具有压缩文件以及优化文件结构的作用。经过webpack打包生成的bundle包，可被浏览器识别解析。

在这个过程中，会用到一些loaders解析工具用来预处理一些模块以及拓展语言（例如：stylus、Scss...）,这些工具的配置使用都是在webpack中完成的。其中常用的loaders工具有：style-loader、 css-loader、 stylus-loader。

webpack实现原理（怎么做的）

原理的理解可以参照上图。
webpack的最核心的原理： 1、一切皆模块 2、按需加载。

一切皆模块 webpack会将源程序按照程序结构分割成一个个独立的小模块，当需要这些小模块时，进行组合重构，避免冗余，达到重复利用。

按需加载 传统的打包工具是将所有模块编译生成一个庞大的bundle.js文件，这样形成的打包文件体积过于庞大，而webpack通过异步加载可以实现按需加载，减小了打包后的体积。

webpack的使用方法（怎么用它）

在使用webpack之前首先要理解四个基本概念：

1. 入口(entry)

webpack要实现打包，首先我们得指定它的入口，指定入口后，webpack才会找出那些模块和库是入口起点（直接和间接）的依赖。
接下来我们来看一个最简单的entry的配置例子。

webpack.base.config.js

module.exports = {
  entry: "./src/main.js"
};

2. 出口(output)

出口即配置打包后的输出文件路径，以及如何命名这些文件，默认值为 ./dist。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。你可以通过在配置中指定一个 output 字段，来配置这些处理过程：

webpack.base.config.js

const path = require("path");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),  // 输出路径
    filename: "output.bundle.js"  // 输出文件名
  }
};

3. loader

loader能够将非JavaScript文件转化为webpack识别的JavaScript文件，比如讲图片转化为JavaScript可调用的格式，或者将一些扩展语言文件转化为浏览器可识别的文件格式。
本质上，webpack loader 将所有类型的文件，转换为应用程序的依赖图（和最终的 bundle）可以直接引用的模块。
在更高层面，在 webpack 的配置中 loader 有两个目标：

test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。

use 属性，表示进行转换时，应该使用哪个 loader。

webpack.config.js

const path = require("path");

const config = {
  output: {
    filename: "my-first-webpack.bundle.js"
  },
  module: {
    rules: [
      { test: /.txt$/, use: "raw-loader" }
    ]
  }
};

module.exports = config;

4. 插件(plugins)

loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。

想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建它的一个实例。

webpack.config.js

const HtmlWebpackPlugin = require("html-webpack-plugin"); // 通过 npm 安装
const webpack = require("webpack"); // 用于访问内置插件

const config = {
  module: {
    rules: [
      { test: /.txt$/, use: "raw-loader" }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: "./src/index.html"})
  ]
};

module.exports = config;

其他一些详细用法可以参考webpack官方文档。 参考： webpack中文文档

本文基于自己学习网络中的webpack整理的一份基本概念文档，是自己对于webpack使用的理解总结，如有问题，烦请评论指正，共同学习，共同进步。

私有云混合云 webpack使用亚马逊云服务器租用以及使用 webpack 使用公用cdn 基本功能

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105680.html

webpack的学习之路~~第一天

摘要：第节认识的作用学习的一原因现在的前端网页功能丰富，特别是单页应用技术流行后，的复杂度增加和需要一大堆依赖包，还需要解决，新增样式的扩展写法的编译工作。在出现后，还肩负起了优化项目的责任。其实就是获取了项目的绝对路径。第01节：认识WebPack的作用：学习的一原因：现在的前端网页功能丰富，特别是SPA（single page web application 单页应用）技术流行后，...

blankyao 2019-08-22 17:03 评论0 收藏0
webpack4.x升级摘要

摘要：以为例，编写来帮助我们完成重复的工作编译压缩我只要执行一下就可以检测到文件的变化，然后为你执行一系列的自动化操作，同样的操作也发生在这些的预处理器上。的使用是针对第三方类库使用各种模块化写法以及语法。 showImg(https://segmentfault.com/img/bVbtZYK); 一：前端工程化的发展很久以前，互联网行业有个职位叫做软件开发工程师在那个时代，大家可能...

levinit 2019-08-23 18:11 评论0 收藏0
工作流程以及webpack配置一些优化以及经验教训

摘要：今天顺便总结了下之前的一些经验，希望对大家的工作或者学习有一些帮助。老生常谈的啥的就不多说了，简单分享些插件和配置功能优化，方便大家更省力地写代码。另外，的正规操作常用于服务端项目的发布，增加了不少灵活性，一下子解放了运维大哥。前端工程化这些事情现在已经算是深入人心了，即便不清楚具体含义vue-cli creat-react-app之类的脚手架也帮助大家快速开发了不少项目。今天顺便...

Edison 2019-08-23 12:35 评论0 收藏0
JavaScript - 收藏集 - 掘金

摘要：插件开发前端掘金作者原文地址译者插件是为应用添加全局功能的一种强大而且简单的方式。提供了与使用掌控异步前端掘金教你使用在行代码内优雅的实现文件分片断点续传。 Vue.js 插件开发 - 前端 - 掘金作者：Joshua Bemenderfer原文地址: creating-custom-plugins译者：jeneser Vue.js插件是为应用添加全局功能的一种强大而且简单的方式。插....

izhuhaodev 2019-08-21 11:44 评论0 收藏0
前端学习路线

摘要：具体来说，包管理器就是可以通过命令行，帮助你把外部库和插件放到你的项目里面并在之后进行版本升级，这样就不用手工复制和更新库。现在有的包管理器主要是和。一、基础 1、学习HTML基础 HTML给你的网页赋予了结构。它就像是人的骨架那样让你保持站立。首先你需要去学习语法以及它必须提供的一切。你的学习应该聚焦在下面这些东西上：学习HTML基础，了解如何编写语义HTML 理解如何把网页分...

FullStackDeveloper 2019-08-22 16:48 评论0 收藏0