webpack 3 零基础入门教程 #7 - 初识 webpack-dev-server

时间 2019-11-08

标签 webpack 零基础入门教程 dev server 繁體版

原文原文链接

如今咱们来学习一个最经常使用的插件 webpack-dev-server，通常来讲，这个插件，你们都会用，特别是开发环境下。javascript

咱们以前使用 webpack -d --watch 来在开发环境下编译静态文件，可是这个功能，彻底能够用 webpack-dev-server 来代替。html

除此以外， webpack-dev-server 还有其余的功能，好比在本地上开启服务，打开浏览器等。java

这节咱们主要来简单体验一下 webpack-dev-server 的功能。webpack

# 先全局安装 $ npm install -g webpack-dev-server $ npm install --save-dev webpack-dev-server

而后运行命令：web

$ webpack-dev-server

如今咱们用浏览器打开 localhost:8080 也能够看到之前的效果。shell

下面是编译后的源码。npm

默认是运行在 8080 端口，这个咱们能够改。浏览器

webpack.config.jsapp

var HtmlWebpackPlugin = require('html-webpack-plugin'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = { entry: './src/app.js', ... devServer: { port: 9000 }, ... };

咱们还能够配置一运行 webpack-dev-server 的时候就自动打开浏览器。webpack-dev-server

webpack.config.js

var HtmlWebpackPlugin = require('html-webpack-plugin'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = { entry: './src/app.js', ... devServer: { port: 9000, open: true }, ... };

之后都会一直用 webpack-dev-server 的啦。