叉烧店并不卖叉烧

使用webpack-dev-middleware插件

webpack TTT 103℃ 0评论

参考 参考2

概述

在使用Vue.js的时候不免要用Webpack去编译Vue.js项目。如果我们每次修改文件就要用命令行去编译整个项目,难免有些麻烦。所以可以使用webpack-dev-middleware插件来帮助我们解决这个问题。他的原理是使用express服务器,并且将编译好的Vue.js文件放在内存中,部署要express服务器,然后在浏览器中访问express服务器

使用webpack-dev-middleware插件

安装

npm install webpack-dev-middleware express --save-dev

编写配置文件

const webpack = require('webpack');
const middleware = require('webpack-dev-middleware');
const compiler = webpack({ .. webpack options .. });
const express = require('express');
const app = express();

app.use(middleware(compiler, {
  // webpack-dev-middleware options
}));

app.listen(3000, () => console.log('Example app listening on port 3000!'))

配置文件是一个js文件,其中详细可以看以下文件

const path = require('path');
const express = require('express'); // *
const webpack = require('webpack'); // *
const middleware = require('webpack-dev-middleware'); // *
const webpackConfig = require('./webpack.config.js'); // *
const app = express(); // *
// 含有webpack配置文件的对象
const compiler = webpack(webpackConfig); // *

// 服务器的端口
PORT = 9090;

// 编译后的静态文件存放的文件夹名称,如果在原本的根目录
// 值为:/,否则为静态文件相对于原本项目文件的路径
// 比如这个项目的静态文件在原项目的public文件夹里面
const publicPath = '/public/'; 

// *
app.use(middleware(compiler, {
    publicPath: publicPath
}));

// *包含服务的端口,和成功开启的输出信息
app.listen(9090, () => console.log('Example app listening on port 9090!'))

运行

现在像package.json编入以下内容,目的是使用node运行我们上面的配置配置文件

……
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    // webpack.dev.server.config.js为上面的配置文件的配置名称
    "dev": "node webpack.dev.server.config.js"
  },
……
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "css-loader": "^2.1.0",
    "express": "^4.16.4",
    "file-loader": "^3.0.1",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.9.0",
    "less-loader": "^4.1.0",
    "style-loader": "^0.23.1",
    "vue": "^2.5.17",
    "vue-loader": "^15.4.2",
    "vue-template-compiler": "^2.5.17",
    "webpack": "^4.25.1",
    "webpack-cli": "^3.1.2",
    "webpack-dev-middleware": "^3.6.0"
  },
  "dependencies": {
    "element-ui": "^2.5.4"
  }
……
npm run dev // 运行

结果

在浏览器访问静态文件

转载请注明:叉烧店 » 使用webpack-dev-middleware插件

喜欢 (0)
发表我的评论
取消评论

CAPTCHA Image
Reload Image
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址