webpack-frames icon indicating copy to clipboard operation
webpack-frames copied to clipboard

Published 20 hours ago • verified publisher icon HeavenSky
→

Metadata

webpack 1,3,4 ie8 react vue 自建主流框架搭建汇总(配置自己来)

Badge

  • check && format
  • webpack1-ie8
  • webpack3-react
  • webpack3-vue
  • webpack4-react
  • webpack4-vue

更新说明

  1. webpack4-vue和webpack3-vue包含的文件夹完全一致,有需要请自行复制
  2. webpack4-react和webpack3-react包含的文件夹完全一致,有需要请自行复制
  3. webpack2和3差异很小,基本上直接3替换2也没问题,这里只讨论版本1/3/4,官方迁移文档
  4. 开发环境已经做了热重载,若想开发环境兼容ie11以下,请清除热重载
    • 文件.babelrc的plugins中移除react-hot-loader/babel
    • package.json的devDependencies中移除react-hot-loader
    • config/opt.dev.js中devServer.inline必须为false(vue只需修改这一处)
    • 代码中移除react-hot-loader
  5. 开发环境已经支持前端mock api,会自动读取src/mock下的文件,并进行热更新,代码逻辑在config/mock.js, 其中有example示例
  6. vue和vue-template-compiler版本必须完全一致,否则有不可预见错误
  7. config目录webapck134,react,vue配置已统一,不同项目仅需改opt.self.js即可
  8. readme说明有遗漏,麻烦移驾到文件中看代码注释,关键点在config目录中的文件均有注释和官方参考文档地址
  9. devDependencies被用来放锁版本的依赖了,dependencies是保持最新的依赖;由于不用发布到npm上,因此这个分类比较随意,甚至说是错误的;若要发布,请做好区分,具体细节谷歌百度找文档
  10. 由于DllPlugin和CommonsChunkPlugin或splitChunks存在功能重复,而且前者需前置执行一次webpack命令,另外可以用externals来简单替代,后者可操作的空间大,可以自由拆包,使文件大小更均匀,故后续将不再使用DllPlugin

环境准备工作

  1. 设置淘宝镜像 npm config set registry https://registry.npm.taobao.org
  2. 管理员身份运行 npm i -g npminstall
  3. 命令行进入当前目录,运行 npminstall -c
  4. 若出现报错,常用解决办法如下:
    • 管理员身份运行npm cache clean -f和npm cache verify -f
    • 删除node_modules目录
    • 重新运行npminstall -c
    • 最后换一个好点的网络,升级node和npm
  5. 使用注意:
    • npminstall -c和npm install不兼容,前者比后者快很多,但是不能混着用
    • 切换使用需要删除node_modules文件夹
    • node-v12.0.0有问题请先别升级,node-v12的最新版已经没有问题
    • 偶尔出现莫名其妙的打包错误或代码错误,删除node_modules重试

开发坏境启动

  1. npm start
    • 需要支持 ie 时请用
    • npm run env -- FOR_IE=1 npm start
  2. 浏览器打开 http://localhost:8888

生产坏境部署

  1. npm run app
    • 需要支持 ie 时请用
    • npm run env -- FOR_IE=1 npm run app
  2. 拷贝 dist 文件夹内容至服务器即可

新增其它功能

  1. npm run report 查看生产包 bundle 组成
    • 需要支持 ie 时请用
    • npm run env -- FOR_IE=1 npm run report
  2. npm run debug 新增断点调式启动,端口 7777
    • 需要支持 ie 时请用
    • npm run env -- FOR_IE=1 npm run debug

更新 package.json

  • 安装npm i -g npm-check-updates
  • 在package.json目录执行ncu(查看) ncu -u(更新)

使用 react-hot-loader 热重载

