Foreword
Our goal is to build based on the use of webpack react + react-router + dva + es6 + less + antd scaffolding in the background for development, the students might say the community are so many good scaffold why take themselves, and the network on these articles is also very much, and did not repeat the need to write, but to me, but also to share the process of learning again, only to realize it again will make yourself more impressive, in general uphold a basic idea: Share in learning, learning in the sharing.
Initialize the project
New index.js and index.html file:
Install and configure webpack
Installation webpack
Create a new build configuration files in folders wbepack
webpack.dev.js, and writing the basic configuration (https://github.com/LuoShengMen/React-Whole-barrels/commit/c39b7e9fb67326d0afdda408a600f0a88beca946)
package.json change
Configuration babel
Since you want to use and react es6, babel configuration is essential
Extension: For development tool library, want to achieve replaced as needed, the following can be used to achieve the following two tools
@ babel / plugin-transform-runtime polyfill avoid contamination of global variables, reduce the volume of packaging, and therefore more suitable as a development tool magazine
@ babel / runtime-corejs2 as dependent production environment, approximately equal @ babel / runtime + babel-polyfill , using @ babel / runtime-corejs2, you will not have to use @ babel / runtime of
.babelrc file
1. Solution: Support for the experimental syntax 'classProperties ' is not currently enabled problems,
NPM -D @ Babel I / plugin-Proposal-class-Properties, and arranged in the plugins.
2.useBuiltIns and transform-runtime can not be used, if you do not transform-runtime with useBuiltInsor, generally separate class library project only with the transform-runtime, (https://segmentfault.com/q/1010000018937075/) Source
Change webpack.dev.js
Installation react
Installation react, react-dom, react-router, and write the code
This part of the code more, you can see the src code on github (https://github.com/LuoShengMen/React-Whole-barrels/commit/55a0a0efdf5f581886a303326259fa9b2ff88444)
webpack-dev-server
After writing the above code is run npm start, open the index.html you will not find anything, then we need to configure a simple WEB server, point to index.html.
Run npm start command, you can see both the content of our code. More dev configuration see here (https://github.com/LuoShengMen/StudyNotes/issues/535)
Use html-webpack-plugin and clean-webpack-plugin plugin
So far, we find that both will need to manually index.html into the dist folder and manually introduced bundle.js. This problem can be solved by html-webpack-plugin.
After introduction of html-webpack-plugin, in one example generates plugins, HtmlWebpackPlugin acceptable template file as a parameter, automatically generate a package to the end of the template parameter html document. And the package generated automatically js file into html file. clean-webpack-plugin may be implemented before each packaging regarded last package files emptied, thus avoiding redundant file, one example of usage is generated directly inside the plugins.
Change webpack.dev.js
less configuration
Style uses less preprocessor, then you need to use less, less-loader, css-loader, style-loader, etc.
Configuration changes webpack.dev.js
postcss.config.js
Icons and images processing
Install file-loader and url-loader
filr-loader to help us to do two things:
1. When faced with a picture file package it will move to the dist directory
2. The next picture will get the address of the module, and the address is returned to the variable being introduced into the module
url-loader can basically achieve file-loader function, but there is a difference is through the file under dist url-laoder packaged image file does not exist, because url-loader will convert the picture into a string base64 directly bundle.js placed inside.
Benefits: Direct pictures packed into js years, not to request additional images saved http request
downside: If you encounter a very large package to a file, then loaded will be loaded for a long time, affect the experience
so we can be configured webpack.dev. js
Hot replacement module HMR
Alternatively also called thermal modules HMR, are only updated when the modified portion of code updates are displayed. There follows a little
-
For debugging easier to style
-
It will be updated to modify the code that part of the show, to enhance the development efficiency
-
Reservation application state is lost when it is fully reload the page.
HMR configured in two ways, one cli ways, one way Node.js API, here we use the second method, if you want to understand and implement two HMR HMR realization of the principle can be seen here ((https: // github .com / LuoShengMen / StudyNotes / issues / 492)).
We realize by HMR in custom development services, using plug-ins webpack-dev-middleware and webpack-hot-middleware with
New dev-server.js
Change webpack.dev.js, add the following:
More webpack-hot-middleware arranged here (https://github.com/LuoShengMen/StudyNotes/issues/492)
Modify the startup command:
Installation antd and dva
And-design can be used inside the assembly after installation ui antd. Use babel-plugin-import to implement on-demand loading effect
.babelrc
After a successful installation and rewriting index.js and New router.js
Here's a bit more code amount not to list can be viewed on github above (https://github.com/LuoShengMen/React-Whole-barrels/commit/4dd8a5866760a2727acc95854cc6ab80b48d845d)
In the process of using the react-router, you may be such a problem, click Refresh error or Can not GET, there are two solutions.
1. The BrowserRouter HashRouter can be changed. 2.devServer must be set historyApiFallback: true
due to the custom services we use, then we can use the connect-history-api-fallback historyApiFallback to achieve the same functionality. Look at the code embodied (https://github.com/LuoShengMen/React-Whole-barrels/commit/5b3c332136b852ac836dfe2da2c647bf96315911)
public path
CDN by deploying resources around the world, allows users to access resources nearby, quicker access. If we put a static resource page is uploaded to the CDN service, access to these resources, publicPath fill is CDN URL provided
us with a current /, relative to the current path, because our resource in the same folder. ""
Webpack.dev.js
Use sourcemap
On sourceMap is essentially a mapping relationship, packing out of js code in the file can be mapped to a specific location code files, this mapping relationship will help us directly to find errors in the source code. Can be used directly in devtool the reasonable use of source-map that can help us to improve development efficiency, faster positioning to the wrong location.
Devtool allocation of production and development environments are different. We can add devtool in webpack.dev.js in.
Construction of the production environment
So far we are configurable development environment webpack, development environment (development) and production (production) build targets vary widely, but in a production environment, our goal is to shift attention to smaller bundle, and more lightweight source map, as well as a more optimal resources to improve the load time.
New webpack.prod.js
Add packaging script,
After performing npm run build, you'll find under dist folder already generated a series of documents. You will find the configuration of the configuration and development environment has many of the same production environment, then we will webpack configuration optimization.
Extracting a common configuration
webpack.dev.js and webpack.prod.js have many of the same configuration, we can extract out common configuration, re-use webpack-merge to be configured in different environments combined.
webpack configuration file changes
webpack.dev.js
webpack.prod.js
webpack.common.js
Specific can be seen here. (Https://github.com/LuoShengMen/React-Whole-barrels/commit/b1412d2debdcbd6f61819f33b2969e39014c5bb2)
CSS file code division
We want to separate packaged css file, use the mini-css-extract-plugin this plugin, but this plugin is not currently supported HMR, in order not to affect the development efficiency, so just use the plugin in the build environment.
optimize-css-assets-webpack- plugin This plugin can help us put the same style merger.
css-split-webpack-plugin plugin can help us put too much css file splitting
Modify webpack.prod.js, modify and synchronize webpack.common.js, webpack.dev.js see here
Browser cache (Cathing)
In order to solve the problem browser cache files, for example: After the code is updated and the file name is not changed, the non-mandatory refresh your browser, the browser thinks the file name is not changed and do not re-read from the cache when requests directly to request documents. We can add a hash value webpack.prod.js output file name.
The reason is that you can use HashedModuleIdsPlugin when you change a file, it only changes the hash value of a file, but not all of the files are changed.
After running npm run build command, you will find dist file js file name already hash value
Remember synchronous modification webpack.common.js, webpack.dev.js, if you do not know how to modify, see here (https://github.com/LuoShengMen/React-Whole-barrels/commit/e846c1380d142332e7859a0bb1120ad6a053fd17)
File path optimization
After you configure name extension can not add or import require a file extension in time, will in turn try to add extensions to match
the mainFiles configuration without adding a file name, in turn try to add the file name to match the
alias can be configured to accelerate the alias webpack Find speed of the module.
webpack.common.js changes:
Tree Shaking
Tree Shaking can weed out a file is not referenced off part and only way to support the introduction of ES Modules module does not support the introduction of the CommonJS way. The reason: ES Modules Static is introduced, CommonJS is a dynamic manner of introduction, Tree Shaking only supports static introduction.
Note: mode option is set production, can be automatically enabled minification (code compression) and tree shaking
Code division (SplitChunksPlugin)
Whether the code division division synchronous or asynchronous code can be used SplitChunksPlugin this plugin, third-party libraries can be split out from the business code.
Webpack.prod.js
DellPlugin upgrade package speed
For third-party libraries, which are in a very long period of time, basic is not updated when packaged packaged packaged separately to improve the speed, DllPlugin DLL plug-ins, the principle is the base on which pages pulled out of the module package to dll file, when present in the module needs to import a dll, this module is no longer packaged, but to get the dll.
New webpack.dll.js
webpack.common.js change
package.json
PWA optimization
PWA stands for progressive Web Application, PWA function is to achieve even hang the server, or through a local cache to access to the page. First workbox-webpack-plugin installed plug-ins, and then configure the webpack.prod.js in Plugins, as this feature is only online use.
webpack.prod.js change
Run command will package multiple files precache-manifest.js and two service-worker.js, service-worker this file can make our live page is cached
Specifies the environment
By specifying the environment, to make webpack selective compilation, the compiler is optional and means the packaging is different environments, to selectively allow specific statement is valid, so that a particular statement is not valid. This allows for code optimization for specific user environment, deleting or adding some important code.
In the simplest case, in a development environment, we print the log, but in a production environment, we print all log statements are not valid (let the program do not run print statements, and even packing up files did not contain print log statement)
we can be implemented using webpack built DefinePlugin.
to sum up
I write to you, such a basic scaffold will take up the paper all the code React-Whole-barrels (https://github.com/LuoShengMen/React-Whole-barrels) are here. We can follow the code configuration, each step has a basic commit, do not know if you can see the commit. Of course this paper, there are many imperfections, such as mock, eslint, styleLint, ts, and so do not add up, but there are still a lot of optimization points, due to the length of the relationship I have not one to write, add and I will follow and constantly improve the optimization of the project, interested students can continue to focus Oh!
hope this article can give you a more in-depth and comprehensive understanding of webpack tools in order to cope with future project configuration changes. If you want to use, then the framework of the project when the heat is recommended creat-react-app or umi up.
If the paper the wrong place, you find, welcome to tell me! ! Thank you! ! If you feel helpful, welcome to give me a star for you!! Thank you! !