webpack如何运行一个简单服务器

linnamao
2,648 阅读6分钟

使用sourceMap

当代码很多的时候，想必大家都很苦恼找不到代码错误的地方在哪里。

在webpack打包后也一样，当页面报错的时候，它会告知打包后的js文件错误在第几行。但是这个对于开发来说就不能精准的知道写的代码到底哪里错了。

为了更容易知道我们的错误到底在哪个源文件，我们就需要用到sorceMap功能，它是一个映射关系，会将打包后的代码映射到源代码中。这样我们就可以从控制台很容易的知道报错地方在哪里了。

到底怎么用的，当然是看代码

  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')
  }
}

利用了cheap-module-eval-source-map选项后，当代码报错的时候就会在控制台中显示报错的源文件和打包文件，这样就极大的方便了开发人员找到错误代码位置。

关于devtool中使用的选项，具体配置请看官网 devtool

开发工具

说完了找错问题， 那应该来说说如何开发了。不知道大家有没有和我一样的感觉，每次编译代码的时候，要手动npx webpack或者npm run bundle特别的麻烦。

那这个时候我们可以选择一些开发工具来帮我们提高开发效率

  • webpack --watch
  • webpack-dev-server
  • webpack-dev-middleware

webpack --watch

这个很简单，直接在package.json中配置如下即可

"scripts": {
    "watch": "webpack --watch"
  }

当运行npm run watch后，只要在源代码中修改代码，webpack就会监听到打包文件发生了变化，它就会重新进行打包。

虽然这个方法比我们单纯的用npm run bundle方便很多，但是它还是有很多的不方便：

  • 页面修改时，不能自动更新，还需要人为的手动刷新浏览器
  • 不能自动开启一个浏览器
  • 不能模拟一些服务器上的东西

这个时候光光webpack --watch就不行了，我们可以借助webpack-dev-server来帮助我们实现更酷炫的效果。

webpack-dev-server

安装webpack-dev-serve

npm i webpack-dev-server -D

在webpack的配置里面我们添加devServer

devServer: {
    contentBase: './dist',
    open: true
  }

以上的配置中

contentBase： 是借助webpack-dev-serve启动一个服务器的根路径

open： 是否自动访问服务器的地址

运行代码的时候， 将 dist 目录下的文件，作为可访问文件。并且自动的打开浏览器。

package.json

"scripts": {
    "start": "webpack-dev-server"
  }

这个时候我们可以在命令行中敲npm run start就可以自动启动一个端口号为8080的服务器（默认端口号）

如果大家有实践的话应该知道，当修改代码的时候，webpack-dev-serve会自动帮我们刷新浏览器，所以使用它可以更方便的提升代码开发的效率。

好奇的朋友可能会问，问什么需要借助webpack-dev-serve来开启一个服务器呢

如果我们还像之前一样使用npm run bundle， 以file的形式打开html，这个页面想发ajax请求就不可以了。大家有见过浏览器中有以file开头的浏览器么？所以如果想发ajax请求，就要求html文件必须在一个服务器上，以http的形式打开。

所以一般像react脚手架工具或者vue脚手架工具都会帮助我们自动开启一个服务器，其实这个服务器就是通过webpack-dev-serve开启的。

这里我想扩充一下，为什么上面说的脚手架工具可以使用接口代理呢，是因为webpack-dev-serve本质上就接受跨域的代理，详细内容请移步devServer-proxy

我还想问问大家有没有发现打包生成的文件没有出现在你所指定的文件夹中，这是为什么呢？

打包生成的文件不会放在dist目录下，而是放在了电脑的内存里面，这样做可以提升打包的速度，让开发速度更快。

webpack-dev-middleware

先安装webpack-dev-middleware中间件，这个中间件可以监听到webpack打包的代码发生了变化，只要发生变化了就会重新打包

npm install express webpack-dev-middleware -D

然后先添加npm脚本， 让我们可以运行服务

 "scripts": {
    "server": "node server.js"
  }

完成了如上的简单操作后，现在的核心任务是怎样去写这个server.js帮助我们去创建一个服务器

首先在webpack.config.js中的output中添加publicPath，它表示的是所有打包生成的文件之间的引用前面都加一个根路径

  output: {
    publicPath: '/',
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  }

然后在与package.json同级的目录下去创建server.js文件，安装express

express是node中帮助我们快速搭建服务器的

server.js

/**
 * 在node中直接使用webpack
 */
const express = require('express')
const webpack = require('webpack')
const webpackDevMiddleware = require('webpack-dev-middleware')
const config = require('./webpack.config')
// 用webpack结合配置文件,随时进行代码的编译
const complier = webpack(config)

const app = express()

//只要文件发生改变，compiler就会重新运行，重新运行的生成文件对应的打包输出内容的publicPath就是config.output.publicPath
app.use(webpackDevMiddleware(complier, {
    publicPath: config.output.publicPath
}))

app.listen(3000, () => {
  console.log('server is running');
})

然后在命令行上运行服务器， 如下图所示则运行成功

但是大家会发现，当页面发生变化时，我们还是需要自己手动进行刷新，如果想要写出像webpack-dev-serve这样的server服务器的话， 还需要很多的配置项。这其中还是很耗费精力的。

总结

以上讲了三个简化我们开发的方式

那么我们已经会使用webpack通过两种方式:
一种是在node中直接使用webpack，详细内容参考官方文档nodeJs
一种是在命令行中使用webpack，详细内容参考官方文档命令行接口

package.json

"scripts": {
    "watch": "webpack --watch",
    "start": "webpack-dev-server",
    "server": "node server.js"
  }

相比于这三个，目前使用最广泛的方法就是webpack-dev-server这个第三方模块了，它比我们手动写一个node服务器来的简单，又比webpack-watch方便，效率相对来说更高。

所以以上方法还是推荐大家使用webpack-dev-server，大家可以也仔细浏览这一块内容。

注：此文为本人学习过程中的笔记记录，如果有错误或者不准确的地方请大佬多多指教~

avatar
文章
阅读
粉丝