webpack开发模式其它

HtmlWebpackPlugin

作用： 简化Html文件生成，自动生成HTML文件 安装：

npm install --save-dev html-webpack-plugin

引入使用：

const ESLintWebpackPlugin = require("eslint-webpack-plugin")


plugins: [
    new ESLintWebpackPlugin({
        // 指定检查文件的根目录
        context: path.resolve(__dirname, "src"),
    }),
    new HtmlWebpackPlugin({
        // 以 public/index.html 为模板创建文件
        // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
        template: path.resolve(__dirname, "public/index.html"),
    })
],

所有插件都是先下载后引入再使用

服务开发自动化

自动化打包

• 安装npm i webpack-dev-server -D
• 配置

devServer: {
    host: 'localhost', //启动服务器域名
    port: '3000', //端口
    open: true //是否自动打开浏览器
}

• 运行指令npx webpack serve

当你使用开发服务器时，所有代码都会在内存中编译打包，并不会输出到 dist 目录下