Home Web Front-end JS Tutorial How to use webpack3.0 to configure webpack-dev-server

How to use webpack3.0 to configure webpack-dev-server

May 31, 2018 pm 02:33 PM
web

This time I will show you how to use webpack3.0 to configure webpack-dev-server, and how to use webpack3.0 to configure webpack-dev-server. What are the precautions?The following is a practical case, let's go together take a look.

I have been studying webpack recently. I heard that webpack can build a small server by itself (friends who have used vue-cli should have seen it), so I can't wait to try it. However, in actual operation, I found that there are still many pitfalls in building a server with webpack. On the one hand, it is because I am not familiar with the documentation and do not understand the operating mode of webpack-dev-server; on the other hand, after reading many blogs After reading the article, I found that many configurations actually cannot run (it may be due to the version, or it may be due to my own configuration). So I plan to use webpack3.0 to run dev-server and demonstrate it to everyone. By the way, I will explain some configurations and principles clearly to everyone, so as to save you detours.

Here I assume that everyone has installed webpack and the loaders and plugins they need to use. Since webpack-dev-server is an independent npm package, we need to install it under npm:

1

npm install webpack-dev-server --save-dev

Copy after login

After that we can configure it in webpack.config.js:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

const path = require("path");

module.exports = {

   entyr:{

      ....... //设置入口文件

   },

   output:{

      ....... //设置出口文件

   },

   module:{

      ....... //配置loader,注意使用rules而不是loaders

   },

   plugins:[

      ....... //注意是数组

   ],

   devServer:{

      //我们在这里对webpack-dev-server进行配置

   }        

}

Copy after login

Commonly used configuration objects in devServerAttributes are as follows:

1. contentBase: "./" // Which directory should the local server use to build the page? Generally, we can use the current directory;

2. historyApiFallback: true // It is very useful when we build a spa application. Using HTML5 History Api, any jump or 404 response can point to the index.html page;

3. inline: true // Configuration used to support automatic refresh of dev-server , webpack has two modes to support automatic refresh, one is iframe mode and the other is inline mode; using iframe mode does not need to be configured on devServer, just use a specific URL format to access; however, we generally still commonly use it Inline mode, after setting inline to true in devServer, still need to configure inline to take effect when we start webpack-dev-server. We will talk about this later;

4. hot: true // Start the webpack hot module replacement feature. This is also the place with the most pitfalls. Many blogs have set hot to true. Let’s set it to true for now and see later;

5. port: Port number (default 8080) // I don’t need to say more about this;

In fact, this is probably the commonly used configuration. For convenience, we start the webpack-dev-server in packjson Set it up:

1

2

3

4

5

"scripts": {

  ......

  ......

  "start":"webpack-dev-server --inline"

 },

Copy after login

Don’t forget to set inline: true in devServer and set it here too!

At this time, after packaging and running the server, we should find that the index.html page has been displayed. Although the packaged js file appears on src, it is not displayed. When you open the console, you will find the following error. :

The console displays: Hot Module Replacement is disabled;

Strange? Didn't we set hot to true in devServer before? In fact, although I don’t know why, the hot attribute is currently useless. To use hot modules, we need to use a plug-in called webpack.HotModuleReplacementPlugin. So our webpack.config.js needs to add these:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

const path = require("path");

const webpack = requier ("webpack");

module.exports = {

   entyr:{

      ....... //设置入口文件

   },

   output:{

      ....... //设置出口文件

   },

   module:{

      ....... //配置loader,注意使用rules而不是loaders

   },

   plugins:[

     new webpack.HotModuleReplacementPlugin()

      ....... //注意是数组

   ],

   devServer:{

     contentBase: "./"

   historyApiFallback:true,

   inline:true,

   hot:true

   }        

}

Copy after login

At this time, we run npm run start on bash and find that the server is set up!

In addition, it is worth noting that the bundle.js file used by webpack-dev-server is not the bundle generated by the output packaging in webpack.config.js .js, but is packaged and generated by webpack-dev-server itself. This file does not exist in the output or other paths, but is stored in the memory. In fact, the bundle.js used by webpack-dev-server is can not be seen!

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to develop the verification code password input box function in the WeChat applet

How to use React virtual DOM

The above is the detailed content of How to use webpack3.0 to configure webpack-dev-server. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial
1662
14
PHP Tutorial
1262
29
C# Tutorial
1235
24
How to use python+Flask to realize real-time update and display of logs on web pages How to use python+Flask to realize real-time update and display of logs on web pages May 17, 2023 am 11:07 AM

