简介
在前端开发中，webpack 已经成为了必不可少的工具，它可以打包、转译、压缩你的代码，也可以支持热重载和代码分割等功能。但是，一些常用的功能，比如页面自动刷新、资源缓存等却需要使用一些额外的插件来实现。而 justo.plugin.webpack 就是一个基于 webpack 的插件，可以方便地帮助你完成这些功能的集成。
安装
首先，你需要在你的项目中安装 webpack。在安装完 webpack 后，使用 npm 安装 justo.plugin.webpack :
npm install --save-dev justo.plugin.webpack
使用
直接在 webpack 配置文件里引入 justo.plugin.webpack :
const justoPluginWebpack = require('justo.plugin.webpack');然后，你可以像下面这样添加它到你的 webpack 配置文件中：
-- -------------------- ---- -------
-------------- - -
-- ---
-------- -
-- ---
--- --------------------
-- ------- --
--
--
-- ---
-配置项
justo.plugin.webpack 的配置项如下：
options.port
- 类型:
Number - 默认值:
3000
浏览器访问时的端口号。
options.open
- 类型:
Boolean - 默认值:
false
是否自动打开浏览器。
options.publicPath
类型：
String默认值：
undefined如果在
webpack.config.js中没有配置output.publicPath，则使用该值；如果已经配置了
output.publicPath，该值无效。
options.hot
- 类型:
Boolean|Object - 默认值:
true
启用 Hot Module Replacement(HMR)。可以传递一个对象来更改默认的配置。
options.setup
- 类型:
Function - 默认值:
undefined
该函数将会被作为一个参数传递到 webpack-dev-server 的 setup 方法中。
options.historyApiFallback
- 类型:
Boolean|Object - 默认值:
false
当使用 HTML5 History API 时, 404响应时返回index.html。根据 webpack-dev-server 的文档，这些选项应该使用在仅仅通过 HTML5 History API 访问单页应用时。当你有多个单页应用是，每个应用都应该有一个入口 HTML 文件。配置 为 { rewrites: [ { from: /\/app1/, to: '/app1.html' } ] } 是最理想的方式。
options.compress
- 类型:
Boolean - 默认值:
false
一切服务都启用 gzip 压缩：
// ...
new justoPluginWebpack({
compress: true
})
// ...options.progress
- 类型:
Boolean - 默认值:
true
输出进度信息。
options.stats
- 类型:
String|Object - 默认值:
'errors-only'
选项用于控制编译的统计信息。详细请看 webpack - Stats。
示例代码
下面是一个使用 justo.plugin.webpack 的示例代码：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------------------ - --------------------------------
-------------- - -
------ -----------------
------- -
----- ----------------------- --------
--------- -----------
--
-------- -
--- --------------------
----- -----
---- -----
----------- ----
------ ----- -- -
--------------- ----- ---- -- -
-- ---
---
-
--
-
--最后就可以在运行 webpack-dev-server 时使用 justo-plugin-webpack 的各项功能了。
总结
justo-plugin-webpack 是一个基于 webpack 的插件，可以方便地完成一些常用的功能的集成，比如页面自动刷新、资源缓存等等。本文介绍了该插件的使用方法和配置项，希望能为前端开发者的工作提供一些便利。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005675281e8991b448e3d06