搭建本地服务器

webpack提供了一个可选的本地开发服务器，这个本地服务器基于node.js,内部使用express框架，可以实现我们想要的让浏览器自动刷新显示我们的打包结果

在开发项目时，经常需要打包项目，瞅一瞅啥样子。但是妮，通过npm打包项目，很费时间，因此我们需要搭建本地服务器，让内存缓存项目，通过localhost的方式，来打开网页。

总结搭建心得：学习webpack时，需要安装各种依赖，如果安装的依赖不兼容就无法允许，因此我也遇到了这个问题。在webpack4.0以上，都需要安装webpack-cli，但是安装的webpack-cli可能与webpack-dev-server不兼容，因此我们无法运行本地服务器

快速开始

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

devserver 也是作为webpack中的一个选项，选项本身可以设置如下属性

  • contentBase：为哪一个文件夹提供本地服务器，默认是根文件夹，我们这里填写./dist
  • port：端口号
  • inline：页面实时刷新
  • historyApiFallback：在SPA页面，中依赖HTML5的history模式

webpack.config.js

1
2
3
4
devServer: {
        contentBase: './dist',
        inline: true
    }

package.json

1
2
3
4
5
"scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "webpack",
        "dev": "webpack-dev-server"
    },
1
2
"dev": "webpack-dev-server" //启动本地服务器
"dev": "webpack-dev-server --open" //直接打开浏览器

如果我们没有去配置”scripts”，那么我们直接运行webpack-dev-server是运行全局的，但是我们并没有在全局安装

在node_modules安装了我们的本地服务器，因此在脚本配置webpack-dev-server，通过npm run dev启动服务器。然后它会在本地找这个服务器，如果没有才去全局找

Warning

这时你是无法启动本地服务器的，如果你的是4.0以上的webpack，那么肯定存在依赖不兼容的问题

解决方法

方案一

降级处理：将4.0以上版本的webpack，降级安装3.6.0。但是新版出来了不使用，还要使用旧版本。4.0以下的版本是不需要安装webpack-cli，因此不会和webpack-dev-server出现不兼容的情况

方案二

兼容依赖：webpack-cli 和 webpack-dev-server 安装的版本是不兼容的，因此我们需要安装它们兼容的版本

报错截图

1
2
3
4
//原因是 less-loader安装的版本过高
//解决方案：卸载之前的less-loader,安装less-loader@5.0.0
npm uninstall less-loader
npm install less-loader@5.0.0

版本修改

1
2
3
4
// 在安装之前，我们需要进行卸载操作
npm i webpack@4 -D
npm i webpack-cli@3 -D
npm i webpack-dev-server@3 -D

待安装好时，我们将node_modules文件夹和 package.json文件删掉，通过npm install重新安装以下这些文件夹，在配置好了的情况下，我们再npm run dev 运行以下本地服务器，没想到就ok了