个人中心
文章发布
退出
作者热门文章
- ubuntu12.04环境下使用kvm ioctl接口实现最简单的虚拟机
- Ubuntu 通过无线网络安装Ubuntu Server启动系统后连接无线网络的方法
- 在Ubuntu上搭建网桥的方法
- ubuntu 虚拟机上网方式及相关配置详解
25
4
CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.
这篇CFSDN的博客文章Webpack基础教程之名词解释由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.
。
本质上，webpack 是一个现代JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle.
它是高度可配置的，但是，在开始前你需要先理解四个核心概念:
入口(entry) 。
输出(output) 。
loader 。
插件(plugins) 。
。
指定webpack从哪个模块开始构建项目，通过一下配置指定一个入口起点(或多个入口起点)，被处理到称之为 bundles 的文件中:
|
1
2
3
4
|
// webpack.config.js
module.exports = {
entry:
'./path/to/my/entry/file.js'
}
|
2、出口(output) 。
处理打包生成的 bundles 文件，如指定输出文件位置，文件名等.
|
1
2
3
4
5
6
7
8
|
// webpack.config.js
module.exports = {
entry:
'./path/to/my/entry/file.js'
,
output: {
path: path.resolve(__dirname,
'dist'
),
filename:
'test_name.bunlde.js'
}
}
|
3、loader 。
loader 作用是将所有文件类型转换成webpack能处理的有效模块，然后就可以通过webpack将文件打包.
本质上，webpack loader将所有类型文件转换成应用程序的依赖图可以直接引用的模块.
特殊: 只有webpack支持 import 导入任何类型模块，如 .css,.vue 等文件.
webpack 配置 loader的两个目标:
1.识别需要对应 loader 处理的文件。(使用test属性) 。
2.转换文件使其能够添加到依赖图并最终添加到 bunlde 中。(使用use属性) 。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
// webpack.config.js
const path = require(
'path'
);
const config = {
entry:
'./path/to/my/entry/file.js'
,
output: {
path: path.resolve(__dirname,
'dist'
),
filename:
'my-first-webpack.bundle.js'
},
module: {
rules: [
{ test: /\.txt$/, use:
'raw-loader'
}
// test/use 两个属性是必须的
]
}
}
module.exports = config;
|
4、插件(plugins) 。
使用插件可以执行范围更广的任务。通过 require() 引用后添加在 plugins 数组中.
另外如果需要多次使用同一个插件，则使用 new 操作符来创建它的一个实例.
安装html-webpack-plugin:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
npm install html-webpack-plugin --save-dev
// webpack.config.js
const HtmlWebpackPlugin = require(
'html-webpack-plugin'
);
const webpack = require(
'webpack'
);
// 用于访问内置插件
const path = require(
'path'
);
const config = {
entry:
'./path/to/my/entry/file.js'
,
output: {
path: path.resolve(__dirname,
'dist'
),
filename:
'my-first-webpack.bundle.js'
},
module: {
rules: [
{ test: /\.txt$/, use:
'raw-loader'
}
]
},
plugins: [
new
webpack.optimize.UglifyJsPlugin(),
new
HtmlWebpackPlugin({template:
'./src/index.html'
})
]
};
module.exports = config;
|
2、入口起点(Entry Points) 。
webpack的 entry 属性不仅可以配置单个入口，还可以配置多个入口:
。
用法：entry: string|Array<string> 。
简单使用 :
|
1
2
3
4
|
const config = {
entry:
'./path/to/my/entry/file.js'
};
module.exports = config;
|
entry 属性的单个入口配置方式:
|
1
2
3
4
5
|
const config = {
entry:{
main:
'./path/to/my/entry/file.js'
}
}
|
若向 entry 传入 [文件路径(file path)数组]，将创建 多个主入口，常常用在需要同时注入多个文件，并将它们的依赖导向(graph)到一个chunk时.
。
对象语法 。
用法：entry: {[entryChunkName: string]: string|Array<string>} 。
|
1
2
3
4
5
6
7
8
|
// webpack.config.js
webpack.config.js
const config = {
entry: {
app:
'./src/app.js'
,
vendors:
'./src/vendors.js'
}
};
|
虽然语法繁琐，但这是应用程序中定义入口的最可扩展的方式.
“可扩展的 webpack 配置”是指，可重用并且可以与其他配置组合使用。这是一种流行的技术，用于将关注点(concern)从环境(environment)、构建目标(build target)、运行时(runtime)中分离。然后使用专门的工具（如 webpack-merge）将它们合并.
常见场景 。
列出一些常见的入口配置和实际案例:
(1)分离 应用程序(app) 和 第三方库(vendor) 入口 。
|
1
2
3
4
5
6
7
|
// webpack.config.js
const config = {
entry: {
app:
'./src/app.js'
,
vendors:
'./src/vendors.js'
}
};
|
webpack 从 app.js 和 vendors.js 开始构建，并且他们是完全分离互相独立，为了支持提供更佳 vendor 分离能力的 DllPlugin，考虑移除该场景.
(2)多页面应用程序 。
|
1
2
3
4
5
6
7
8
|
// webpack.config.js
const config = {
entry: {
pageOne:
'./src/pageOne/index.js'
,
pageTwo:
'./src/pageTwo/index.js'
,
pageThree:
'./src/pageThree/index.js'
}
};
|
这样告诉 webpack 需要 3 个独立分离的依赖图， 。
使用 CommonsChunkPlugin 为每个页面间的应用程序共享代码创建 bundle.
由于入口起点增多，多页应用能够复用入口起点之间的大量代码/模块，从而可以极大地从这些技术中受益.
更多关于Webpack基础教程请点击下面的相关文章 。
原文链接：http://pingan8787.com/2018/01/31/41-%E3%80%90Webpack%E3%80%91%E5%85%A5%E9%97%A8%E6%95%99%E7%A8%8B%E6%95%B4%E7%90%86%EF%BC%88%E6%95%B4%E7%90%86%E4%B8%AD%EF%BC%89/ 。
最后此篇关于Webpack基础教程之名词解释的文章就讲到这里了,如果你想了解更多关于Webpack基础教程之名词解释的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。
25
4
0
是否可以使用 R 包 openNLP 提取 noun+noun 或 (adj|noun)+noun？也就是说，我想使用语言过滤来提取候选名词短语。你能指导我该怎么做吗？非常感谢。 感谢您的回复。这是代
我正在寻找一个免费的(可下载的)名词词典来用作实际的单词生成器 - 与验证码相似但不同。 有人知道这样的东西是否可用吗？ 谢谢， 凯尔 最佳答案 Kevin's Word List Page包括词性数
通常单词列表是 1 个包含所有内容的文件，但是是否有可单独下载的名词列表、动词列表、形容词列表等？ 我特别需要它们来学习英语。 最佳答案 如果您仅从 wordnet.princeton.edu/dow
我正在使用 Rails 4，我遇到了 this cool gist前几天。 无论如何，我如何使用 Rails 做一些类似的事情，我可以从两个数组中随机选择以生成一个有点独特的名称？ 我知道有用于此的
我想要一个 python 库函数，它可以跨不同的词性进行翻译/转换。有时它应该输出多个单词(例如“coder”和“code”都是动词“to code”的名词，一个是主语，另一个是宾语) # :: St
根据 this guide在设计 REST API 端点时，我们不应该在 URL 中使用 Action /动词(例如 /addNewEmployee)，如果我们想执行一个 Action ，我们应该只使
根据 this guide在设计 REST API 端点时，我们不应该在 URL 中使用 Action /动词(例如 /addNewEmployee)，如果我们想执行一个 Action ，我们应该只使
我有一个用 @Path 注释的类，如下所示: @Path("widgets") @Produces(MediaType.APPLICATION_XML) public class WidgetReso
我是一名优秀的程序员,十分优秀！