webpack-dev-server 打开指定的页面

Question

npm run start 会打开 src/inke 下面的 index.html 文件
那么我如果打开这个目录下的其它 html 文件呢，比如我通过 npm run start --to settings.html 传送一个参数就会打开 settings.html 文件，我试过会报错。

如何 npm run start --to ...html 打开任意的 html 呢？

Answer 1

webpack-dev-server应该做不到，你可以使用webpack-dev-middleware中间件

新建一个server.js如下

const path = require('path');
const express = require('express');
const webpack = require('webpack');
const devMiddleware = require('webpack-dev-middleware');
const config = require('./webpack.config');
const compiler = webpack(config);

const app = new express();

app.use(devMiddleware(compiler, config.devServer));

app.get('*', function(req, res) {
  res.sendFile(path.join(__dirname, '/你的html文件'));
});

app.listen(config.devServer.port, function onAppListening(err) {
  if (err) {
    console.error(err);
  }
});

然后你就可以随意定义你的入口html文件了，不管你是动态传入还是写死都可以

Answer 2

只需要在HtmlWebpackPlugin配置filename输出文件和template输入模板就好了。

const HtmlWebpackPlugin = require('html-webpack-plugin');

plugins: [
    new HtmlWebpackPlugin({
        filename: '写生成html存放路径',
        template: 'html模板路径',
        inject: 'body', // 打完包之后，js存放的位置，true/'head'/'body'/false
        chunks: [], // 引用entry里哪些打完包的js，默认全选
    }),
    new HtmlWebpackPlugin() // 可以指定多个html路径
]