webpack 是什么?

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

主要概念,及作用,及使用方式?

主要概念:entry,output,loader,plugins

entry(输入):

entry: {[entryChunkName: string]: string|Array<string>}

指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始。进入入口起点后,webpack 会找出有哪些模块和库是入口起点(直接和间接)依赖的。

const config = {
entry: {
  pageOne: './src/pageOne/index.js',
  pageTwo: './src/pageTwo/index.js',
  pageThree: './src/pageThree/index.js'
}
};

在entry中可以配置多个入口(多页面应用),使用CommonsChunkPlugin可以为每个页面间的应用程序共享代码创建bundle,多页应用能够复用入口起点之间的大量代码/模块。

output(输出):

配置 output 选项可以控制 webpack 如何向硬盘写入编译文件。注意,即使可以存在多个入口起点,但只指定一个输出配置。

output的属性是一个包含filename,path 的对象

  • filename :输出文件的文件名

  • path:目标输出目录的绝对路径

用多个入口起点或使用像 CommonsChunkPlugin 这样的插件),则应该使用占位符(substitutions)来确保每个文件具有唯一的名称

{
entry: {
  app: './src/app.js',
  search: './src/search.js'
},
output: {
  filename: '[name].js', // 确保每个文件具有唯一的名称
  path: __dirname + '/dist'
}
}
loader

loader 用于对模块的源代码进行转换,更加灵活地引入细粒度逻辑,例如压缩、打包、语言翻译。。。

三种使用方式:

  • 配置(推荐):在 webpack.config.js 文件中指定 loader。

  • 内联:在每个 import 语句中显式指定 loader。

  • CLI:在 shell 命令中指定它们。

module.exports = {
module: {
  rules: [
    { test: /\.css$/, use: 'css-loader' },
    { test: /\.ts$/, use: 'ts-loader' }
  ]
}
};
plugins(插件):

插件目的在于解决 loader 无法实现的其他事,webpack 插件是一个具有 apply 属性的 JavaScript 对象。

插件可以携带参数/选项,你必须在 webpack 配置中,向 plugins 属性传入 new 实例

 const HtmlWebpackPlugin = require('html-webpack-plugin'); //通过 npm 安装
plugins: [
  new HtmlWebpackPlugin({template: './src/index.html'})
]

webpack入门认知的更多相关文章

  1. webpack入门教程之Hello webpack(一)

    webpack入门教程系列为官网Tutorials的个人译文,旨在给予想要学习webpack的小伙伴一个另外的途径.如有不当之处,请大家指出. 看完入门教程系列后,你将会学习到如下内容: 1.如何安装 ...

  2. webpack入门——webpack的安装与使用

    一.简介 1.什么是webpack webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理. ...

  3. 一小时包教会 —— webpack 入门指南

    什么是 webpack? webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理. 我们可以 ...

  4. Webpack 入门指南 - 3. Hello, Angular2!

    Webpack 入门指南 - 1.安装 Webpack 入门指南 - 2.模块 这一次,我们使用 Webpack 来打包 Angular 2 的应用. 与官方的 Hello, Angular 2 项目 ...

  5. Webpack 入门指南 - 2.模块

    这一次我们谈谈模块问题. 通常我们希望这个项目可以分为多个独立的模块,比如,上一次提高的 hello 函数,如果我们定义为一个模块,其它模块引用之后,直接调用就好了.在前端怎么使用模块呢?这可说来话长 ...

  6. Webpack 入门指南 - 1.安装

    Webpack 是目前流行的打包工具,如何安装它呢? 1. 安装 Node Js 首先,Webpack 是基于 NodeJs 的工具,你必须首先安装 NodeJs. NodeJs 仅仅只需要在你的系统 ...

  7. webpack入门和实战(一):webpack配置及技巧

    一.全面理解webpack 1.什么是 webpack? webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都 ...

  8. webpack入门--前端必备

    webpack入门--前端必备 什么是 webpack? webpack是一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来 ...

  9. webpack入门笔记

    此为第一篇主要是webpack入门笔记: http://if-true.com/2015/10/16/webpack-tutorial-translate.html

随机推荐

  1. python 利用quick sort思路实现median函数

    # import numpy as np def median(arr): #return np.median(arr) arr.sort() return arr[len(arr)>>1 ...

  2. 如何用Curl 来post xml 数据

    因为登陆服务升级,密码策略变更,以前的测试脚本中的用户密码已经不能登陆,试图通过API直接更改密码,一种是直接update,一种是change,使用curl的时候均未成功. 最后索性重新用curl命令 ...

  3. Freemaker FTL指令常用标签及语法

    https://blog.csdn.net/pengpengpeng85/article/details/52070602 FTL指令常用标签及语法 注意:使用freemaker,要求所有标签必须闭合 ...

  4. Awk 从入门到放弃(3) —- 内置变量

    转:http://www.zsythink.net/archives/1374 NF :当前行的字段个数 NR:  行号 FNR: 各文件分别计数的行号 RS: 输入行分隔符 ORS:输出行分隔符 内 ...

  5. 如何高效使用Google

    摘自http://simplyy.space/ 核心思想 1.首先,想好你想要寻找什么. 哪些词能够最好地描述你要寻找的信息或者概念? 哪些词是你能够用来替换的? 有没有那些词是可以不必包括在你想要搜 ...

  6. (C/C++学习笔记) 十六. 预处理

    十六. 预处理 ● 关键字typeof 作用: 为一个已有的数据类型起一个或多个别名(alias), 从而增加了代码的可读性. typedef known_type_name new_type_nam ...

  7. PowerShell基础

    1. 一些命令像Get-SPSite有不同的参数变量.这些变量通过-?展示出来. Get-SPSite -? 2. F3 在当前行显示最近的一条命令结果 3. F7 显示之前执行过的命令列表 4. 显 ...

  8. 《JAVA---day03---运算符》

    /*[位运算符] 运算符: 运算 范例 说明 <<: 左移 3<<2=12--->3*2*2=12 >>: 右移 3>>2=1---->3/ ...

  9. GitHub上最流行的Top 10 JavaScript项目

    统计出Github中所有项目的数量,几乎是不可能的,而明确指出哪些是最优秀的项目就更不可能了.如果说到JavaScript,曾经极富创新的项目(很可能)在一两个月后就会变得过时.落后.以防被淹没在大量 ...

  10. QList 列表指针的 释放

    1,使用qDeleteAll() QList<T*> list: qDeleteAll(list): list = NULL; QList<T*> *listp: qDelet ...