webpack概念
本质上,webpack?是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个?bundle。
从 webpack v4.0.0 开始,可以不用引入一个配置文件。然而,webpack 仍然还是高度可配置的。在开始前你需要先理解四个核心概念:
本文档旨在给出这些概念的高度概述,同时提供具体概念的详尽相关用例。 入口(entry)入口起点(entry point)指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始。进入入口起点后,webpack 会找出有哪些模块和库是入口起点(直接和间接)依赖的。 每个依赖项随即被处理,最后输出到称之为?bundles?的文件中,我们将在下一章节详细讨论这个过程。 可以通过在?webpack 配置中配置? 接下来我们看一个? webpack.config.js module.exports = { entry: ‘./path/to/my/entry/file.js‘ };
出口(output)output?属性告诉 webpack 在哪里输出它所创建的?bundles,以及如何命名这些文件,默认值为? 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‘ } };
在上面的示例中,我们通过?
loaderloader?让 webpack 能够去处理那些非 JavaScript 文件(webpack 自身只理解 JavaScript)。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块,然后你就可以利用 webpack 的打包能力,对它们进行处理。 本质上,webpack loader 将所有类型的文件,转换为应用程序的依赖图(和最终的 bundle)可以直接引用的模块。
在更高层面,在 webpack 的配置中?loader?有两个目标:
webpack.config.js const path = require(‘path‘); const config = { output: { filename: ‘my-first-webpack.bundle.js‘ },module: { rules: [ { test: /.txt$/,use: ‘raw-loader‘ } ] } }; module.exports = config;
以上配置中,对一个单独的 module 对象定义了?
loader 还有更多我们尚未提到的具体配置属性。 了解更多! 插件(plugins)loader 被用于转换某些类型的模块,而插件则可以用于执行范围更广的任务。插件的范围包括,从打包优化和压缩,一直到重新定义环境中的变量。插件接口功能极其强大,可以用来处理各种各样的任务。 想要使用一个插件,你只需要? webpack.config.js const HtmlWebpackPlugin = require(‘html-webpack-plugin‘); // 通过 npm 安装 const webpack = require(‘webpack‘); // 用于访问内置插件 const config = { module: { rules: [ { test: /.txt$/,use: ‘raw-loader‘ } ] },plugins: [ new HtmlWebpackPlugin({template: ‘./src/index.html‘}) ] }; module.exports = config;
webpack 提供许多开箱可用的插件!查阅我们的插件列表获取更多信息。 在 webpack 配置中使用插件是简单直接的,然而也有很多值得我们进一步探讨的用例。 了解更多! 模式通过选择? module.exports = { mode: ‘production‘ };
了解更多! (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |