html-webpack-plugin 的使用

标题yarn 初始化一个webapck项目

yarn init -y  初始化一个webpack项目【记得要先安装yarn才行哦，已经安装了用 yarn -v验证】

安装依赖包

需要安装四个依赖包分别是 webpack、 webpack-cli、webpack-dev-server 、html-webpack-plugin，版本需要下面代码中的@版本号

yarn add html-webpack-plugin@3.2.0 webpack@4.41.2 webpack-cli@3.3.10 webpack-dev-server@3.9.0 --dev

新增webpack.config.js文件

把npm这个链接的webpack.config.js 代码粘贴到你的webapck.config.js文件里 https://www.npmjs.com/package/html-webpack-plugin

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

module.exports = {
  entry: 'index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'index_bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin()
  ]
}

启动跑起来

yarn webpack-dev-server text.js --open

我的文件目录