1. Initialize the project init
mkdir webpack-demo
cd webpack-demo
npm init
Copy the code2. Install and pack a three-piece set
npm i webpack webpack-dev-server webpack-cli -D
Copy the codeCreate the webpack.config.js configuration file source file SRC /index.js
Configure the start and build commands
// package.json
"scripts": {
"start": "cross-env NODE_ENV=development webpack server"."build": "cross-env NODE_ENV=production webpack"
},
Copy the codeCross -env => juejin.cn/post/698981…
Tip: The current webpack5, start uses webpack-dev-server, the version compatibility problem will be reported, WebPack Server is the official solution, you can also reduce the version to solve.
Use the cross – env
npm i cross-env -D
Copy the codeConfiguration webpack. Config. Js
// webpack.config.js
const path = require("path");
module.exports = {
entry: {
app: "./src/index.js",},output: {
filename: "bundle.js".path: path.resolve(__dirname, ""),}};Copy the codeThen the NPM start
I want to see Hello, world!
The react to play
npm i react react-dom
Copy the codesrc/index.js => src/index.jsx
import React from "react";
import ReactDOM from "react-dom";
ReactDOM.render(<h1>Hello, world!</h1>.document.getElementById("root"));
Copy the codeYou need a plugin (html-webpack-plugin) to generate an HTML5 file
npm i --save-dev html-webpack-plugin
Copy the codeThe plugin will generate an HTML5 file for you, use the script tag in the body to import all your WebPack-generated bundles, but you can’t see them, put them in memory, and configure them as follows:
// webpack.config.js
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, "./src/index.html"), // Specify the template page
// filename: "index.html", // the name of the package generated page, default index.html}),].Copy the codeCreate a template=>index.html under SRC and create a dom id=”root” to mount the react root element.
index.html
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Initial =1.0, maximum-scale=2"> <title>demo</title> </head> <div id="root">< div> </ HTML >Copy the codeConfigure the loader for parsing JSX
npm i babel-loader @babel/core @babel/preset-env @babel/preset-react -D
Copy the codeLoader is configured in the Module
// webpack.config.js
module: {
rules: [{test: /\.jsx? $/,
include: path.resolve(__dirname, "./src"),
use: {
loader: "babel-loader".options: {
presets: ["@babel/preset-react"."@babel/preset-env"],},},},Copy the codeRun the NPM start
4. Configure Ts
npm install typescript ts-loader -D
Copy the codeConfiguration tsconfig. Json
// tsconfig.json
{
"compilerOptions": {
"allowSyntheticDefaultImports": true.// Allow a default import from a module that has no default export set. This does not affect the output of the code, just for type checking.
"noFallthroughCasesInSwitch": true.// Report fallthrough error of switch statement. (that is, do not allow the case statement of the switch to run through)
// "sourceMap": true, // generate the corresponding.map file.
"noUnusedParameters": true.// Throw an error if any parameter is not used.
"noImplicitReturns": true.// Not all return paths of the function have return values.
"moduleResolution": "node".// Decide what to do with the module
"esModuleInterop": true."noUnusedLocals": true.// Throw an error if there is an unused local variable.
"noImplicitAny": true.// There is an implicit error in expressions and declarations with the type any.
"target": "es2015".// Specify the ECMAScript target version
"module": "es2015".// Specifies which module code to generate
"strict": true.// Enable all strict type checking options.
"jsx": "react".// Support JSX in.tsx files
"allowJs": true."noEmit": false."outDir": "./dist/"."baseUrl": "."."paths": {
"*": ["src/*"],}},"include": [
"src/**/*"]."exclude": [
"node_modules/**"."dist/*",]}Copy the codeAccording to individual needs, configure www.tslang.cn/docs/handbo…
Configure the loader that parses the TSX
// webpack.config.js
{
test: /\.tsx? $/,
use: "ts-loader".include: path.resolve(__dirname, "./src"),},Copy the codeChange the file suffix to TSX index. JSX => index. TSX
Modifying an Entry Path
// webpack.config.js
entry: {
app: "./src/index.tsx",},Copy the codeOpen index. TSX will have ts error, then TS takes effect
npm i @types/react-dom @types/react -D
Copy the codeThen NPM Star can run normally, there is an error to check the error information.
5. Configure hot updates
Configuration devServer
// webpack.config.js
devServer: {
host: "0.0.0.0".port: 9000.inline: true.open: true.hot: true.historyApiFallback: true.headers: {
"cache-control": "no-cache".pragma: "no-cache",},proxy: {},},Copy the codeDetailed configuration view website webpack.docschina.org/configurati…
Hot: true open hot update, to enable completely, the need to open the HMR = > HotModuleReplacementPlugin enable HMR is easy, and in most cases do not require any configuration.
// webpack.config.js
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, "./src/index.html"), // Specify the template page
// filename: "index.html", // the name of the package generated page, default index.html
}),
!isProd && new webpack.HotModuleReplacementPlugin(), / / enable HMR].Copy the codeThe NPM start page is changed and the page is not refreshed.
The console displays some update success information
6. Complete code
Github.com/dengruifeng…
React + TS build a project of its own from scratch (2 application) Improve routing, LESS, code specifications, development specifications, etc