Webpack 打包器面板进阶

3,636 阅读3分钟
原文链接: www.zcfy.cc

Webpack模块打包器面板进阶

终端画面,漂亮的webpack面板

Webpack-dashboard插件在Github网站上星数超过10000,但我还几乎从没碰过。这么棒的插件,为什么不利用起来呢?现在,瞄准的就是你俩:create-react-appvue-cli😊

记住,要是背后有人偷看到这个画面,就假装在为美国国家航天局NASA工作。


使用webpack,尤其是运行webpack的开发者服务器时,以下画面可能大家已经见惯了。

我们都知道webpack的日志信息有多好,但我也的确很好奇,这一屏的信息到底是给谁看的?远超人类的高等外星生物吗?

webpack的日志信息急需配一个友好的界面。


救星来了!Webpack-dashboard面板

看起来好多了

让人读起来是不是容易得多了?


这两个工具都是基于模板构建程序的,都是最热门的。让我们看一下它们如何使用webpack日志功能的:

create-react-app


vue-cli


还不坏。 Webpack日志告诉我们编译成功与否,以及webpack服务器监听的端口。但肯定还有改进的余地,哪怕只是一点点。


create-react-app和vue-cli中的错误处理

第一个: React,第二个:Vue

很好!一有句法错误,我们就立刻得到通知了!


Create-react-app和vue-cli的最终成品输出

也很好,没什么可说的!让我们试试webpack面板吧。


自定义配置下面板的使用

到webpack库的这个页面上去,把自定义webpack配置克隆下来,再找到第五章,并安装npm依存关系包。

git clone git@github.com:wesharehoodies/webpack-2.0-from-scratch.git && cd webpack-2.0-from-scratch && git checkout chapter-5 && npm i && npm run start

把这个命令粘贴到终端上

这里的指导说明共有五个章节,一步一步教大家如何设置webpack配置。强烈推荐大家通读!

粘贴好命令,再加上一点耐心,然后应该看到下面的画面。

很好!正是我们想要的。现在加上变化!

用NPM: npm install webpack-dashboard --save-dev

用YARN: yarn add webpack-dashboard

webpack.config.js里需要导入面板插件,并用new关键词调用插件。就像这样:

最后,更新一下package.json脚本,结果如下:

  "scripts": {
    "build": "webpack --progress",
    "start": "webpack-dashboard -- webpack-dev-server -d --hot --config webpack.config.js --watch",
    "production": "NODE_ENV=production webpack -p"
  },

npm run start命令启动webpack,然后就能看到:

哇!太棒了!跟不上的话,这里有源代码 ❤

顺带一提,我们用不着这么巨大的面板。下面这个实例,显示了窗口大小的调整。感谢iTerm。

👍


面板插件和Create-react-app

可惜我们必须执行弹出参数。

npm i -g create-react-app && create-react-app react-webpack-dashboard && cd react-webpack-dashboard && npm run eject

我不是很喜欢弹出,不过要是有其它方法,请告诉我! 设置方法和自定义配置相同。

打开config/webpack.config.dev.js文件,加入面板插件,别忘了要在plugins: []插件表部分包含这个插件。可以用CTRL + F快捷键查找插件表部分,应该在第214行左右的地方。

打开package.json文件,更新一下启动脚本,如下:

"start": "webpack-dashboard -- node scripts/start.js",

好了,该测试了! 运行下面的命令

npm run start

成了。


面板插件和Vue-cli

 npm i -g vue-cli && vue init webpack vue-webpack-dashboard && cd vue-webpack-dashboard && npm i --save-dev webpack-dashboard

Vue没有弹出的概念。既然没什么代价,就不用伤脑筋了。

打开build/webpack.dev.conf.js 文件,加入插件(第9行),还有(第23行)也要插入插件。

最后,到package.json文件里,修改开发脚本,如下:

“dev”: “webpack-dashboard — node build/dev-server.js”,

测试:

npm run start

成功。


谢谢关注,亲!