webpack核心概念

一、webpack四个核心概念


1、入口【Entry】

webpack将创建所有应用程序 依赖关系图表。图表的起点被称之为 入口起点。入口起点告诉webpack从哪里开始,并遵循着依赖关系图表知道打包什么。可以将您的应用入口起点认为是跟上下文或app的第一个启动文件。

const config = {
  entry: {
    app: ‘./src/app.js‘
  }
}

module.exports = config;
2、出口【Output】

将所有资源打包在一起,仍然告诉webpack在哪里打包我们的应用,即将打包资源输出到什么地方。

const config = {
  entry: {
    app: ‘./src/app.js‘
  },
  output: {
    filename: ‘webpack.bundle.js‘,
    path: ‘./dist‘
  }
}

module.exports = config;
3、加载器【Loader】

webpack的目标是,让项目中的所有资源都成为webpack的关注点,而浏览器不需要考虑这些(这并不意味着资源都必须打包在一起)。webpack把每个文件(.css, .html, .scss, .jpg, .etc)都作为模块处理。然而webpack只了解JavaScript,所有需要加载器来处理其它类型的文件。
因为文件已被添加到了依赖图表,所有webpack加载器会将这些文件转换为模块。
loader属性要实现的两个目标:
(1)识别出应该被特定的加载器转换的文件;
(2)转换能够被添加到依赖图表的文件(并且最终打包)

const config = {
  entry: {
    app: ‘./src/app.js‘
  },
  output: {
    filename: ‘webpack.bundle.js‘,
    path: ‘./dist‘
  },
  module: {
    loaders: [
      {
        test: /\.(js|jsx)$/,
        loader: ‘babel-loader‘
      },
      {
        test: /\.css$/,
        loaders: [‘style‘, ‘css‘]
      }
    ]
  }
}

module.exports = config;

loader的两个必选属性test和loader告诉了webpack如下行为:webpack编译器,当你碰到在require()/import语句中被解析为.js.jsx的路径时,在你把它们添加并打包之前,要先使用babel-loader去转换。同理,css也是这个样子,只不过使用的loader模块不同。

4、插件【Plugins]

加载器仅基于单个文件执行转换,插件最常用于(但不限于)在打包模块的“编译”和“组块”时执行操作和自定义功能。webpack的插件系统极其强大和可定制。
为了使用插件,需要require它们,并且把它们添加到plugins数组。多数插件可以通过potion来自定义。由于你可以在一个配置多次使用插件用于不同的目的,因此你需要使用new来创建插件的实例,并且调用插件。

const HtmlWebpackPlugin = require(‘html-webpack-plugin‘);
const htmlWP = new HtmlWebpackPlugin({template: ‘./src/index.html‘});
const config = {
  entry: {
    app: ‘./src/app.js‘
  },
  output: {
    filename: ‘webpack.bundle.js‘,
    path: ‘./dist‘
  },
  module: {
    loaders: [
      {
        test: /\.(js|jsx)$/,
        loader: ‘babel-loader‘
      },
      {
        test: /\.css$/,
        loaders: [‘style‘, ‘css‘]
      }
    ]
  },
  plugins: [
    htmlWP
  ]
}

module.exports = config;

二、webpack解析三种文件路径

(1)绝对路径
(2)相对路径
(3)模块路径

时间: 2024-10-29 20:39:58

webpack核心概念的相关文章

webpack安装与核心概念

安装webpack webpack核心概念:入口.输出.加载器.插件.模块.模式 一.安装webpack 1.安装webpack之前需要安装nodejs环境,在使用nodejs环境自带的包管理工具npm进行下载,由于网络环境问题,建议安装先安装淘宝的镜像cnpm来实现下载. npm install webpack -g 由于webpack从3版本升级到4版本,拆分了命令行接口webpack-cli,所以这时候你直接使用webpack会报错,还需要下载安装一个webpack-cli,再使用webp

玩转webpack 全方位掌握webpack核心技能和优化策略

