Front-end and mobile development----webpack----webpack-dev-server-real-time packaging

webpack

aims

• Can use webpack to achieve real-time package preview effect

webpack real-time packaging

Goal: to achieve real-time package preview effect. When we modify the code, immediately run the packaging command and display the effect.

Tools: [webpack-dev-server]

• npm official website
• Configuration manual

注意：

• Project development is to update the files in the src directory, do not modify the files packaged in dist

• Now after modifying any file in src, you need to repackage it before you can see the corresponding effect

step:

1. installation

npm i webpack-dev-server  -D
-------------------------------
+ [email protected]
added 395 packages from 272 contributors in 62.727s

2. Do the following configuration in webpack.config.js

   module.exports = {
         
         
       // 配置 webpack-dev-server的选项
       devServer: {
         
         
           host: '127.0.0.1',  // 配置启动ip地址
           port: 10088,  // 配置端口
           open: true  // 配置是否自动打开浏览器
       }
       // 其它配置
   }
   

3. Add a script to package.json

   "scripts": {
   +    "dev":"webpack-dev-server",
     },
   

   The dev above can be modified.

4. Start command

   By now npm run devwe can achieve real-time package, real-time compiler, browser to view real-time effects. It will automatically open a browser window.

   If an error is reported, one of the possible reasons is: the version of webpack, webpack-cli (too high) is inconsistent with the current version of webpack-dev-server. You need to set the version of webpack and webpack-cli (do not use the latest one)

   The approach is:

   1. Find the settings of webpack and webpack-cli in package.json and modify their version numbers to:

   "webpack": "^4.44.2",
   "webpack-cli": "^3.3.12",
   

   2. Run npm i, it will download the corresponding version of webpack and webpack-cli according to your current changes.

5. test

   • Modify the .js code,
   • Modify the .css code to check whether it will restart

note:

The real-time effect seen by the browser is 内存provided by the server through " ", there is no physical file, and no dist directory will be generated

If there are any shortcomings, please advise, to
be continued, continue to update!
Make progress together!