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. spring cloud 学习(二)关于 Eureka 的学习笔记

    关于 Eureka 的学习笔记 个人博客地址 : https://zggdczfr.cn/ ,欢迎光临~ 前言 Eureka是Netflix开发的服务发现组件,本身是一个基于REST的服务.Sprin ...

  2. ADOX创建ACCESS 表时,几个附加属性

     中文  英文 允许空字符串 Jet OLEDB:Allow Zero Length Unicode压缩 Jet OLEDB:Compressed UNICODE Strings 有效性规则 Jet ...

  3. Spring-data-jpa详解

    转自:http://www.cnblogs.com/dreamroute/p/5173896.html

  4. Memcached 扩展常用方法

    保存数据 向memcached保存数据的方法有 add replace set 它们的使用方法都相同: $add = $memcached->add( '键', '值', '期限' ); $re ...

  5. ORACLE telnet 1521 不通及ORA-12514: TNS: 监听程序当前无法识别连接描述符中请求的服务的解决

    服务器上安装了oracle11g , 防火墙上已经增加1521 入站规则.但是内网客户端配置好了TNS无法连接.telnet 1521 不通. 需要在服务器上\product\10.2.0\db_1\ ...

  6. xml与json

    JSON(JavaScript Object Notation)是一种轻量级的数据交换格式. JSON现在基本上作为前后端数据交互的重要载体,在JSON之前,前后端主要的传输方式主要是通过XML或者文 ...

  7. Python判断变量的数据类型的两种方法

    https://www.cnblogs.com/jessicaxu/p/7727264.html

  8. SWIFT解析天气JSON格式

    访问以下链接可以得到京城当天的天气:http://www.weather.com.cn/adat/sk/101010100.html 返回的JSON格式如下: {"weatherinfo&q ...

  9. jmeter随笔(31)--RandomString和Random函数使用

    在使用jmeter中,用到了一些自带的函数,后面我逐步把自己用到的分享出来,当然这些是比较简单的,也可自己看看英文文档,小怪这里只是结合自己分享. 视频介绍: https://v.qq.com/x/p ...

  10. JavaScript学习(二)——深入学习js对象的原型与继承

    了解对象  什么是对象?   …… 这个就不说了 对象的声明的两种方式 var person = new Object(); person.name="linchen"; pers ...