官方文档

  1. package.json的devDependencies中加入react-hot-loader
  2. webpack.cfg.dev.js的devServer.inline一定要为true
  3. .babelrc的plugins中加入react-hot-loader/babel
  4. 启动命令增加--hot, 勿同时使用HotModuleReplacementPlugin
  5. export根组件加修饰,并且在react前引入react-hot-loader
import { hot } from 'react-hot-loader';
export default hot(module)(App);

注: 仅4.3.12支持ie8+react@0,且需要一个小变更,已在脚本内完成

图片处理

  • 普通图片 => https://tinypng.com 图片压缩 => url-loader(4kb以下)
  • svg图片 => https://github.com/svg/svgo svg压缩 => svg-url-loader
// 建议4kb以下使用,较大文件建议用file-loader
const src = require("!svg-url-loader?noquotes!./x.svg");

webpack 3 4 支持 ie8 研究

  1. DllPlugin 打包后的代码未经过转换, 极大可能存在不兼容问题, 因此打包速度无法较大提升
  2. hot reload 原理是 Object.defineProperty, ie8 不支持
  3. 无法使用最新 react/antd, [email protected]/[email protected] 才支持 ie8; vue直接就不支持ie8
  4. 至此 webpack 3 4 的一些优势近乎都不支持, 暂不考虑 webpack 3 4, 而且网上版本的兼容性都不是很好
  5. 如果实在想用 webpack 3 4 兼容 ie8, 以下一些提供参考, 但未做测试(应该是都有问题)
    • https://github.com/ediblecode/webpack4-ie8
    • https://github.com/natural-fe/natural-cli/blob/master/ie8-mvvm.md

代码规范参考

  • http://eslint.cn/docs/rules eslint规则文档
  • https://github.com/yuche/javascript js规范中文版
  • https://github.com/airbnb/javascript js规范es5,es6,react
  • https://github.com/JasonBoy/javascript/tree/master/react react规范中文版
  • https://github.com/sivan/javascript-style-guide/tree/master/es5 es5规范中文版
  • 常用esling配置 eslint-config-egg eslint-config-react-app eslint-config-ali

个人代码习惯(因人而异,选择你认为对的,仅供参考)

关于文件末尾留一空行

  • 个人按照习惯来, 团队开发通过自动eslint --fix来统一

关于代码缩进

  • 个人按照习惯来, 团队开发通过自动eslint --fix来统一
  • tab和空格争论不休:不追求html的attr换行对齐和css的冒号对齐,tab没什么不好;如果要追求对齐那还是空格吧

关于引号

  • js统一双引号,字符串内的双引号统一\",单引号\x27,双引号\x22,那样就统一双引号了
  • css统一双引号,content内容必须转义,防止出现乱码
  • css/less/scss,很多时候可以用双引号代替单引号,而且某些情况下单引号编译时会有问题,另外html标签也是用双引号,正好都统一双引号了

是否加逗号

  • 如果没有语法错误, 那就加上吧, 那样改动的diff也会少点

是否加分号

  • 如果没有语法错误, 那就加上吧, 那样改动的diff也会少点

关于定义变量

  • 如果是单独定义,一个变量一行,优先const,使用let而不用var
  • 如果可以,尽可能用对象或数组的解构形式进行赋值

关于import顺序

  • 最优先引入polyfill, React/Vue次之
  • 其次是模块目录(node_modules)内, 优先模块路径深度排序, 依次按照(组件>函数>常量)分类和排序
  • 然后是凭借loader媒介加载的, 如:promise-loader
  • 再就是是开发目录(dev_dir)的, 依次按照(组件>函数>常量)分类和排序
  • 引入样式文件, 依次按照(node_modules>dev_dir)分类和排序
  • 引入图片文件, 依次按照(node_modules>dev_dir)分类和排序

← Metadata

36
Stars
6
Forks
Watchers

Owner

verified publisher icon HeavenSky

Metadata

webpack 1,3,4 ie8 react vue 自建主流框架搭建汇总(配置自己来)

Back