01、概念股

本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。
当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependencygraph),
其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。

一、核心概念

  • 入口(entry)
  • 输出(output)
  • loader
  • 插件(plugins)
  • 模式
1.1入口【entry】
入口起点(entry point)指示webpack应该使用哪个模块,来作为构建其内部依赖图的开始。
进入入口起点后,webpack 会找出有哪些模块和库是入口起点(直接和间接)依赖的。 每个依赖项随即被处理,最后输出到称之为 bundles 的文件中

entry 配置的简单例子 webpack.config.js

module.exports = {
entry: `./path/to/my/entry/file.js`
};
1.2出口【output】
output 属性告诉 webpack 在哪里输出它所创建的 bundles,
以及如何命名这些文件,默认值为./dist。
基本上,整个应用程序结构,都会被编译到你指定的输出路径的文件夹中。
你可以通过在配置中指定一个 output 字段,来配置这些处理过程:

webpack.config.js

const path = require('path');

module.exports = {
entry: './path/to/my/entry/file.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js'
}
}; 在上面的示例中,我们通过 output.filename 和 output.path 属性,
来告诉 webpack bundle 的名称,以及我们想要 bundle 生成(emit)到哪里
1.3 loader
loader 让 webpack 能够去处理那些非 JavaScript 文件(webpack 自身只理解JavaScript)。
loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块,然后你就可以利用 webpack 的打包能力,对它们进行处理。 本质上,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;

以上配置中,对一个单独的 module 对象定义了 rules 属性,里面包含两个必须属性:test 和 use。这告诉 webpack 编译器(compiler) 如下信息:

“嘿,webpack 编译器,当你碰到「在 require()/import 语句中被解析为 '.txt' 的路径」时,在你对它打包之前,先使用 raw-loader 转换一下。”

重要的是要记得在 webpack 配置中定义 loader 时,要定义在 module.rules 中,而不是 rules

1.4 插件[plugins]

插件的范围包括,从打包优化和压缩,一直到重新定义环境中的变量

想要使用一个插件,你只需要 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;
1.5 模式

通过选择 development 或 production 之中的一个,来设置 mode 参数,你可以启用相应模式下的 webpack 内置的优化

module.exports = {
mode: 'production'
};

实战webpack系列说明的更多相关文章

  1. 实战webpack系列04

    04. 一切皆模块 Webpack有一个不可不说的优点,它把所有的文件都都当做模块处理,JavaScript代码,CSS和fonts以及图片等等通过合适的loader都可以被处理. 一.CSS 继续上 ...

  2. 实战webpack系列03

    03.Webpack的强大功能 一.生成Source Maps(使调试更容易) 通过简单的配置,webpack就可以在打包时为我们生成的source maps,这为我们提供了一种对应编译文件和源文件的 ...

  3. 实战webpack系列02

    02. 开始使用webpack 1.1.安装 Webpack可以使用npm安装,新建一个空的练习文件夹(此处命名为webpack sample project),在终端中转到该文件夹后执行下述指令就可 ...

  4. 实战webpack系列01

    01. 采坑webpack 一.webpack初章 // 一个常见的`webpack`配置文件 const webpack = require('webpack'); const HtmlWebpac ...

  5. Vue实战Vue-cli项目构建(Vue+webpack系列之一)

    用Vue比较长一段时间了,大大小小做了一些项目,最近想总结一下知识点,出一个Vue+webpack系列,先从项目构建说起--vue-cli. 由于是Vue+webpack这里就不赘述git那些东西,默 ...

  6. 全网最贴心webpack系列教程和配套代码

    webpack-demos:全网最贴心 webpack 系列教程和配套代码 欢迎关注个人技术博客:godbmw.com.每周 1 篇原创技术分享!开源教程(webpack.设计模式).面试刷题(偏前端 ...

  7. 【WEB API项目实战干货系列】- 导航篇(十足干货分享)

    在今天移动互联网的时代,作为攻城师的我们,谁不想着只写一套API就可以让我们的Web, Android APP, IOS APP, iPad APP, Hybired APP, H5 Web共用共同的 ...

  8. 【WEB API项目实战干货系列】- API登录与身份验证(三)

    上一篇: [WEB API项目实战干货系列]- 接口文档与在线测试(二) 这篇我们主要来介绍我们如何在API项目中完成API的登录及身份认证. 所以这篇会分为两部分, 登录API, API身份验证. ...

  9. 【WEB API项目实战干货系列】- 接口文档与在线测试(二)

    上一篇: [WEB API项目实战干货系列]- Web API 2入门(一) 这一篇我们主要介绍如何做API帮助文档,给API的调用人员介绍各个 API的功能, 输入参数,输出参数, 以及在线测试 A ...

随机推荐

  1. js中const,var,let区别

    1.const定义的变量不可以修改,而且必须初始化(常量) const b = 5 // 正确 // const b // 错误,必须初始化 // b = 4 // 错误,不可被修改 console. ...

  2. 再整理:Visual Studio Code(vscode)下的通用C语言环境搭建

    版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://www.cnblogs.com/czlhxm/p/11794743.ht ...

  3. Mysql用户管理及权限分配

    早上到公司,在服务器上Mysql的数据库里新建了个database,然后本地的系统里用原来连接Mysql账号admin连这个数据库.结果报错了,大概是这样子的: Access denied for u ...

  4. Java基本数据类型的传值

    传递值: 说明:标题其实说法是错误的.Java中只有值传递,没有引用传递. ... ... //定义了一个改变参数值的函数 public static void changeValue(int x) ...

  5. 跳跳棋——二分+建模LCA

    题目描述 跳跳棋是在一条数轴上进行的.棋子只能摆在整点上.每个点不能摆超过一个棋子. 我们用跳跳棋来做一个简单的游戏:棋盘上有3颗棋子,分别在a,b,c这三个位置.我们要通过最少的跳动把他们的位置移动 ...

  6. [UWP]为番茄钟应用设计一个平平无奇的状态按钮

    1. 为什么需要设计一个状态按钮 OnePomodoro应用里有个按钮用来控制计时器的启动/停止,本来这应该是一个包含"已启动"和"已停止"两种状态的按钮,但我 ...

  7. 8.3 NOIP CE反思

    lsc考完以后就CE了,然后滚回去吃*去了! 这次考试都比的一批,整个先是打了暴力然后对拍发现桶有可能炸内存,然后就打了一个hash-map然后......T1 T3全使用了它,结果: 没什么可说的了 ...

  8. 深入理解计算机系统 第三章 程序的机器级表示 Part1 第二遍

    第一遍对应笔记链接 https://www.cnblogs.com/stone94/p/9905345.html 机器级代码 计算机系统使用了多种不同形式的抽象,利用更简单的抽象模型来隐藏实现的细节. ...

  9. c#Func委托

    public delegate TResult Func<in T, out TResult>(T arg); 参数类型 T:此委托方法的参数类型 TResult:此委托方法的返回值类型 ...

  10. ASP.NET Core 1.0: Deploy to IIS

    尽管ASP.NET最新的官方文档记录了如何Deploy to IIS,但是实际操作起来依旧磕磕绊绊.官方文档地址:https://docs.asp.net/en/latest/publishing/i ...