1. Log output to file using module: logging can generate a custom level log, and can output the log to a specified path. Log level: debug (debug log) = 5) {clearTimeout (time) // If all results obtained 10 consecutive times are empty Log clearing scheduled task}return}if(data.log_type==2){//If a new log is obtained for(i=0;i

How to use Nginx web server caddy How to use Nginx web server caddy May 30, 2023 pm 12:19 PM

Introduction to Caddy Caddy is a powerful and highly scalable web server that currently has 38K+ stars on Github. Caddy is written in Go language and can be used for static resource hosting and reverse proxy. Caddy has the following main features: Compared with the complex configuration of Nginx, its original Caddyfile configuration is very simple; it can dynamically modify the configuration through the AdminAPI it provides; it supports automated HTTPS configuration by default, and can automatically apply for HTTPS certificates and configure it; it can be expanded to data Tens of thousands of sites; can be executed anywhere with no additional dependencies; written in Go language, memory safety is more guaranteed. First of all, we install it directly in CentO

Using Jetty7 for Web server processing in Java API development Using Jetty7 for Web server processing in Java API development Jun 18, 2023 am 10:42 AM

Using Jetty7 for Web Server Processing in JavaAPI Development With the development of the Internet, the Web server has become the core part of application development and is also the focus of many enterprises. In order to meet the growing business needs, many developers choose to use Jetty for web server development, and its flexibility and scalability are widely recognized. This article will introduce how to use Jetty7 in JavaAPI development for We

How to implement form validation for web applications using Golang How to implement form validation for web applications using Golang Jun 24, 2023 am 09:08 AM

Form validation is a very important link in web application development. It can check the validity of the data before submitting the form data to avoid security vulnerabilities and data errors in the application. Form validation for web applications can be easily implemented using Golang. This article will introduce how to use Golang to implement form validation for web applications. 1. Basic elements of form validation Before introducing how to implement form validation, we need to know what the basic elements of form validation are. Form elements: form elements are

How to configure nginx to ensure that the frps server and web share port 80 How to configure nginx to ensure that the frps server and web share port 80 Jun 03, 2023 am 08:19 AM

First of all, you will have a doubt, what is frp? Simply put, frp is an intranet penetration tool. After configuring the client, you can access the intranet through the server. Now my server has used nginx as the website, and there is only one port 80. So what should I do if the FRP server also wants to use port 80? After querying, this can be achieved by using nginx's reverse proxy. To add: frps is the server, frpc is the client. Step 1: Modify the nginx.conf configuration file in the server and add the following parameters to http{} in nginx.conf, server{listen80

Real-time protection against face-blocking barrages on the web (based on machine learning) Real-time protection against face-blocking barrages on the web (based on machine learning) Jun 10, 2023 pm 01:03 PM

Face-blocking barrage means that a large number of barrages float by without blocking the person in the video, making it look like they are floating from behind the person. Machine learning has been popular for several years, but many people don’t know that these capabilities can also be run in browsers. This article introduces the practical optimization process in video barrages. At the end of the article, it lists some applicable scenarios for this solution, hoping to open it up. Some ideas. mediapipeDemo (https://google.github.io/mediapipe/) demonstrates the mainstream implementation principle of face-blocking barrage on-demand up upload. The server background calculation extracts the portrait area in the video screen, and converts it into svg storage while the client plays the video. Download svg from the server and combine it with barrage, portrait

What are web standards? What are web standards? Oct 18, 2023 pm 05:24 PM

Web standards are a set of specifications and guidelines developed by W3C and other related organizations. It includes standardization of HTML, CSS, JavaScript, DOM, Web accessibility and performance optimization. By following these standards, the compatibility of pages can be improved. , accessibility, maintainability and performance. The goal of web standards is to enable web content to be displayed and interacted consistently on different platforms, browsers and devices, providing better user experience and development efficiency.

How to solve the problem of nginx hidden version number and WEB server information How to solve the problem of nginx hidden version number and WEB server information May 21, 2023 am 09:13 AM

nginx can not only hide version information, but also supports custom web server information. Let’s take a look at the final hidden result. How to achieve it? It’s actually very simple. Please look down 1. Official website to download the latest stable version wgethttp://nginx.org/ download/nginx-1.14.1.tar.gz2 Unzip tar-xfnginx-1.14.1.tar.gzcdnginx-1.14.13 Modify the c file (1) vimsrc/http/ngx_http_header_filter_module.c       #Modify line 49 staticu_charngx_http_

See all articles