When preparing the development environment for a modern “Web application” (full stack or front-end), the process is not particularly easy for beginners, especially if the current end uses a framework like React, due to the intricacies of the community ecosystem. This requires some analysis, learning, and documenting the process.
The idea of preparing a development environment is to ask what the “standards” of a “Web application” development environment are — and what productivity we want, need, and feel comfortable with. And, technically, what is the process.
What is a development environment
We can optionally create a data directory on the local file system, initialize a Node package with NPM (NPM −init), and run the VSCODE project in this directory (NPM −init). And run the VSCODE project in this directory (code.) You are ready for development. Of course, it’s clear that this environment is primitive.
First, it is important to understand that even advanced development editors (ides) provide certain development comforts, such as smart hints, auto-completion, and even a debugger, but our Web project is editor independent, and it is not the main development environment configuration discussed here;
In addition, we can add “project source dependency” ($NPM install) to the project using NPM in general. However, installing dependencies is not configuring the development environment, because source dependency is an objective requirement of project functionality, not providing comfort for development operations.
From the comparison of the above two, it is clear that technically, “configuring the development environment” mainly means adding “project development dependencies” ($NPM install –save-dev) to the project using the generic NPM. There are too many opinions and options in the community as to what development kits to install and how to configure and use them.
“Standards” for a “Web Application” development environment
In effect, development comfort is the standard of value in configuring the development environment. Technically, the “task of configuration” is very different because the front-end and back-end environments are very different, for example, back-end nodes are browser-independent and can use modern JS functionality directly.
The backend is “one”, which is not affected by the “many” of the user’s browser and is naturally comfortable for development. Therefore, few back-end projects install a large number of “project development dependencies”. The most common one is nodemon package, which provides hot loading and debugging functions. Front-end, the main configuration of the WebPackp package.
Note: comfort is subject to subjective influence, subject to developer’s intelligence, level, value style
Webpack configuration process
1 Installation Project Development Dependency (webpack webpack-CLI)
$NPM install webpack webpack-cli –save-dev
2 Understand default configurations and packaging concepts
21 Development Directory (SRC) and Distribution Directory (dist)
First we’ll tweak our directory structure slightly, separating the “source” code (./src) from our “distribution” code (./dist). The “source” code is the code that we’ll write and edit. The “distribution” code is the minimized and optimized output of our build process that will eventually be loaded in the browser.
Development directory: Our front-end development, the whole development in a “virtual” environment (./ SRC), can use ESM, ES6+ JSX, etc.; Release directory: This is the target of builds and is the data that can be copied off and used for deployment to production servers
22 Configuration file webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js'.// Depend on the entry
output: {
filename: 'main.js'.// Finally packaged file
path: path.resolve(__dirname, 'dist'), // Publish directory}};Copy the code23 Front-end page dist/index.html
This is arranged directly in the output directory (manually static), and there will be front-end pages that need to be generated dynamically, see below
<! DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8" />
<title>Getting Started</title>
</head>
<body>
<script src="main.js"></script>
</body>
</html>
Copy the code24 Use NPM script to perform packaging tasks
package.json
{
"scripts": {
"build": "webpack"
},
"devDependencies": {
"webpack": "^ 5.4.0"."webpack-cli": "^ 4.2.0"}}Copy the code3. Home page “package” plug-in: html-webpack-plugin
In larger projects, index.html will also act as a “source module” that needs to be packaged dynamically
31 HTML – webpack – the plugin installation
npm i html-webpack-plugin –save-dev
32 Create the Index “module” in the source directory and configure WebPack
const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");
module.exports = {
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, "src"."index.html")]}});Copy the code//// index.html
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="utf-8">
<title>React with Webpack</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
Copy the code4 Install the WebPack dedicated development server
Webpack-dev-server doesn’t write any output files after compiling. Instead, It keeps bundle files in memory and serves them as if they were real files Mounted at the server’s root path.
Webpack-dev-server is compiled without writing any output files. Instead, it keeps the bundle files in memory and treats them as if they were real files installed on the server root path.
41 webpack-dev-server
$ npm install webpack-dev-server –save-dev
42 package.json
update our dev script, in package.json, to use the server:
“dev”: “webpack serve –mode development”
43 webpack.config.js
in webpack.config.js by adding the following property after the output:
devServer: {
contentBase: './deploy',
open: true
},
Copy the codeError: ENOSPC: System limit for number of file watchers reached, watch’ where file path ‘solution
To solve the problem, run the following two commands in sequence on the terminal
echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p sudo sysctl –system
5 Configure a clearing task
The output directory is not tracked by Webpack, so there may be “garbage” as the project progresses, so it is best to clean the directory before each build
51
npm install clean-webpack-plugin –save-dev
52
webpack.config.js:
const { CleanWebpackPlugin } = require(‘clean-webpack-plugin’);
.
plugins: [ … new CleanWebpackPlugin() ],
6 Configure ES6+ support
Start to use loader to “preprocess web modules”, here the first, of course, is to generate ESM module — ES6+ module into ES5 module.
Install the Babel core and the translation plug-in
$ npm i @babel/core babel-loader @babel/preset-env –save-dev
62 Configure Babel to support ES6+ translation
configure babel by creating a new file, babel.config.json
{
"presets": [
"@babel/preset-env"]}Copy the code63 Configure the WebPack to use the Babel Loader
configure webpack to use the loader
module.exports = {
module: {
rules: [{test: /\.js$/.//
exclude: /node_modules/,
use: ["babel-loader"]]}},plugins: []};Copy the code7 Configure JSX support
Support for JSX is similar in nature to support for ES6 (another Babel plug-in), and JSX can be seen as an advanced syntax that needs to be transformed, just like ES6. Just convert React specific ES5 modules.
71 Install the Babel plug-in
The Babel core is already installed, so just install the React plugin
$ npm i @babel/preset-react –save-dev
72 Configure Babel to support JSX translation
configure babel to use the React preset in babel.config.json:
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
Copy the code8 Configure the CSS
Modularizing Web resources other than JS requires a little explanation. Styles, images and other “web modules” are handled differently from JS modules, so separate loader is used (JS modules are preprocessed using Babel); In addition, the preprocessing of these modules, and packaging operations are also different from JS modules. For example, CSS modules are preprocessed by CSS-loader into Web modules, and then packaged by style-loader. css-loader parses the CSS into JavaScript and resolves any dependencies style-loader outputs our CSS into a tag in the HTML document. If SCSS is used, there is also some pre-processing before processing CSS WEB modules, using sass-Loader.
81 loader installation
$ npm i css-loader style-loader –save-dev
82 configuration loader
Note that loader sequence is sensitive, reverse from right to left, preprocess first, and then pack
configure them in webpack.config.js:
module: {
rules: [{test: /\.css$/,
use: ["style-loader"."css-loader"]]}},Copy the codereference
- A mostly complete guide to webpack 5 (2020)
www.valentinog.com/blog/webpac…
- A Beginner’s Guide to Webpack
www.sitepoint.com/webpack-beg…
- How to setup your perfect Webpack dev server environment for React
Linguinecode.com/post/how-to…