本文来源于webpack官方文档的翻译
概念
webpack是一个模块化打包工具。当webpack处理应用程序的时候,在它内部构建了一个包含各个模块的依赖图,然后产生一个或者多个打包压缩后的文件。
从webpack4.0以后,webpack.config.js是可选项.但是还是推荐在打包的时候使用它。
webpack的核心概念I:
-
Entry(入口):要打包的文件
-
OutPut(输出):文件打包后的输出目录
-
Loaders(加载器):对不同类型的文档如何处理
-
Plugins(插件):执行广泛的任务,如优化,资源管理,注入环境变量等
-
Mode(模式):production,development
-
Browser Compatibility(浏览器兼容性):指定浏览器的兼容性
Entry(入口):
入口定义了哪些模块要被打包进依赖图。webpack将会指出这些模块的依赖项。默认值是./src/index.js。但是可以自定义设置。
例如:
人口的设置语法:
单文件:entry: string | [string]
对象式:entry:object{}
module.exports={ entry:{ a:a.js, b:b.js } }
Output(输出):
输出属性定义了webpack打包后的文件,叫什么名字,输出后的地址是哪里。
Loaders(加载器):
webpack只是识别js,json文件,loaders能使得webpack处理其他类型的文件,然后打包进入依赖图。
loaders有两个属性:
test:指定文件名。
use:指定文件的转换程序。
实例如下:
Plugins(插件):
loader能用来转换文件,但插件能执行更多的任务,如打包优化,资源管理,注入环境变量等。
为了使用插件,需要是用require()先引入插件,把它加入到插件属性中,大多数插件都可以通过选项定义属性。一个插件在一个配置文件里可以为了不同的目的使用多次,你需要通过new来创建它的实例。
Mode(模式):
mode的值可以是:production,development,none.设置webpack的不同模式选项,可以执行webpack的内部优化选项。默认值是production
Browser Compatibility(浏览器兼容性):
webpack支持全部的es5语法,能支持ie8以上的浏览器,如果需要支持更老的浏览器需要使用 load a polyfill