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

webpack --- html-webpack-plugin相关推荐

webpack入门（四）——webpack loader 和plugin
什么是loader loaders是你用在app源码上的转换元件.他们是用node.js运行的,把源文件作为参数,返回新的资源的函数. 例如,你可以用loaders告诉webpack加载 coffe ...
初探webpack之编写plugin
初探webpack之编写plugin webpack通过plugin机制让其使用更加灵活,以适应各种应用场景,当然也大大增加了webpack的复杂性,在webpack运行的生命周期中会广播出许多事件, ...
webpack 打包（plugin、loader 工作原理）
模块化工具由来 ES Modules 存在环境兼容问题模块文件过多,网络请求频繁所有的前端资源都需要模块化概要 Webpack 作为模块打包器(Module bundler),可以把零散的文 ...
(三)webpack入门——webpack功能集合的demo
ErduYang 自律的人生才自由博客园首页新随笔联系订阅管理随笔 - 37文章 - 0评论 - 8 (三)webpack入门--webpack功能集合的demo 此篇文章来源于http ...
linux怎么卸载webpack,安装webpack后，执行webpack -v命令时报错：SyntaxError: Block-sc
安装webpack后,执行webpack -v命令时报错如下: [root@FreeServer ~]# webpack -v /usr/local/node-v4.4.7-linux-x64/lib ...
webpack基础+webpack配置文件常用配置项介绍+webpack-dev-server
一.webpack基础 1.在项目中生成package.json:在项目根目录中输入npm init,根据提示输入相应信息.(也可以不生成package.json文件,但是package.json是很 ...
css初始化样式文件_前端必备技能 webpack 4. webpack处理CSS资源
每篇文章纯属个人经验观点,如有错误疏漏欢迎指正因为 webpack 本身只具有识别 JS 的能力,所以涉及到其他资源,需要我们通过 loader 来进行特殊处理,针对不同的样式资源,需要以下几个 ...
webpack基础+webpack配置文件常用配置项介绍+webpack-dev-server - QxQstar - 博客园
一.webpack基础 1.在项目中生成package.json:在项目根目录中输入npm init,根据提示输入相应信息.(也可以不生成package.json文件,但是package.json是很 ...
webpack源码分析（2）---- webpack\bin\webpack.js
为什么80%的码农都做不了架构师?>>> 前言上文讲到调用webpack指令实际运行的是node webpack\bin\webpack.js这段代码,我们今天的目的就是分析 ...
什么是webpack？webpack构建工具如何理解？webpack是干什么的？
webpack打包demo的git地址:https://github.com/OnionMister/webpack-demo.git 一.什么是webpack? Webpack是前端资源的构建工具, ...

webpack --- html-webpack-plugin

安装

配置 (webpack.config.js)

package.json

index.html

main.js

目录结构

执行指令

webpack --- html-webpack-plugin相关推荐

最新文章

热门文章