webpack --- > html-webpack-plugin

最新推荐文章于 2023-01-13 00:03:12 发布

栗子好好吃

最新推荐文章于 2023-01-13 00:03:12 发布

阅读量245

点赞数

分类专栏： webpack

本文链接：https://blog.csdn.net/piano9425/article/details/100577638

版权

webpack 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

安装

cnpm i html-webpack-plugin -D

在这里插入图片描述

配置 (webpack.config.js)

// webpack 是基于node构建的,webpack的配置文件中,任何合法的Node代码都是支持的
var path = require('path')

// 在内存中生成src下的index.html,同时自动将打包好的bundle.js 导入到页面中
var htmlWebpackPlugin = require('html-webpack-plugin')

// 当以命令行形式运行webpack 或 webpack-dev-server 的时候,工具会发现,我们并没有提供 要打包的文件的入口和出口文件,此时,他会在webapck.config.js 中寻找 入口和出口文件
module.exports = {
  entry: path.join(__dirname, './src/main.js'), // 入口文件
  output: {
    path: path.join(__dirname, './dist'), // 指定输出文件的名称
    filename: 'bundle.js' // 指定输出文件的名称
  },
  plugins: [
    // 所有webpack 插件的配置
    new htmlWebpackPlugin({
      template: path.join(__dirname, './src/index.html'),
      filename: 'index.html'
    })
  ]
}

package.json

{
  "name": "01WEBPACK-STUDY",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --hot --port 3000 --contentBase src"
  },
  "keywords": [],
  "author": "xxxxx<xxxxx>",
  "license": "ISC",
  "devDependencies": {
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.39.3",
    "webpack-cli": "^3.3.8",
    "webpack-dev-server": "^3.8.0"
  }
}

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Webpack 尝试1.1</title>
  </head>
  <body></body>
</html>

main.js

console.log("ok");

目录结构

在这里插入图片描述

执行指令

npm run dev

栗子好好吃

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack --- > html-webpack-plugin

安装cnpm i html-webpack-plugin -D配置 (webpack.config.js)// webpack 是基于node构建的,webpack的配置文件中,任何合法的Node代码都是支持的var path = require('path')// 在内存中生成src下的index.html,同时自动将打包好的bundle.js 导入到页面中var htmlWe...
复制链接

扫一扫

专栏目录