webpack --- html-webpack-plugin
生活随笔
收集整理的這篇文章主要介紹了
webpack --- html-webpack-plugin
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
安裝
cnpm i html-webpack-plugin -D配置 (webpack.config.js)
// webpack 是基于node構(gòu)建的,webpack的配置文件中,任何合法的Node代碼都是支持的 var path = require('path')// 在內(nèi)存中生成src下的index.html,同時自動將打包好的bundle.js 導(dǎo)入到頁面中 var htmlWebpackPlugin = require('html-webpack-plugin')// 當(dāng)以命令行形式運行webpack 或 webpack-dev-server 的時候,工具會發(fā)現(xiàn),我們并沒有提供 要打包的文件的入口和出口文件,此時,他會在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");目錄結(jié)構(gòu)
執(zhí)行指令
npm run dev總結(jié)
以上是生活随笔為你收集整理的webpack --- html-webpack-plugin的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 1-1 顺序表操作集 (20 分)
- 下一篇： 每天几道面试题SSM面试题