除了`bin/webpack-dev-server`的错误（这个错误是 webpack-dev-server 的 v4 版本没有开发完，不支持 webpack-cli 的 v4 版本导致的），剩下的 webpack 不背锅。集成是 rails 该做好的，rails 没搞好，就把锅甩到前端、甩到 node 、甩到 webpack 这来了？
至于兼容性的，webpack 从 v3 到 v5 以后，配置项就没有多大的变化，照着 changelog 、迁移指南改一改就行。不想改的 package.json 锁版本也没人拦着啊。至于说改了一大堆 api 的，那是 loader 和 plugin 的开发者需要关心的事情。

找到了个正在维护的 ffmpeg.wasm 的项目，准备用来替换 gif 图裁剪和视频裁剪转 gif 的后台服务，直接在浏览器上处理

没错，就是定时爬

原来 b 站不是大项目啊

最近的项目完全使用 react-hook 开发，是真的舒服。
在 react-hook 里就不要想着声明周期那一套，原来生命周期那一堆反而写起来很乱。
拿 useEffect 和生命周期函数做对比，是为了让开发者能了解 useEffect，在 class 组件和 function 组件内如何实现相同的功能。

```javascript

// class
class ClassComponent extends React.Component {
constructor() {
super();

this.state = {
data: this.props.data,
list: []
};
}

componentDidUpdate(prevProps, prevState) {
if (this.props.data !== prevProps.data) {
// do something
}

if (this.state.list !== prevState.list) {
// do something
}

if (this.props.data !== this.state.data) {
// do something
}
}

componentWillUnmount() {
// do something 1
// do something 2
}
}


// function hook
function FunctionComponent(props) {
const [list, setList] = React.useState([]);

React.useEffect(function() {
// do something

return function() {};
}, [props.data]);

React.useEffect(function() {
// do something
}, [list]);
}

```

class 组件的声明周期是渲染 /重新渲染 /组件卸载时，你需要自己来判断是哪些值变了，哪些值没变，所以在 class 组件的生命周期内可能会充斥着一堆的 if else 的判断。
function 组件的渲染 /重新渲染 /组件卸载，是由哪个值的变化引起的，然后执行这个值被依赖的 hook，即当这个值变化时，执行什么操作，反而更一目了然。

用呗，访问量不大的话，还没到考虑性能的时候

const nextConfig = withLess({
webpack(config, options) {
// config.module.rules
// 在 rules 里面找到 less 文件的 loader，添加 exclude，忽略 node_modules 目录内的文件


// antd 的 less-loader
const { rules } = config.module;
const { use } = rules[rules.length - 1];
const loaders = options.isServer
? ['css-loader/locals']
: [isDev ? 'style-loader' : use[0], 'css-loader'];

config.module.rules.push({
test: /.*\.less$/,
use: [
...loaders,
{
loader: 'less-loader',
options: {
lessOptions: {
javascriptEnabled: true
}
}
}
],
include: []
});

if (options.isServer) {
// antd 打包，而不是使用 node 的 require 方法引入，然后可以配置 antd 的按需加载
const externalsFunc = config.externals[config.externals.length - 1];

config.externals[config.externals.length - 1] = function(context, request, callback) {
if (/(antd|rc-|css-animation|@ant-design|highlight)/i.test(request)) {
return callback();
}

return externalsFunc(context, request, callback);
};
} else {
config.node = {
fs: 'empty',
path: 'empty'
};
}


return config;
}
});

你可以试一试

给你的建议：
1 、列表可以用 table 。
2 、不要用滚动加载（这种系统最好不要加一些自以为能让用户体验更好的效果）！！！用分页，每页显示固定条数。而且你的表格头还有排序。后加载的数据排序排到了前面，用户体验就很不好。而且用滚动加载，以后功能扩展，做查询什么的就会很麻烦。
3 、排序让后端来做，点击排序后，刷新当前分页的数据。
4 、建议用 vue + vue-router 来做这块的功能。原因是因为你点击文件夹，渲染了一个新的表格，这种用切换路由控制 html 渲染的方式，比你用 jquery 修改 html 改来改去方便多了。而且 vue + vue-router 还可以直接通过<script></script>接入项目。
5 、系统开发建议用 vue 替换 jquey 。你用 vue 相比用 jquery 开发，代码内少了一大堆 DOM 操作的代码。你只要改改数据，vue 自动帮你修改界面、绑定方法，岂不美哉。

这个和 vue 没关系，用 css 动画做

你需要的是 schema 来验证

拿这个搞过微博发博提醒，集资播报，集资抽卡，qq 群内定时发送消息，qq 群新人入群的欢迎，还有 app 内信息的搬运。这回是真的没法搞了

1 、据说 electron 的 net 模块确实改过，nwjs 不清楚
2 、可以在试试 global.require('net')引入模块

1 、不需要，配置 @babel/preset-env 和 @babel/plugin-transform-runtime 就可以自动按需加载 polyfill （包括 core-js 和 regenerator-runtime ）了
2 、插件配置应该是看 https://github.com/vuejs/vue-cli/tree/dev/packages/@vue/babel-preset-app#readme 这个
3 、当你想使用一些语法且插件默认没有配置时，自己加上就行了

https://astexplorer.net/ 可以去这里看看你需要的

jsdom：解析 html 字符串，然后可以使用部分 BOM 、DOM 的 api，对 html 进行操作，然后还可以重新生成 html 字符串
parse5：将 html 字符串解析成 ast 树，也可以根据 ast 树生成 html 字符串
cheerio：感觉没有 jsdom 好用

别问，问就是 electron 和 nwjs 。浏览器不能修改本地文件，这是底线

就这么搞，我们扒接口的人最喜欢这样的接口了（滑稽

socket 的话直接 nodejs 吧，用 socket.io ，客户端（浏览器）内连兼容都给你搞好了