webpack2的配置属性说明entry,output,state,plugins,node,module,context

Webpack2配置属性详解

webpack说明

webpack是前端构建的一个核心所在,如果说后端构建就是把高级语言代码编译成机器码,那么前端的构建就是重新组合原有的代码,虽然并不编译成机器码,但实际上,因为前端长期使用简单的脚本开发,HTML,CSS,JS互相分离,难以形成类似工程化的“凝聚力”。

所以伴随着大量的模块化标准的建立,“组件化”前端的概念也逐渐确立,前端开始着重以功能模块为划分,而不是和以前一般以代码种类为划分。

webpack是很好的构建解决方案,简单地说,它通过人为设定的配置,按照需求将前端的各种代码按照指定的方式组合,整理成浏览器可执行的正常代码。这里的各种代码包括但不限于JS,可以是HTML,CSS等任何代码。

webpack基础构建流程

1、从context对应的文件夹开始…

2、寻找entry里所有的文件名…

3、然后读取它们的内容。在解析代码时,每一个通过import(ES6) 或require()(Node) 引入的依赖都会被打包到最终的构建结果当中。它会接着搜索那些依赖,以及那些依赖的依赖,直到“依赖树”的叶子节点 — 只打包它所需要的依赖,没有其他的东西。

4、Webpack 将所有东西打包到output.path对应的文件夹里,使用output.filename对应的命名模板来命名([name]被entry里的对象键值所替代)

webpack属性

webpack包括许多属性,可以灵活定制打包编译过程。这篇文章,就着重地介绍webpack的配置,因为这是它的灵魂所在

context   基础目录,绝对路径,用于从配置中解析入口起点(entry point)和加载器(loader)      注:默认使用当前文件路径

entry

入口文件的属性,整个项目的主入口,其余依赖的模块均在这些文件中引入

output    出口文件的属性,整个项目的唯一出口,虽然可以有多个入口,但是只有一个出口

module

不同资源的加载器,默认webpack只支持JS,但是引入不同的loader,就可以加载更多类型的资源文件,例如HTML,CSS,JPG等等。通过module属性配置需要匹配的文件资源和对应的加载器。需要注意的是,加载器需要提前通过npm安装。

resolve   重定义如何处理模块资源,例如设置模块的别名,设置是否允许无后缀名等

plugins   插件可以实现对各种资源文件的定制处理,例如压缩,混淆,转换,分割等等

devServer  配置开发服务器,这是一个小型的Node Express服务器,可以为打包后的静态资源提供访问服务

devtool   要在webpack打包的同时生成source maps,需得在webpack.config.js中配置devtool配置项

target

webpack可以为js的各种不同的宿主环境提供编译功能,为了能正确的进行编译,就需要开发人员在配置里面正确的进行配置

默认情况下,target的值是web,也就是为类浏览器的环境提供编译

watch and watchOptions    webpack 可以监听文件变化,当它们修改后会重新编译

externals  webpack中的externals配置提供了"不从 bundle 中引用依赖"的方式。例如,从 CDN引入jQuery,而不是把它打包

node   自定义 NodeJS 环境

performance  这些选项可以控制 webpack 如何通知"资源(asset)和入口起点超过指定文件限制",就是当构建大资源文件时可以给出警告提示

stats   这些选项能让你准确地控制显示哪些包的信息

原文地址:https://www.cnblogs.com/andy-lehhaxm/p/10349087.html

时间: 2024-10-08 23:44:10

webpack2的配置属性说明entry,output,state,plugins,node,module,context的相关文章

jqGrid配置属性说明

Property Type Description Default1) ajaxGridOptions object This option allows to set global ajax settings for the grid when requesting data. Note that with this option it is possible to overwrite all current ajax settings in the grid including the er

详解webpack-dev-server的配置属性

1.devServer.contentBase contentBase是我们今天要讲的第一个webpack-dev-server的配置属性,那么,contentBase做了什么事情呢?——它指定了服务器资源的根目录,如果不写入contentBase的值,那么contentBase默认是项目的目录. 在上面例子中产生错误和后来解决错误的原因: 产生错误:因为bundle.js被"放在了"我们的项目根目录里,在dist/html里<script src="./bundle.

【配置属性】—Entity Framework 对应表字段的类型的设定配置方法

摘自:http://www.cnblogs.com/nianming/archive/2012/11/07/2757997.html Entity Framework Code First的默认行为是使用一系列约定将POCO类映射到表.然而,有时候,不能也不想遵循这些约定,那就需要重写它们.重写默认约定有两种方式:Data Annotations和FluentAPI.Data Annotations在功能上是Fluent API的子集,在一些映射场景下使用Annotations不能达到重写的目的

Hibernate 中配置属性详解(hibernate.properties)

Hibernate能在各种不同环境下工作而设计的, 因此存在着大量的配置参数.多数配置参数都 有比较直观的默认值, 并有随 Hibernate一同分发的配置样例hibernate.properties 来展示各种配置选项. 所需做的仅仅是将这个样例文件复制到类路径 (classpath)下并做一些自定义的修改. 属性1.Hibernate JDBC属性 属性名 用途 hibernate.connection.driver_class jdbc驱动类 hibernate.connection.ur

Dotcms中文教程之一:管理(1.2、修改DotCMS配置属性)

修改DotCMS配置属性 DotCMS配置文件dotmarketing-config.properties在以下文件夹中可以找到: /dotserver/tomcat-X.x/webapps/ROOT/WEB-INF/classes/ 这个文件必须在插件中重写,以防止破坏这些变化在接下来dotCMS升级中. 在静态配置插件中修改配置属性,使用以下步骤: 1.从dotmarketing-config属性文件复制你想改变属性. 2.在你的dotCMS安装目录plugins/com.dotcms.co

spring 配置属性细节

苹果的WWDC ,除了发布了os x 10.10 和IOS8 外,还推出了Swift.详细点击这里 代码总体风格有点像Java,也有点像javascript. 下面给出一些代码段(来自苹果官方手册): println("Hello, world") "var myVariable = 42 myVariable = 50 let myConstant = 42" 摘录来自: Apple Inc. "The Swift Programming Languag

5 -- Hibernate的基本用法 --4 9 其他常用的配置属性

Hibernate其他常用的配置属性: ⊙ hibernate.show_sql : 是否在控制台输出Hibernate持久化操作底层所使用的SQL语句.只能为true和false两个值. ⊙ hibernate.format_sql : 是否将SQL语句转成格式良好的SQL.只接受true和false两个值. ⊙ hibernate.use_sql_comments : 是否在Hibernate生成的SQL语句中添加有助于调试的注释.只接受true和false值. ⊙ hibernate.jd

solr的schema.xml配置属性解释

schema.xml做什么? SOLR加载数据,创建索引和数据时,核心数据结构的配置文件是schema.xml,该配置文件主要用于配置数据源,字段类型定义,搜索类型定义等.schema.xml的配置直接影响搜索结果的准确性与效率. <types></types>节点 types节点主要用于搜索类型的定义,这里给出常用类型的定义. 1 <fieldType name="string" class="solr.StrField" sortM

7.maven配置文件中&lt;scope&gt;的6种配置属性解释(源自官方文档) -- 依赖的范围

7.maven配置文件中<scope>的6中配置属性解释 说明:我们知道在pom.xml中<scope>标签是设置依赖作用域的,那么具体的设置类型有哪几种,分别作用的什么时候呢? Dependency Scope Dependency scope is used to limit the transitivity of a dependency, and also to affect the classpath used for various build tasks. There