第一章:wepack与构建发展简史 (9讲)01 | 课程介绍02 | 内容综述03 | 为什么需要构建工具04 | 前端构建演变之路05 | 为什么选择webpack06 | 初识webpack07 | 环境搭建:安装webpack08 | webpack初体验:一个最简单的例子09 | 通过npm script运行webpack 第二章:webpack基础用法 (12讲)10 | webpack核心概念之entry用法11 | webpack核心概念之output12 | webpack核心

Hadoop hdfs&mapreduce核心概念

1.HDFS(分布式文件系统体系) 1.1.NameNode:(名称节点) Hdfs的守护程序 记录文件是如何分割成数据块的,以及这些数据块被存储到了哪些节点上 对内存和I/O进行集中管理 是个单点,发生故障将使集群崩溃 1.2.SecondaryNamenode(辅助名称节点):发生故障进行人工的设置才能实现集群崩溃的问题 监控HDFS状态的辅助后台程序 每个集群都有一个 与NameNode进行通讯,定期保存HDFS元数据快照 与NameNode故障可以作为备用NameNode使用 1.3.D

CSS的四个核心概念

CSS(Cascading Style Sheet)层叠样式表,又称级联样式表,是一组格式设置规则,用来进行网页风格设计.通过使用CSS样式设置页面的格式,可将页面的内容与表现形式分离.页面内容存放在HTML文档中,而用于定义表现形式的CSS规则则存放在另一个文件中或HTML文档的某一部分,通常为文件头部分.将内容与表现形式分离,不仅可使维护站点的外观更加容易,而且还可以使HTML文档代码更加简练,缩短浏览器的加载时间. CSS的核心概念有四个:标准流.盒模型.position.float,它们

Maven的几个核心概念

POM (Project Object Model) 一个项目所有的配置都放置在 POM 文件中:定义项目的类型.名字,管理依赖关系,定制插件的行为等等.比如说,你可以配置 compiler 插件让它使用 java 1.5 来编译. 示例的 POM: <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  

C#面向对象的核心概念

一.面向对象的核心概念 (一)抽象--面向对象的根基 讲到抽象,不得不涉及到现代科学技术的基础--数学. 数学是一门抽象的科学,面对着纷繁复杂的世间万物,数学不理会各种事物的独特特性,而只抽取它们在数量上的特性,深刻揭示了"世间万物"在数量上表现出的共同规律,抽象正是数学的本质特征. 数学的一个分支--离散数学是计算机科学的根基之一,因此,计算机科学从诞生之日起,就与数学有着密不可分的联系,抽象思维也是计算机科学的主要思维方法之一. 在使用面向对象的方法设计一个软件系统时,首先就要区分

Angularjs的核心概念

1. 客户端模板 多页面的应用通过组装和拼接服务器上的数据来生成HTML,然后输出到浏览器.Angularjs不同于此的是,传递模板和数据到浏览器,然后在浏览器端进行组装.浏览器的角色编程了只提供模板的静态资源和模板所需要的数据. <html ng-app> <head> <script src="angular.js"></script> <script src="controllers.js"><

面向对象的核心概念

1.面向对象的核心概念 从理论上说,面向对象技术拥有四大基本特性. (1)封装 这是一种隐藏信息的特征.封装这一特性不仅大大提高了代码的易用性,而且还使得类的开发者可以方便的更换新的算法,这种变化不会影响使用类的外部代码.可以用以下公式展示类的封装特性: 封装的类=数据+对此数据所进行的操作(即算法) 通俗的说,封装就是:包起外界不必需要知道的东西,只向外界展露可供展示的东西. 在面向对象理论中,封装这个概念拥有更为宽广的含义.小到一个简单的数据结构,大到一个完整的软件子系统,静态的如某软件系统

理解maven的核心概念

原文链接:http://www.cnblogs.com/holbrook/archive/2012/12/24/2830519.html 好久没进行java方面的开发了,最近又完成了一个java相关的任务,顺便重新体会了 maven 这一利器. 在使用过程中发现以前对maven的理解不够深入,借此机会重新梳理了一下maven的核心概念.相信理解了这些核心概念, 即使长时间不使用,以后再重新上手也会非常容易. 本文以类图的方式,介绍maven核心的12个概念以及相互之间的关系. Table of