webpack核心概念介绍
2016-12-26 19:09
387 查看
一、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)模块路径
相关文章推荐
- webpack的四个核心概念介绍
- Webpack基础之四个核心介绍
- 【Webpack 学习】2.四个核心概念及使用
- webpack的核心概念
- Webpack之核心概念学习笔记(1)
- webpack核心概念
- webpack学习入门(4个核心概念)
- Webpack框架核心概念(知识点整理)
- Maven介绍,包括作用、核心概念、用法、常用命令、扩展及配置
- Web服务请求异步化介绍(概念篇)
- Maven介绍,包括作用、核心概念、用法、常用命令、扩展及配置
- Maven介绍,包括作用、核心概念、用法、常用命令、扩展及配置
- Maven介绍,包括作用、核心概念、用法、常用命令、扩展及配置
- rabbitMQ学习笔记(1):基本介绍与核心概念
- Maven介绍,包括作用、核心概念、用法、常用命令、扩展及配置
- webpack npm 介绍和使用
- Maven介绍,包括作用、核心概念、用法、常用命令、扩展及配置
- Spark核心概念介绍(翻译自Learning.Spark.Lightning-Fast.Big.Data.Analysis)
- [转]Maven介绍,包括作用、核心概念、用法、常用命令、扩展及配置
- maven介绍(作用,核心概念,用法,常用命令,扩张及配置)