Home > Developer > Web Develop
module.exportshttpajaxwebpackNPM I webpack-dev-server-d
Open the terminal and enter into the corresponding project (my for webpack-demo ), execute the command webpack-dev-server , if the terminal shows the following indicates that the server has been successfully opened
Configuration parametersAttention:
1, at this point may be promptedwebpack-dev-serveris not internal command, the solution is to install thewebpack-dev-servermodule in the global, orpackage.jsonadd in the insidescripts"dev": "webpack-dev-server", and then execute the commandnpm run dev
2. At this point, I did notwebpackgenerate a directory through the commanddist(directory structure, such as), and then enter the address in the browserhttp://localhost:8080/, the page will display normally. This is because thedevServerwebpackbuilt-in files are saved in memory and can be previewed without a package build
webpack.config.jsThe contents are as follows:
const path=require(‘path‘);const HtmlWebpackPlugin=require(‘html-webpack-plugin‘);module.exports={ entry:{ index:‘./src/index.js‘, }, output:{ path:path.resolve(__dirname,‘dist‘), filename:‘[name].bundle.js‘ }, plugins:[ new HtmlWebpackPlugin({ title:‘陈学辉‘, template:‘./src/template.html‘, filename:‘index.html‘, }) ], devServer:{ host:‘localhost‘, //服务器的ip地址 port:1573, //端口 open:true, //自动打开页面 }}
index.jsThe contents of the file are as follows:
console.log(‘这是入口文件‘);
template.htmlThe contents of the file are as follows:
<!DOCTYPE html>
After the command is executed webpack-dev-server , the browser automatically opens the page, and if index.js the file is modified, the browser automatically refreshes, such as:
Hot updateBy default, when the server is turned on, the entire page is refreshed as soon as the portal file is updated. If the number of modules introduced in the page to make the entire page refresh will become somewhat slow, this problem can be referred to the hot update to solve. The hot update means updating only the changed modules (local refreshes like Ajax)
Use steps1. Introduction webpack Module
const webpack=require(‘webpack‘);
2. Write Plugin
plugins:[ new HtmlWebpackPlugin({ title:‘陈学辉‘, template:‘./src/template.html‘, filename:‘index.html‘, }), new webpack.HotModuleReplacementPlugin() //引入热更新插件]
3, the devServer increase in hot parameters
devServer:{ host:‘localhost‘, //服务器的ip地址 port:1573, //端口 open:true, //自动打开页面， hot:true, //开启热更新}
At this time can not see the effect, to the back of the article in the loader when you can see the effect
devServerOther configurations: https://webpack.docschina.org/configuration/dev-server/
ModemodeIs webpack4 a new property that is meant for the currently developing environment. has mode reduced the number of configurations, it has built up a lot of features. Improved a lot compared to the previous version and reduced the number of specialized configurations
- Improved build speed
- Default to development environment, no special configuration required
- Provides compression functionality without the need for plugins
- Provided
SouceMap , no special configuration required
modeIt is divided into two environments, one is the development environment ( development ) and the other is the production environment ( production ). The development environment is the environment in which we write code, and the production environment is where the code is placed on the line. The most intuitive difference between the two environments is that the code for the development environment does not provide compression, and the code for the production environment provides compression.
How to use 1: Add after command
Webpack--mode Development
Webpack--mode Production
Mode of Use 2: inpackage.json"scripts": { "build": "webpack --mode production", "dev": "webpack-dev-server --mode development" },
At this point, the dist directory is a production environment, open the server is the development environment, and then through the command execution npm run build or npm run dev , they are the following differences
distThe contents of the catalogue index.bundle.js are as follows:
Http://localhost:1573/index.bundle.js content is as follows:
Data download
Filed under: Webpack 4.X from Beginner to proficient-module (iv)
Webpack 4.X from beginner to proficient-devserver and Mode (iii)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
