webpack frames

Badge

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

Update instructions

1. The folders contained in webpack4-vue and webpack3-vue are exactly the same. Please copy them yourself if necessary.
2. The folders included in webpack4-react and webpack3-react are exactly the same. Please copy them yourself if necessary.
3. The difference between webpack 2 and 3 is very small. Basically, it is no problem to directly replace 2 with 3. Only versions 1/3/4 are discussed here, the official migration document
4. The development environment has been hot reloaded. If you want the development environment to be compatible with ie11 or below, please clear hot reloading.
   • Remove react-hot-loader/babel from the plugins file .babelrc
   • Remove react-hot-loader from devDependencies in package.json
   • devServer.inline in config/opt.dev.js must be false (vue only needs to modify this point)
   • Remove react-hot-loader from code
5. The development environment already supports the front-end mock api , which will automatically read the files under src/mock and perform hot updates. The code logic is in config/mock.js , which contains example .
6. The versions of vue and vue-template-compiler must be completely consistent, otherwise there will be unforeseen errors.
7. The configurations of webapck134,react,vue in config directory have been unified. Different projects only need to change opt.self.js
8. There are omissions in the readme description. Please move to the file to read the code comments. The key point is that the files in the config directory have comments and official reference document addresses.
9. devDependencies are used to place the dependencies of the locked version. dependencies are the latest dependencies. Since they do not need to be published to npm, this classification is more arbitrary and even wrong. If you want to publish, please make a distinction. Google Baidu for specific details. Find documentation
10. Since DllPlugin and CommonsChunkPlugin或splitChunks have duplicate functions, and the former needs to execute a webpack command beforehand, it can be simply replaced by externals . The latter has a large operable space and can be freely unpacked to make the file size more uniform. Therefore, the following will DllPlugin is no longer used

Environmental preparation

1. Set Taobao mirror npm config set registry https://registry.npm.taobao.org
2. Run npm i -g npminstall as administrator
3. Enter the current directory with the command line and run npminstall -c
4. If an error occurs, common solutions are as follows:
   • Run npm cache clean -f and npm cache verify -f as administrator
   • Delete node_modules directory
   • Rerun npminstall -c
   • Finally, change to a better network and upgrade node and npm
5. Notes on use:
   • npminstall -c and npm install are not compatible. The former is much faster than the latter, but they cannot be used together.
   • Switching to use requires deleting the node_modules folder
   • If there is a problem with node-v12.0.0 , please do not upgrade it yet. The latest version of node-v12 has no problem.
   • Occasionally, inexplicable packaging errors or coding errors occur. Delete node_modules and try again.

Development environment startup

1. npm start
   • Please use it when you need to support ie
   • npm run env -- FOR_IE=1 npm start
2. Open http://localhost:8888 in the browser

Production environment deployment

1. npm run app
   • Please use it when you need to support ie
   • npm run env -- FOR_IE=1 npm run app
2. Just copy the contents of the dist folder to the server

Add other features

1. npm run report to view the production package bundle composition
   • Please use it when you need to support ie
   • npm run env -- FOR_IE=1 npm run report
2. npm run debug adds breakpoint debugging startup, port 7777
   • Please use it when you need to support ie
   • npm run env -- FOR_IE=1 npm run debug

Update package.json

• Install npm i -g npm-check-updates
• Execute ncu (view) ncu -u (update) in the package.json directory

Use react-hot-loader hot reloading

Official documentation

1. Add react-hot-loader to devDependencies in package.json
2. devServer.inline of webpack.cfg.dev.js must be true
3. Add react-hot-loader/babel to plugins of .babelrc
4. Add --hot to the startup command, do not use HotModuleReplacementPlugin at the same time
5. The export root component is modified and react-hot-loader is introduced before react

 import { hot } from 'react-hot-loader' ;
export default hot ( module ) ( App ) ;

Note: Only 4.3.12 supports ie8+react@0 and requires a small change, which has been completed in the script

Image processing

• Ordinary picture => https://tinypng.com图片压缩=> url-loader (below 4kb)
• svg image => https://github.com/svg/svgo svg压缩=> svg-url-loader

 // 建议4kb以下使用,较大文件建议用file-loader
const src = require ( "!svg-url-loader?noquotes!./x.svg" ) ;

webpack 3 4 supports ie8 research

1. The code packaged by DllPlugin has not been converted and is most likely to have incompatibility issues, so the packaging speed cannot be greatly improved.
2. The principle of hot reload is Object.defineProperty, which is not supported by ie8
3. Unable to use the latest react/antd, [email protected]/[email protected] only supports ie8; vue does not directly support ie8
4. At this point, almost all the advantages of webpack 3 4 are not supported. Webpack 3 4 is not considered for the time being, and the compatibility of the online version is not very good.
5. If you really want to use webpack 3 4 to be compatible with ie8, the following are provided for reference, but have not been tested (they should all have problems)
   • https://github.com/ediblecode/webpack4-ie8
   • https://github.com/natural-fe/natural-cli/blob/master/ie8-mvvm.md

Code specification reference

• 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规范中文版
• Commonly used esling configurations eslint-config-egg eslint-config-react-app eslint-config-ali

Personal coding habits (different from person to person, choose what you think is right, for reference only)

About leaving a blank line at the end of the file

• Individuals follow their habits, and team development is unified through automatic eslint --fix

About code indentation

• Individuals follow their habits, and team development is unified through automatic eslint --fix
• There is an endless debate between tabs and spaces: If you don’t pursue the attr line break alignment of html and the colon alignment of css, there is nothing wrong with tabs; if you want to pursue alignment, it’s better to use spaces.

About quotation marks

• js unifies double quotes, the double quotes within the string are unified " , single quotes x27 , double quotes x22 , so that the double quotes are unified
• CSS unifies double quotes, and the content content must be escaped to prevent garbled characters.
• css/less/scss, double quotes can be used instead of single quotes in many cases, and in some cases single quotes can cause problems when compiling. In addition, html tags also use double quotes, which happens to be unified.

Whether to add comma

• If there are no syntax errors, then add it, then there will be fewer diff changes.

Whether to add a semicolon

• If there are no syntax errors, then add it, then there will be fewer diff changes.

About defining variables

• If it is defined separately, one variable per line, priority is given to const, and let is used instead of var.
• If possible, use destructuring of objects or arrays for assignments.

About the import order

• The highest priority is to introduce polyfill, followed by React/Vue
• Secondly, in the module directory (node_modules), the module path depth is sorted first, and the order is classified and sorted according to (component>function>constant)
• Then it is loaded through the loader medium, such as: promise-loader
• Then there is the development directory (dev_dir), which is classified and sorted according to (component>function>constant)
• Introduce style files, classify and sort according to (node_modules>dev_dir)
• Import image files, classify and sort them according to (node_modules>dev_dir)