- 使用cnpm下载和运行命令，包括运行命令都要用这个，否则wbpack-cli又要喊你取装一次，记住都用cnpm
- npx webpack 可以直接运行当前文件下的node_module/.bin 目录下的命令
- cnpm i html-webpack-plugin -D 用hash动态生成的js文件自动引入模板html的插件
- 工程名字尽量不要叫webpack,而且改过名字之后最好重新删除node_module之后重新cnpm install
- 当要把css文件打包到js中并且查到html中的时候，用style-loader, 当要提取为单独的文件用mini-css-extract-plugin提取
- 使用less的时候要cnpm i less less-loader -D 两个一起装
- 安装babel的时候 因为babel-loader升级了8，所以配套的babel都必须重新安装了，带斜杠的奇葩 npm i babel-loader @babel/core @babel/preset-env @babel/preset-react -D
- 注意在babel配置中，使用的是presets带有s的命名
-
css-loader更新到1.0.0.0后都不支持minimize压缩了，真的很蛋疼 - 在webpack中使用optimization的minimizer的时候，默认production的编译也不会压缩，需要下载UglifyjsWebpackPlugin用来压缩js, 用OptimizeCssAssetsWebpackPlugin来压缩css,十分蛋疼
optimization: {
minimizer: [
// 使用minimizer之后呢，需要这个插件来打包压缩js
new UglifyjsWebpackPlugin(),
// 压缩css
new OptimizeCssAssetsWebpackPlugin()
]
}
- 用webpack安装bootstrap的时候需要增加字体文件的处理，增加
test: /\.(png|jpg|gif|svg|bmp|eot|woff|woff2|ttf)/,字体文件的处理，当作图片的处理, 同时要手动引入bootstrap的css文件，为了方便好看，使用webpack的reslove配置来配置别名, 这样可以在工程中直接引用
resolve: {
alias: {
"bootstrap": "bootstrap/dist/css/bootstrap.css"
},
}
- 快速安装工程依赖
cnpm install webpack webpack-cli css-loader style-loader babel-loader @babel/core @babel/preset-env @babel/preset-react html-webpack-plugin -D
- 热更新，watch, 和HMR的区别：
- 热更新是在调试的时候用webpack-dev-server实现刷新浏览器来实时更新代码
- watch: 是在production的时候加上wacthOptions属性实现代码改了重新打包加载
- HMR: 使用webpack.HotModuleReplacementPlugin这个插件实现模块的热更新，比如用react，redux时候的前端store状态不变的情况下，只更新改变的小组件
-
错误： rror: Cannot find module 'import-local'， 遇到这种问题，马上把讨厌的node_modules删了，然后cnpm install
-
配置输出目录的时候，必须用绝对路径，path.join(__dirname,"dist") 可以用path.resolve("dist")来代替
-
在用HtmlWebpackPlugin时候的，webpack 4 不写模板的话，会用系统内部默认模板，就没有我么模板里写的内容，注意下
new HtmlWebpackPlugin({
template: "./src/index.html"
}),
-
要让 Tree Shaking 正常工作的前提是交给 Webpack 的 JavaScript 代码必须是采用 ES6 模块化语法的, 这个全部用es6语法呀
-
webpack 总共提供了三种办法来实现 Code Splitting，如下：
- 入口配置：entry 入口使用多个入口文件；
- 抽取公有代码：使用 SplitChunks 抽取公有代码；
- 动态加载 ：动态加载一些代码,
-
在测试hmr热更新模块是，各种配置都写对了，死活都是会刷新全部网页，不能实现模块刷新，这个时候，把vscode关了， 所有浏览器关了，可能以前打开了多个，有缓存什么，搞了一个小时，最后配置没变就可以了，估计是浏览器打开了很多，都打开了localhost:8080同一个端口问题，以后注意呀
-
Scope Hoisting 可以让 Webpack 打包出来的代码文件更小、运行的更快， 它又译作 "作用域提升"，是在 Webpack3 中新推出的功能。
代码体积更小，因为函数申明语句会产生大量代码
代码在运行时因为创建的函数作用域更少了，内存开销也随之变小
使用 new webpack.optimize.ModuleConcatenationPlugin(),开启此功能
但是，但是，但是，在webpack.4.39.2里面，亲测用webpack --mode production 打包的时候就会自己用这个功能，去掉一些无用的代码，哎，所以也没啥用了这个属性 -
在写一些cli工具的时候，测试用
cnpm link会报错，一般是没有权限，需要用管理员运行cmd来使用，二还是会报错，用npm link来测试正常，会自动把当前目录下的映射到c盘全局的npm 的node_modules下面，这样就可以全局使用命令来测试你写的cli工具了，映射关系如下
C:\Users\Jason Zeng\AppData\Roaming\npm\jasonPack -> C:\Users\Jason Zeng\AppData\Roaming\npm\node_modules\JasonPack\bin\jasonPack.js
C:\Users\Jason Zeng\AppData\Roaming\npm\node_modules\JasonPack -> E:\workspace\start\JasonPack
- 在 npm link后，把命名如jasonPack放入全局中后，在其他工程使用的时候老是报脚本错误，这个时候，不是什么权限不够，而是在你写的命令入口文件开头加上, 参考
https://stackoverflow.com/questions/42838658/npm-link-causes-javascript-syntax-errors
#! /usr/bin/env node
- 最新的babel7在写一些es6的类的时候都需要装babel的插件也是醉了
错误为：
upport for the experimental syntax 'classProperties' isn't currently enabled
安装插件
cnpm i -D @babel/plugin-proposal-class-properties
在babelrc中配置插件：
plugins: ['@babel/plugin-proposal-class-properties']
- 在配置reac的时候报如下错误
Module parse failed: Unexpected token (5:16) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | | > ReactDom.render(<Counter/>,document.getElementById('root'));
什么loader不对，怀疑是babel-loader哪里没有加对，最后发现webpack.config.js里的module.exports单词写错，导致没有找到配置文件，我TMD想骂人
- 写react的表达式的时候大括号{后面不能换行再接代码,下面这样会报错
const UserAvatar = ({ size }) => (
<UserContext.Consumer> {
user => (
<img className={`user avatar ${size || ""}`}
alt="user avatar"
src={user.avatar}></img>
)}
</UserContext.Consumer>
)
必须为下面的模式
const UserAvatar = ({ size }) => (
<UserContext.Consumer>
{user => (
<img className={`user avatar ${size || ""}`}
alt="user avatar"
src={user.avatar}></img>
)}
</UserContext.Consumer>
)
- nodejs连接mysql数据库，报错Client does not support authentication protocol requested by server的解决方法
MySQL8.0版本的加密方式和MySQL5.0的不一样，连接会报错。
解决方法如下：
通过命令行进入解压的mysql根目录下。
登陆数据库
mysql -uroot -p
输入root的密码
Enter password: ******
更改加密方式
mysql> ALTER USER 'root'@'localhost' IDENTIFIED BY 'password' PASSWORD EXPIRE NEVER;
更改密码：该例子中 123456为新密码
mysql> ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY '123456';
刷新：
mysql> FLUSH PRIVILEGES;
- ERROR 13804 nodejs.AppWorkerDiedError: [master] app_worker#4:15100 died (code: 1, signal: null, suicide: false, state: dead), current workers: []
在用egg.js的时候，配置egg-cors的跨域的包的时候，出现上面这个错误，妈的，找了半天，奇葩的错误，这种线程死的错误一般都跟服务啊，跨域啊等模块有关
- 'cnpm' 不是内部或外部命令，也不是可运行的程序
用着用着居然提示cnpm不是全局命令，也是醉了，重新安装一下
npm install -g cnpm --registry=https://registry.npm.taobao.org](https://registry.npm.taobao.org/)
-
git提交代码到GitHub报错：
husky > pre-commit hook failed (add --no-verify to bypass)
解决：
1、进入项目文件夹/.git/hooks文件夹下
2、删除pre-commit文件
问题分析：
pre-commit(客户端)钩子，它会在Git键入提交信息前运行做代码风格检查。
如果代码不符合相应规则，则报错。 -
在使用@connect装饰器来修饰react类组件的时候，会报错在vscode编辑时有时会报作为表达式调用时，无法解析方法修饰器的签名。错误，此时需要在tsconfig.json中增加target配置项：（注意一定要重启VS code）
{
"compilerOptions": {
"target": "es6",
"experimentalDecorators": true,
}
}
-
在umi使用antd的时候， 引入antd需要配置.umirc.ts里面的
'umi-plugin-react'里面的antd: true, -
yarn 添加包Error: EPERM: operation not permitted, unlink 'E:\test\package.json""
正确解决方法,管理员运行,!!!!!!!!!!!!!!!!去除package.json""只读属性!!!!!!!!!!!!!!
32.yarn global add yo 后不能像npm install yo -g 后一样使用yo的全局命令
yarn global bin获取安装目录，在把这个目录加入环境变量
运行后还是报错的： 文件名、目录名或卷标语法不正确
再 yarn global dir 然后打开这个文件夹，把里面对应的yo.cmd编辑，去掉前面那一串 %dp0一堆路径名，找到global bin的全局路径
网友评论