webpack配置吐血经验，你一定用得上

2019-08-22 本文已影响0人 Jason_Zeng

使用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的全局路径

webpack配置吐血经验，你一定用得上

猜你喜欢

热点阅读