The solution that the webpack-dev-server page cannot be automatically refreshed

webpack-dev-serverProvides a simple web server and is capable of live reloading

Through the various configurations of the official documents, I experimented it myself. I don't know what went wrong, and I have not been able to realize real-time loading. Later, I checked the information and realized real-time loading with a very simple configuration. Record it here:

• needs to be initialized firstwebpack-dev-server

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

Note that if you do not specify which version as above, go to download, the latest webpack-dev-server will be downloaded, the pit is here, if your project is webpacknot latest, then you will use webpack-dev-server to get up. There is an error, so download it according to the webpack version in your project. For
example, the version of webpackv3X used in my project is downloaded from [email protected]

-

webpack.config.jsconfigure in

1. It needs to be configured in the entryconfiguration item client:

The common entry of this project is a public method, which will be used in every page. Therefore, you need to go to the entry file that can be used in every page, and then fill clientin the configuration. The following configuration specifies the url to visit

entry:{
    'common':['./src/page/common/index.js','webpack-dev-server/client?http://localhost:8088/'],
    'index':['./src/page/index/index.js'],
    'login':['./src/page/login/index.js']
  },

2. Modify the outputconfiguration:
The pit is here. Everyone knows outputthat the pathpackaged file is placed, not the path of the url to access the file, and the hot update needs to provide a path to the url to access the file, so it is necessary to add one more publicPath, which corresponds to the path of the url

output:{
    path:path.resolve(__dirname, 'dist'),//存放文件的路径
    publicPath:'/dist/',//访问文件的路径,这里的根路径是根据url来的，比如访问http://localhost:8088/dist/，那么就是对应/dist/
    filename:'js/[name].js'
  },

- type on the command line

Make sure you have webpack-dev-server installed globally if you want to enter the command like below

webpack-dev-server --inline --port 8088

Then open http://localhost:8088/ in the browser
to achieve real-time loading

Up to this point, the automatic refresh is simply implemented, but it cannot meet the daily development requirements.

webpack-dev-server automatically refreshes, just a tool we need during development;

In the above entry, in the entry configuration
'common':['./src/page/common/index.js','webpack-dev-server/client?http://localhost:8088/'],
, when packaging is configured, the local url of the entry will also be packaged online, which is obviously useless

Solution:

In Node.js, environment variable configuration is possible

Then open the just modifiedwebpack.config.js

1. Configure an environment variable whose value is devoronline

// 环境变量配置，取值dev 或online
let WEBPACK_ENV         = process.env.WEBPACK_ENV || 'dev';

const configs = {............

2. Then change entrythe configuration item and remove the hard-written url

const configs = {
    entry:{
            'common':['./src/page/common/index.js'],
            'index':['./src/page/index/index.js'],
            'login':['./src/page/login/index.js']
          },
    .......
}

3. Change the outputconfiguration

output:{
    path:path.resolve(__dirname, 'dist'),
    //更改的此处
    publicPath:'dev' === WEBPACK_ENV ? '/dist/' : '',
    filename:'js/[name].js'
  },

4. Before the output of configs, WEBPACK_ENVjudge the value declared before.
If it is a development environment, then we configure the url reading path

if('dev' === WEBPACK_ENV){
    configs.entry.common.push('webpack-dev-server/client?http://localhost:8088/');
}

The key is here, how is WEBPACK_ENV assigned?

We assign values ​​when we start the project,

Enter the command line, start the project and assign it to WEBPACK_ENV

npm run set WEBPACK_ENV=dev&& webpack-dev-server --inline --port 8088

This long list of command lines really looks annoying,

existpackage.json

"scripts": {
    "dev": "set WEBPACK_ENV=dev&& webpack-dev-server --inline --port 8088",
    "build": "webpack"
  },

Then you can happily enter commands

npm run dev