diff --git a/CHANGELOG.md b/CHANGELOG.md
index 255146cc..a122d6e6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -20,6 +20,7 @@
config | add config option | [83c9f1e](https://github.com/luoxue-victor/learn_webpack/commit/83c9f1e)
create readme | 创建readme | [571bfaa](https://github.com/luoxue-victor/learn_webpack/commit/571bfaa)
daasd | asdasd | [0b6ee85](https://github.com/luoxue-victor/learn_webpack/commit/0b6ee85)
+ dashboard and progressbar | 构建时添加仪表盘跟进度条 | [08666da](https://github.com/luoxue-victor/learn_webpack/commit/08666da)
docs | 整理文档 | [32d578f](https://github.com/luoxue-victor/learn_webpack/commit/32d578f)
env | 添加环境变量插件 | [e95e772](https://github.com/luoxue-victor/learn_webpack/commit/e95e772)
eslint | 增加 eslint，并保存是自动修复 | [6dd3812](https://github.com/luoxue-victor/learn_webpack/commit/6dd3812)
diff --git a/README.md b/README.md
index 65132b63..d9b0b714 100644
--- a/README.md
+++ b/README.md
@@ -119,6 +119,7 @@ webpack-box inspect --plugin mini-css-extract # 查看指定插件配置
- [friendly-errors-webpack-plugin 友好错误提示](./config/FriendlyErrorsWebpackPlugin.js)
- [html-webpack-plugin 生成html](./config/HtmlWebpackPlugin.js)
- [mini-css-extract-plugin 配置](./config/MiniCssExtractPlugin.js)
+- [PreloadWebpackPlugin](./config/PreloadWebpackPlugin.js)
- [ProgressBarPlugin 构建时添加进度条配置](./config/ProgressBarPlugin.js)
- [别名配置](./config/alias.js)
- [加载资源 images、svg、media、fonts](./config/assets.js)
diff --git a/config/PreloadWebpackPlugin.js b/config/PreloadWebpackPlugin.js
new file mode 100644
index 00000000..5062fa29
--- /dev/null
+++ b/config/PreloadWebpackPlugin.js
@@ -0,0 +1,23 @@
+// [PreloadWebpackPlugin]
+// npm install preload-webpack-plugin@next
+module.exports = ({ config, resolve, options }) => {
+ const PreloadWebpackPlugin = require('preload-webpack-plugin')
+ return () => {
+ config.plugin('preload')
+ .use(PreloadWebpackPlugin, [{
+ rel: 'preload',
+ as(entry) {
+ if (/\.css$/.test(entry)) return 'style'
+ if (/\.woff$/.test(entry)) return 'font'
+ if (/\.png$/.test(entry)) return 'image'
+ return 'script'
+ }
+ }])
+ config
+ .plugin('prefetch')
+ .use(PreloadWebpackPlugin, [{
+ rel: 'prefetch',
+ include: 'asyncChunks'
+ }])
+ }
+}
diff --git a/config/ProgressBarPlugin.js b/config/ProgressBarPlugin.js
index dcf52ae0..39b59dbc 100644
--- a/config/ProgressBarPlugin.js
+++ b/config/ProgressBarPlugin.js
@@ -2,8 +2,12 @@
module.exports = ({ config, resolve, options }) => {
const ProgressBarPlugin = require('progress-bar-webpack-plugin')
+ const chalk = require('chalk')
return () => {
config.plugin('ProgressBarPlugin')
- .use(ProgressBarPlugin)
+ .use(ProgressBarPlugin, [{
+ format: ' build [:bar] ' + chalk.green.bold(':percent') + ' (:elapsed seconds)',
+ clear: false
+ }])
}
}
diff --git a/config/dashboard.js b/config/dashboard.js
index 7aec7021..2f570804 100644
--- a/config/dashboard.js
+++ b/config/dashboard.js
@@ -2,13 +2,9 @@
module.exports = ({ config, resolve, options }) => {
const DashboardPlugin = require('webpack-dashboard/plugin')
- const chalk = require('chalk')
return () => {
config.plugin('dashboard')
- .use(DashboardPlugin, [{
- format: ' build [:bar] ' + chalk.green.bold(':percent') + ' (:elapsed seconds)',
- clear: false
- }])
+ .use(DashboardPlugin)
}
}
diff --git a/dist/index/index.html b/dist/index/index.html
index 3cf02bfa..6c6ab405 100644
--- a/dist/index/index.html
+++ b/dist/index/index.html
@@ -1,5 +1,5 @@
-
+
index page1
diff --git a/dist/index2/index2.html b/dist/index2/index2.html
index 2e2860d9..b0559dc8 100644
--- a/dist/index2/index2.html
+++ b/dist/index2/index2.html
@@ -1,5 +1,5 @@
-
+
index page2
diff --git a/package.json b/package.json
index e867a813..9d49a304 100644
--- a/package.json
+++ b/package.json
@@ -79,6 +79,7 @@
"ora": "^4.0.3",
"postcss-loader": "^3.0.0",
"postcss-px-to-viewport": "^1.1.1",
+ "preload-webpack-plugin": "^3.0.0-beta.4",
"progress-bar-webpack-plugin": "^1.12.1",
"react": "^16.12.0",
"react-dom": "^16.12.0",