webpack学习入门(4个核心概念)
来源:互联网 发布:dwg文件查看器for mac 编辑:程序博客网 时间:2024/06/01 20:32
以下学习内容来自webpack官方文档 .
还是我自己的习惯,在学习使用某个工具之前,先搞清楚它的核心概念和是什么原理来工作的,这对我很重要。那么,就开始吧 ~
Concepts
webpack是什么?
At its core, webpack is a module bundler for modern JavaScript applications. When webpack processes your application, it recursively builds a dependency graph that includes every module your application needs, then packages all of those modules into one or more bundles.
- - https://webpack.js.org/concepts/
简单的说。webpack的核心就是将JS应用程序打包成模块。当webpack处理我们的程序的时候,会递归的构建一个依赖图,其中包含了应用程序所需的各个模块。然后这些模块会被打包到一个或多个的包。
工作原理图
大概了解了webpack是做什么的之后,我们所需要了解的就是以下四个概念:
- Entry
- Output
- Loaders
- Plugins
一.Entry
Entry指示webpack应该从哪个模块开始构建其内部依赖关系图。webpack会找出Entry所依赖的其它模块和库(直接依赖或间接依赖)。每个依赖都会被处理和输出到bundles中。我们可以通过在webpack配置中配置Entry属性来指定一个或多个Entry点。
entry configuration的简单例子:
module.exports = { entry: './path/to/my/entry/file.js`},
webpack.config.js
更多Entry配置的内容
二.Output
Output属性通过out.filename和output.path告诉webpack怎么命名打包好的bundles还有将它们发送到哪儿。
可以在配置文件中通过配置Output来处理此过程。例如:
const path = require('path');module.exports = { entry: './path/to/my/entry/file.js, output: { path: path.resolve(__dirname, 'dust'), filename: 'my-first-webpack.bundle.js' }};
webpack.config.js
output configurable features && read more in the conpets section
三.Loaders
ps:这里不翻译了,还是看英文的更有滋味。
Essentially, webpack loaders transform all types of files into modules that can be included in your application’s dependency graph.
At a high level, loaders have two purposes in your webpack config. They work to:
1. Identify which file or files should be transformed by a certain loader (with the test property).
2. Transform those files so that they can be added to your dependency graph (and eventually your bundle). (use property)
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' } ] }};module.exports = config;
上面的rules的test和use做了下面这些事情:
“Hey webpack compiler, when you come across a path that resolves to a ‘.txt’ file inside of a require()/import statement, use the raw-loader to transform it before you add it to the bundle.”
learn more!
四.Plugins
Plugins 相比 Loaders 可以做更多的任务(捆绑优化和缩小到定义类似环境的变量)
使用Plugins我们需要require()并且把它添加到Plugins数组中。大部分Plugins可以自定义操作,而且我们可以在配置中多次使用Plugins达到不同的目的。因为我们需要new来创建Plugins的实例:
// installed via npmconst HtmlWebpackPlugin = require('html-webpack-plugin'); // to access built-in pluginsconst webpack = require('webpack');const path = require('path');const config = { entry: './path/to/my/entry/file.js', output: { path: path.resolve(__dirname, 'dust'), filename: 'my-first-webpack.bundle.js' }, module: { rules: [ { test: /\.txt$/, use: 'raw-loader' } ] }, plugins: [ new web pack.optimize.UglifyJsPlugin(), new HtmlWebpackPlugin({template: './src/index.html'}) ]};module.exports = config;
参考: list of plugins
总结:了解了上述四个核心概念后,对webpack的工作原理还有如何配置已经有了大致的认识。我相信以后用起来也会更加得心应手,不会像以前总说用webpack打包但是都不知道它对工程做了什么这种夸张的问题。期待下面更深入的学习 ~!!
- webpack学习入门(4个核心概念)
- Webpack之核心概念学习笔记(1)
- webpack核心概念介绍
- webpack核心概念
- webpack入门学习(—)
- webpack入门学习4-browser(浏览器自动运行)
- Spark入门(一):核心概念简介
- webpack--概念4--loader
- vue2.0学习入门(webpack)
- 入门学习webpack打包工具(一)
- webpack入门学习笔记
- webpack入门学习1
- webpack入门学习2
- Webpack入门学习笔记
- Maven学习总结(4)——Maven核心概念
- Maven学习总结(4)——Maven核心概念
- spring学习(一)________核心概念
- Ember学习(1):Ember核心概念
- 通过tmux远程
- Nginx负载均衡概览
- 0x757da832 处有未经处理的异常: Microsoft C++ 异常: 内存位置 0x0052f888 处的 cv::Exception。
- Linux wget详解
- Redis学习笔记之十二:Redis复制(数据同步)
- webpack学习入门(4个核心概念)
- Coursera-Deep Learning Specialization 课程之(四):Convolutional Neural Networks: -weak1编程作业
- Linux基础练习题(9)
- 免费解决Android studio 3.0更新后搜狗输入法卡顿问题
- Java
- java代码链接数据库出现乱码的解决方法
- sdcard含义
- activemq和jms是种什么关系
- Shell简单编程实例