webpack 四个核心概念
在了解 webpack 使用配置时,我们必须首先要熟悉下面四个核心概念:
- entry:入口
- output:出口
- loaders:加载器
- plugins:插件
一、entry:入口
在 webpack 执行处理应用程序时,会形成一个依赖关系图表。在这个图表的起点就是入口起点(entry point),进入这个入口后,webpack 就可以计算出入口点依赖的模块和库。
如何在 webpack.config.js 中配置入口点呢?
单个入口语法
用法: entry: string |Array<sting>
// webpack.config.js
const config = {
entry: './path/to/my/entry/file.js'
}; module.exports = config;
单个入口简写:
// webpack.config.js
const config = {
entry: {
main: './path/to/my/entry/file.js'
}
};
当你想要注入多个依赖文件时,可以向 entry 属性传入一个数组,数组是由文件路径组成。这样可以快速地设置 webpack 的配置,创建“多个主入口(multi-main entry)”,但这种方法不利于配置的扩展。
对象语法
用法:entry: {[entryChunkName: string]: string|Array<string>}
// webpack.config.js
const config = {
entry: {
app: './src/app.js',
vendors: './src/vendors.js'
}
}
对象语法虽然繁琐,但是它是应用程序入口最可扩展的方式。
**“可扩展的 webpack 配置”是指,可重用并且可以与其他配置组合使用。用于将关注点从环境、构建目标、运行时中分离。然后使用专门的工具(如 webpack-merge)将它们合并。
常用场景
1、分离应用程序和第三方库入口
// webpack.config.js
const config = {
entry: {
app: './src/app.js',
vendors: './src/vendors.js'
}
};
webpack 创建的依赖图是彼此完全分离、相互独立的,上述写法比较适用于单页面应用程序。
执行 webpack 时,会使用 commonChunkPlugin 从 bundle 文件中提取 vendor 引用到 vendor bundle,并把引用 vendor 的部分替换为 webpack_require() 调用。
2、多页面应用程序
// webpack.config.js
const config = {
entry: {
pageOne: './src/pageOne/index.js',
pageTwo: './src/pageTwo/index.js',
pageThree: './src/pageThree/index.js'
}
}
webpack 在多页面应用中,会使用 commonChunkPlugin 为每个页面应用创建 bundle 文件,在入口起点中时每个页面都能对代码和模块实现复用。
二、output:输出
这是属性的作用是:控制 webpack 如何向硬盘写入编译文件。需要注意的是,即使是存在多个入口起点,也只指定一个输出配置。
1、用法
在 output 属性中需要配置 filename 和 path 两个配置项:
- filename:输出文件的文件名
- path:目标输出的目录,是一个绝对路径
// webpack.config.js
const config = {
output: {
filename: 'bundle.js',
path: '/home/proj/public/assets'
}
}; module.exports = config;
此配置将一个单独的 bundle.js 文件输出到 /home/proj/public/assets 目录中。
2、多个入口起点
如果配置中存在多个入口起点,则需要使用一定的标识符确保每个输出的文件名的唯一性。
// webpack.config.js
{
entry: {
app: './src/app.js',
search: './src/search.js'
},
output: {
filename: '[name].js',
path: __dirname + '/dist'
}
} // 写入到硬盘:./dist/app.js, ./dist/search.js
为了确保每个输出 bundle 名称的唯一性,需要借用一下方式来替换:
// 1、使用入口名称
filename: "[name].bundle.js" // 2、使用内部 chunk id
filename: "[id].bundle.js" // 3、使用每次构建生成的唯一的 hash
filename: "[name].[hasn].bundle.js" // 4、使用基于每个 chunk 内容的 hash
filename:“[chunkhash].bundle.js”
三、loader:加载器
loader 是用于对模块的源代码进行转换。在需要加载模块时对其做预处理,它可以将文件从不同的语言(如 typescript)转换为 JavaScript,或将内联图像转为 data URL,甚至允许你直接在 JavaScript 模块中 import CSS文件。
1、使用 loader 的三种方式
- 配置(推荐):在 webpack.config.js 文件中指定 loader
- 内联: 在每个 import 语句中显示指定 loader
- CLI: 在 shell 命令中指定它们
配置:
在 modul.rules 中允许你在 webpack 配置中指定多个loader。
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader',
options: {
modules: true
}
}
]
}
]
}
内联
import Styles from 'style-loader!css-loader?modules!./styles.css';
使用 ! 将资源中的 loader 分开,分开的每部分都相对于当前目录解析。通过前置所有规则及使用 !,通过对选项传递查询参数,可以对应覆盖到配置中的任意 loader。
CLI
webpack --module-bind jade-loader --module-bind 'css=style-loader!css-loader'
上述是使用 webpack 命令,对 .jade 文件使用 jade-loader,对 .css 文件使用 style-loader 和 css-loader。
2、loader 所具有的特性
- loader 支持链式传递。能够对资源使用流水线(pipeline)。一组链式的 loader 将按照相反的顺序执行。loader 链中的第一个loader 返回值给下一个 loader。在最后一二 loader,返回 webpack 所预期的 JavaScript。
- loader 可以是同步的,也可以是异步的。
- 运行在node.js 中,并且能够执行任何可能的操作。
- 接收查询参数,用于对 loader 传递配置
- 可以使用 options 对象进行配置
- 除了使用package.json 常见的 main 属性,还可以将普通的 你怕吗 模块导出为 loader
- 插件可以为 loader 带来更多特性
- loader 能够产生而外的任意文件
四、plugins:插件
webpack 中的插件的出现,主要是为了实现 loader 无法实现的功能,是webpack 中核心部分。
webpack 插件是一个具有 apply 属性的 JavaScript 对象,apply 属性会被 webpack 编译器调用,并且编译器对象可以在整个编译生命周期访问。
用法
在 webpack 配置中,你可以携带参数或者选项,想 plugins 属性中传入 new 实例:
1、在配置中传入 new 实例
// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin'); //通过 npm 安装
const webpack = require('webpack'); //访问内置的插件
const path = require('path'); const config = {
entry: './path/to/my/entry/file.js',
output: {
filename: 'my-first-webpack.bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: 'babel-loader'
}
]
},
plugins: [
new webpack.optimize.UglifyJsPlugin(),
new HtmlWebpackPlugin({template: './src/index.html'})
]
}; module.exports = config;
2、Node API 传入 new 实例
webpack 四个核心概念的更多相关文章
- webpack的四个核心概念介绍
前言 webpack 是一个当下最流行的前端资源的模块打包器.当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后 ...
- 初识webpack——webpack四个基础概念
前面的话 webpack是当下最热门的前端资源模块化管理和打包工具.它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源.当webpack处理应用程序时,它会递归地构建一个依赖关系图表 ...
- webpack2版本四个核心概念
webpack 是一个现代的 JavaScript 应用程序的模块打包器(module bundler) 四个核心概念: --------------------------------------- ...
- (转)Maven学习总结(四)——Maven核心概念
孤傲苍狼只为成功找方法,不为失败找借口! Maven学习总结(四)——Maven核心概念 一.Maven坐标 1.1.什么是坐标? 在平面几何中坐标(x,y)可以标识平面中唯一的一点. 1.2.Mav ...
- 浅谈java中的四个核心概念--思途青岛
Java已经成为一个庞大而复杂的技术平台,对于开发人员而言,要想更好的掌握Java技术,深入理解底层的技术处理细节必不可少. 现在介绍下java的四个核心概念: 1.Java虚拟机 Java虚拟机的主 ...
- webpack安装与核心概念
安装webpack webpack核心概念:入口.输出.加载器.插件.模块.模式 一.安装webpack 1.安装webpack之前需要安装nodejs环境,在使用nodejs环境自带的包管理工具np ...
- webpack四个基础概念
本文参考自:https://www.cnblogs.com/xiaohuochai/p/7002344.html webpack 核心概念:入口(entry).输出(output).加载器(loade ...
- 学习 JavaScript (四)核心概念:操作符
JavaScript 的核心概念主要由语法.变量.数据类型.操作符.语句.函数组成,前面三个上一篇文章已经讲解完了.后面三个内容超级多,这篇文章主要讲解的是操作符. 操作符 什么叫做操作符? 这是一种 ...
- Maven学习总结(四)——Maven核心概念--转载
一.Maven坐标 1.1.什么是坐标? 在平面几何中坐标(x,y)可以标识平面中唯一的一点. 1.2.Maven坐标主要组成 groupId:组织标识(包名) artifactId:项目名称 ver ...
随机推荐
- python pymysql 连接 mysql数据库进行操作
1.数据库的连接操作 import pymysql conn = pymysql.connect(host=', db='oldboydb') # host表示ip地址,user表示用户名,passw ...
- java二进制工具
可以运用jdk工具监控java应用性能,再配合 jmeter 进行了一个长时间的加压,在加压过程中重点关注了系统资源的使用情况 D:\Program Files (x86)\Java\jdk1.8.0 ...
- 数据库开源框架之GreenDAO
主页: https://github.com/greenrobot/greenDAO 配置: 添加以下依赖 * compile 'de.greenrobot:greendao:2.1.0' * com ...
- oracle imp 工具可能出现的问题
- Tomcat 8.5 配置 域名绑定
1.修改Tomcat的Server.xml两处地方即可: a) b)
- php中应用redis
下载软件包wget https://codeload.github.com/phpredis/phpredis/zip/develop mv develop phpredis.zip 解压unzip ...
- flask 学习(二)
安装了flask扩展 以及flask-bootstrap 默认情况下,flask在template文件夹寻找模板. flask 加载的是Jinja2模板,该模板引擎在flask中由函数render_t ...
- IDEA2019.2个人使用方案
参考文档 https://segmentfault.com/a/1190000019813993?utm_source=tag-newest
- split 使用
split作用:把字符串变成列表,这个字符串必须是多行文字.如果是单行文字或一个单词是不行的,实例操作如下: In [46]: output=subprocess.check_output(['df' ...
- 基于.net 4.0框架的Cipher演示程序
using System.Text; namespace Cipher.Algorithm { static class Caesar { static public string Encrypt(s ...