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 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

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/250784.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/250784.shtml
英文地址，請注明出處：http://en.pswp.cn/news/250784.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！