使用webpackDevServer提升开发效率（学习篇7）

在使用webpack打包时，我们会发现，每次改变源代码时，都要重新执行npm run build进行打包，才能去页面看效果。接下来，给大家分享两种提升开发效率的方法，使每次更改源代码，不必执行npm run build打包命令，会自动进行打包。

使用webpack --watch

需要在package.json中的scripts配置项中进行配置: “watch”: “webpack --watch”

{
  "name": "lesson",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "dependencies": {
    "clean-webpack-plugin": "^3.0.0",
    "html-webpack-plugin": "^3.2.0",
    "url-loader": "^2.1.0",
    "webpack-cli": "^3.3.7",
    "webpack": "^4.39.3"
  },
  "devDependencies": {
    "express": "^4.17.1",
    "webpack-dev-middleware": "^3.7.0",
    "webpack-dev-server": "^3.8.0"
  },
  "scripts": {
    "watch": "webpack --watch"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

webpack.config.js文件：不需要特殊配置

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    mode: 'development',
    devtool: 'cheap-module-eval-source-map',
    entry: {
        main: './src/index.js'
    },
    plugins: [new HtmlWebpackPlugin({
        template: 'src/index.html'
    }), new CleanWebpackPlugin()],
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    }
}

执行打包：npm run watch
打包成功：

当更改源代码时，watch会自动监听代码的变化，自动执行打包，无需再次手动打包。

使用webpack-dev-server

需要在package.json中的scripts配置项中进行配置: “start”: “webpack-dev-server”

{
  "name": "lesson",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "dependencies": {
    "clean-webpack-plugin": "^3.0.0",
    "html-webpack-plugin": "^3.2.0",
    "url-loader": "^2.1.0",
    "webpack-cli": "^3.3.7",
    "webpack": "^4.39.3"
  },
  "devDependencies": {
    "express": "^4.17.1",
    "webpack-dev-middleware": "^3.7.0",
    "webpack-dev-server": "^3.8.0"
  },
  "scripts": {
    "start": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

接下来安装webpack-dev-server：

npm  i  webpack-dev-server -D

安装好之后，在webpack.config.js中进行配置devserver项：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    mode: 'development',
    devtool: 'cheap-module-eval-source-map',
    entry: {
        main: './src/index.js'
    },
    devServer: {
        contentBase: './dist', // 借助devserver帮我们启动一个服务器，服务器的根路径就在当前的dist文件下
        open: true // 在启动dev-server时，自动的帮我们打开一个浏览器，然后自动的访问咱们配置的服务器地址。
    },
    plugins: [new HtmlWebpackPlugin({
        template: 'src/index.html'
    }), new CleanWebpackPlugin()],
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    }
}

然后执行打包：npm run start
打包完成：

使用webpack-dev-server的方式进行打包时，它会帮我们在本地开启一个服务器，我们的代码是在这个服务器上访问的，服务器默认地址为：http://localhost:8080 .

借助dev-server开启一个web服务器的原因：是因为当在前端写ajax请求时，如果是通过file协议打开页面，是不支持发ajax请求的。所以，如果牵扯到接口交互的调试，就必须让你所在的页面文件在一个服务器上，并且通过http协议的方式打开，通过file协议打开，肯定是不行的。

再来看打包后的文件目录：

注：此时我们发现使用webpack-dev-server进行打包时，并没有单独的生成dist目录。但实际上webpack-dev-server已经帮我们进行了打包了，打包生成的文件并不会放到dist目录下，而是放到了电脑中的内存里，这样可以有效的提高打包速度，让我们的开发变得更快。

watch与webpack-dev-server的区别

watch: 在我们更改代码之后，自动执行打包的过程，但是它不会帮我们启动服务器，也就意味着没办法去做一些交互方面的调试。而且每次打包完之后，都需要我们刷新浏览器。
webpack-dev-server：在更改代码后自动帮我们执行打包，并且会启用一个服务器，支持交互方面的调试，还会自动帮我们刷新浏览器。

总结：webpack-dev-server的打包方式是目前使用最广泛的，像一些前端主流框架，vue、react等底层也都是使用的webpac-dev-server的方式来提高开发效率的，所以，推荐这种方式。?

-小橙子-

发布了54 篇原创文章 · 获赞 22 · 访问量 7252

私信关注