webpack proporciona un servidor de desarrollo local opcional.Este servidor webpack-dev-serverlocal se basa en node.js y utiliza el marco expreso internamente, que puede lograr lo que queremos para que el navegador se actualice automáticamente y muestre nuestros resultados modificados.
El primer paso: instalación
Es un módulo separado y debe instalarse antes de su uso.
instalación:npm install --save-dev [email protected]
La versión de webpack que uso es 3.6.0 y la versión de webpack-dev-server es 2.9.0
Paso 2: configurar
Después de la instalación, debemos agregar la dev-serverconfiguración del archivo webpack.config.js .
La propia opción puede establecer los siguientes atributos:
- contentBase : Para qué carpeta proporciona el servicio local, aquí lo completo
./dist - puerto : número de puerto, el predeterminado es 8080
- en línea : controle si la página se actualiza en tiempo real. El valor es verdadero o falso. Cuando es verdadero, la página se actualizará automáticamente después de modificar el código.
- historyApiFallback : en la página SPA, confíe en el modo de historial de HTML5
// webpack.config.js
//...
module.exports = {
// ...其它配置
devServer: {
contentBase:'./dist',
inline:true,
}
}
Paso 3: utilizar
En este punto, si ingresamos directamente en el webpack-dev-servercomando de terminal , encontré informe incorrecto: Díganos que busquemos este comando.
Motivo : No importa si ingresamos el comando directamente a través de cmd o la terminal del editor, este buscará el comando en el global para ejecutarlo, al igual que el anterior. Pero webpack-dev-server está instalado localmente (porque lo usamos en --save-devsu lugar -g), por lo que si no se puede encontrar en el global, se informará un error.
Solución : en el package.jsonarchivo de secuencias de comandos, agregue un comando:
//package.json文件
"scripts": {
// ...其它命令
"dev": "webpack-dev-server --open" //--open表示执行完命令后自动打开浏览器
}
Luego usamos el npm run devcomando en él
Explique los comandos en los scripts:
- son algunos de los scripts de comandos definidos cuando usamos
npm run xxxtime, irán al archivo package.json scripts para encontrar el comando xxx para ejecutar. A continuación, buscaremos la posición correspondiente al comando en un orden determinado. - Primero, el local
node_modules/.binencontrará la ruta de comando correspondiente. Si no lo encuentra, lo buscará en las variables de entorno global.
Precauciones
No hay una carpeta dist en mi estructura de directorio de código, y no puedo ver los archivos compilados, pero el webpack-dev-server puede ejecutarse normalmente después de iniciar el webpack-dev-server, porque los archivos compilados en tiempo real se guardan en la memoria .