Initializes a project
Create a folder named webpackCli CD webpackCli. Run NPM init -y // to initialize the project address to generate a package.json fileCopy the code
Create a file
Let’s create a new folder SRC under the root directory
Create the index. HTML and index.js files in the SRC directory
index.html
<! DOCTYPE html> <html> <head> </head> <body> <div id="id">just dance 521</div> </body> <script src="./index.js"></script> </html>Copy the codeindex.js
const dom = document.getElementById('app')
if (dom) {
dom.innerHTML = 'just do it 521'
}
Copy the codeAt this point we just set up the project, albeit very simply. To create a scaffold that can be hot-updated and developed and run in a local environment, we need to introduce webPack-related plug-ins
Install webPack plug-ins
Install WebPack and webpack-CLI and webpack-dev-server
npm i -D webpack webpack-cli webpack-dev-server
Copy the codeNext, create webpack.config.js in the root directory as the webPack configuration file. (Of course, this is simply to configure first)
Webpack. Config. Js configuration
// exports = {entry: './ SRC /index.js' output: {path: Path.resolve (__dirName, './dist'), filename: 'index.js', // Filename: 'index.js', module: {}, plugins: [], devServer: {// Local service configuration port: 3609, // Port open: true, // Whether to automatically open the browser after running the local environment is set to true}}Copy the codeTo start the local service, we need to configure the start command in pakckage.json
{
"name": "webpackCli",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"serve": "webpack-dev-server" // 启动webpack-dev-server
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^5.49.0",
"webpack-cli": "^4.7.2",
"webpack-dev-server": "^3.11.2"
}
}
Copy the codeTry NPM Run Serve on the command line
The following error may be reported on the console
LishangdeMacBook -Pro:webpackCli lishang$NPM Run serve > [email protected] serve /Users/lishang/Desktop/dailyPractice/webpackCli > webpack-dev-server module.js:550 throw err; ^ Error: Cannot find module 'webpack-cli/bin/config-yargs' at Function.Module._resolveFilename (module.js:548:15) at Function.Module._load (module.js:475:25) at Module.require (module.js:597:17) at require (internal/module.js:11:18) at Object.<anonymous> (/Users/lishang/Desktop/dailyPractice/webpackCli/node_modules/webpack-dev-server/bin/webpack-dev-server.js:65:1) at Module._compile (module.js:653:30) at Object.Module._extensions.. js (module.js:664:10) at Module.load (module.js:566:32) at tryModuleLoad (module.js:506:12) at Function.Module._load (module.js:498:3) npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! [email protected] serve: 'webpack-dev-server' NPM ERR! Exit status 1 npm ERR! npm ERR! Failed at the [email protected] serve script.npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! /Users/lishang/.npm/_logs/2021-08-08T10_30_24_291Z-debug.log lishangdeMacBook-Pro:webpackCli lishang$Copy the codeThis is because of a conflict between our webPack and Webpack-dev-server versions. Therefore, we need to install the corresponding version
NPM i-d [email protected] [email protected] [email protected]Copy the codeNext we run NPM Run Serve to open the page in the browser but at this point we may see the page performance is not what we want
In this case we can use the html-webpack-plugin clean-webpack-plugin. Note here that the version of the htmL-Webpack-plugin introduced should be consistent with the version of WebPack. We used the version of WebPack4 in the previous step, so the version of the HTml-Webpack-plugin needs to be the same
NPM I -d [email protected] NPM - -d clean-webpack-pluginCopy the codeThe webpack.config.js configuration needs to be modified
const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const { CleanWebpackPlugin }= require('clean-webpack-plugin'); Module. exports = {entry: './ SRC /index.js', // output: {path: Path.resolve (__dirName, './dist'), filename: 'index.js', filename: 'index.js', module: {}, plugins: [ new HtmlWebpackPlugin({ template: 'SRC /index.html', // template configuration file entry}), new CleanWebpackPlugin(), // clean up files in dist], devServer: {// local service configuration port: 3609, // Port open: true, // Whether to automatically open the browser will automatically open after running the local environment if set to true}}Copy the codeAt this point, when we launch the project, we can see what we want to see, and at this point, we can also get a normal hot update.