webpack-dev-server和html-webpack-plugin的简单使用

Posted 2022-04-01 zhangyahan

安装这两个包

使用npm安装 webpack-dev-server html-webpack-plugin

webpack.config.js 配置文件添加html-webpack-plugin插件

...
const HtmlWebpackPlugin = require('html-webpack-plugin');
const htmlWebpackPlugin = new HtmlWebpackPlugin(
    template: 'path/to/file.html',  // 输入文件
    filename: 'path/to/file.html',  // 输出文件
);

module.exports = 
    ...
    plugins: [
        htmlWebpackPlugin  // 添加插件
    ],
    ...

    

webpack-dev-server 命令，在package文件中添加脚本命令。

--host x.x.x.x  // 启动的ip地址
--port 3000    // 监听的端口号