webpack4——打包html報錯解決

①先引入html-webpack-plugin插件，而後在終端下載

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

②個人文件結構

③修改webpack.dev.js 配置信息

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

module.exports={
    //入口文件的配置項
  entry:{
    //裏面的main是能夠隨便寫的
    main:'./src/main.js',
    main2:'./src/main2.js' //這裏新添加一個入口文件
  },
  output:{
    //打包的路徑
    path:path.resolve(__dirname,'../dist'),
    //打包的文件名稱
    filename:'[name].js'
  },//插件，用於生產模板和各項功能
  plugins:[
    new HtmlWebpackPlugin({
      title: 'Custom template',
      template: './src/index.html', //指定要打包的html路徑和文件名
      filename:'../dist/index.html' //指定輸出路徑和文件名
    })
  ]
}

④再啓動它，由於我在package.json設置的入口是 build

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode production --config=config/webpack.dev.js",
  },

即 npm run build 便可

再次檢查文件目錄，會發如今dist目錄下多了一個index.html，css、js文件自動引入，無需手動加入