webpack官方文档分析(二):概念
1、概念
webpack的核心是将JavaScript应用程序的静态捆绑模块。当webpack处理您的应用程序时,它会在内部构建一个依赖关系图,它映射您的项目所需的每个模块并生成一个或多个包。
从版本4.0.0开始,webpack不需要配置文件来捆绑您的项目,但它可以非常灵活地配置以更好地满足您的需求
(1)Entry:
一个entry point指示哪个模块的WebPack应该使用开始建立了它的内部依赖关系图,将的WebPack找出entry point取决于(直接或间接)哪些其他模块和库。
默认情况下,其值为./src/index.js
,但您可以通过在webpack配置中配置entry属性来指定不同的(或多个入口点)。例如:
webpack.config.js
module.exports = { entry: './path/to/my/entry/file.js' };
(2)Output:
output 属性告诉WebPack哪里在哪里发出它创建的包以及如何命名这些文件。,默认./dist/main.js
主输出文件,以及将其他生成的文件输出到./dist
文件夹。
您可以配置中指定输出文件夹:
webpack.config.js
const path = require('path'); module.exports = { entry: './path/to/my/entry/file.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'my-first-webpack.bundle.js' } };
在上面的示例中,我们使用output.filename
和output.path
属性来告诉webpack我们的bundle的名称以及我们希望它发送到的位置。在顶部导入的路径模块,它是一个Node.js核心的模块,用于操作文件路径。
(3)Loaders
开箱即用,webpack只能理解JavaScript文件。Loaders允许WebPack处理其他类型的文件,并将它们转换成可被应用程序识别并添加到依赖图中的有效模块。
在较高级别,加载器在您的webpack配置中有两个属性:
- 该
test
属性标识应转换的文件。 - 该
use
属性指示应使用哪个加载程序进行转换。
webpack.config.js
const path = require('path'); module.exports = { output: { filename: 'my-first-webpack.bundle.js' }, module: { rules: [ { test: /\.txt$/, use: 'raw-loader' } ] } };
上面的配置rules
为具有两个必需属性的单个模块定义了一个属性:test
和use
。这告诉webpack的编译器如下
“嘿webpack编译器,当你遇到解析为require()
/ import
statement语句中'.txt'文件的路径时,在将它添加到bundle之前使用它raw-loader
来转换它。”
重要的是要记住,在webpack配置中定义规则时,您要在其下定义规则,module.rules
而不是rules
。为了您的便利,webpack会在不正确的情况下发出警告。
(4)Plugins
虽然加载器用于转换某些类型的模块,但可以利用插件执行更广泛的任务,如捆绑优化,资产管理和环境变量注入。
要使用插件,您需要将require()
添加到plugins
数组中。大多数插件都可以通过选项进行自定义。由于您可以在配置中多次使用插件用于不同目的,因此您需要通过使用new
运算符调用它来创建它的实例。
webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm const webpack = require('webpack'); //to access built-in plugins module.exports = { module: { rules: [ { test: /\.txt$/, use: 'raw-loader' } ] }, plugins: [ new HtmlWebpackPlugin({template: './src/index.html'}) ] };
在上面的示例中,html-webpack-plugin
为您的应用程序生成一个html文件,自动注入所有生成的包
(5)Mode
通过设定mode
参数设置为development
,production
或者none
,您可以启用对应于每个环境的WebPack内置的优化。默认值为production
。
module.exports = { mode: 'production' };
(5)浏览器兼容性
webpack支持所有符合ES5标准的浏览器(不支持IE8及以下版本)。WebPack需要Promise
的import()
和require.ensure()
。如果要支持旧版浏览器,则需要在使用这些表达式之前加载polyfill。