3、webpack管理输出
3.1、预先准备
01、创建目录
02、编写src/print.js
// 导出一个printMe方法
export default function printMe() {
// 向控制台输出
console.log('我是print.js文件的');
}
03、编写src/index.js
// 导入lodash依赖
import _ from 'lodash';
// 导入print.js文件
import printMe from './print.js';
// 声明一个方法component
function component() {
// 创建div标签
const element = document.createElement('div');
// 创建button标签
const btn = document.createElement('button');
// 在div标签写入hello webpack
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
// 在button标签写入点我之后控制台输出文字
btn.innerHTML = '点我之后控制台输出文字';
// 为button绑定点击事件，点击后触发printMe执行
// button标签,最终拼成 <button οnclick="printMe()">点我之后控制台输出文字</button>
btn.onclick = printMe;
// 将button加入div标签里
element.appendChild(btn);
// 返回div标签
/**
<div>hello webpack
<button οnclick="printMe()">点我之后控制台输出文字</button>
</div>
*/
return element;
}
// 在body加入div标签
document.body.appendChild(component());
04、编写dist/index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>管理输出</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- 引入编译生成的index.bundle.js -->
<script defer="defer" src="index.bundle.js"></script>
<!-- 引入编译生成的print.bundle.js -->
<script defer="defer" src="print.bundle.js"></script>
</head>
<body>
</body>
</html>
05、编写webpack.config.js
// 引入nodejs的内置path模块
const path = require('path');
// 导出一个对象
module.exports = {
// 入口文件
entry: {
// 取个index名,代表index.js入口文件
index: './src/index.js',
// 取个print名,代表index.js入口文件
print: './src/print.js',
},
// 导出文件路径
output: {
// 文件名 【name】代表在入口文件取的那个名称
filename: '[name].bundle.js',
// 文件路径
path: path.resolve(__dirname, 'dist'),
},
};
06、webpack编译执行
07、测试
08、总结
1、print.js主要导出一个方法
2、index.js导入lodash、print.js文件，然后对页面的标签操作
3、webpack.config.js引入path模块，指定入口，出口文件
4、在index.html引入编译生成的js文件
3.2、自动创建html
01、创建目录
拷贝【3.1、预先准备】的文件
02、安装依赖
// 安装 html-webpack-plugin 开发依赖
npm i html-webpack-plugin -s
03、修改webpack.config.js
// 引入nodejs的内置path模块
const path = require('path');
// --------------------需要修改的地方-------------------------------
// 引入 html-webpack-plugin 模块
const HtmlWebpackPlugin = require('html-webpack-plugin');
// ---------------------------------------------------------------
// 导出一个对象
module.exports = {
// 入口文件
entry: {
// 取个index名,代表index.js入口文件
index: './src/index.js',
// 取个print名,代表index.js入口文件
print: './src/print.js',
},
// --------------------需要修改的地方-------------------------------
// 插件
plugins: [
// 创建一个对象，在对象里定义一个标题名称
new HtmlWebpackPlugin({
title: '管理输出',
}),
],
// ---------------------------------------------------------------
// 导出文件路径
output: {
// 文件名 【name】代表在入口文件取的那个名称
filename: '[name].bundle.js',
// 文件路径
path: path.resolve(__dirname, 'dist'),
},
};
04、webpack编译执行
05、测试
06 、总结
1、在webpack.config.js文件引入html-webpack-plugin模块，使用HtmlWebpackPlugin插件，并创建对象与标题
3.3、指定加载html模板
01、创建项目
拷贝【2自动创建html】的文件
02、创建src/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3.3、指定html与清理 /dist 文件夹</title>
</head>
<body>
</body>
</html>
03、修改webpack.config.js
// 引入nodejs的内置path模块
const path = require('path');
// 引入 html-webpack-plugin 模块
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 导出一个对象
module.exports = {
// 入口文件
entry: {
// 取个index名,代表index.js入口文件
index: './src/index.js',
// 取个print名,代表index.js入口文件
print: './src/print.js',
},
// --------------------需要修改的地方-------------------------------
// 插件
plugins: [
// 创建一个对象，在对象里定义一个标题名称
new HtmlWebpackPlugin({
filename: 'index.html', // 输出html的文件名
template: './src/index.html', //本地自定义html模板
}),
],
// ---------------------------------------------------------------
// 导出文件路径
output: {
// 文件名 【name】代表在入口文件取的那个名称
filename: '[name].bundle.js',
// 文件路径
path: path.resolve(__dirname, 'dist'),
},
};
04、webpack编译执行
05、测试
06 、总结
1、创建src/index.html模板
2、指定webpack.config.js的HtmlWebpackPlugin输出文件名，以及html模板
3.4、清理 /dist 文件夹
01、创建目录
拷贝【指定加载html模板】的文件
02、修改webpack.config.js
// 引入nodejs的内置path模块
const path = require('path');
// 引入 html-webpack-plugin 模块
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 导出一个对象
module.exports = {
// 入口文件
entry: {
// 取个index名,代表index.js入口文件
index: './src/index.js',
// 取个print名,代表index.js入口文件
print: './src/print.js',
},
// 插件
plugins: [
// 创建一个对象，在对象里定义一个标题名称
new HtmlWebpackPlugin({
filename: 'index.html', // 输出html的文件名
template: './src/index.html', //本地自定义html模板
}),
],
// 导出文件路径
output: {
// 文件名 【name】代表在入口文件取的那个名称
filename: '[name].bundle.js',
// 文件路径
path: path.resolve(__dirname, 'dist'),
// --------------------需要修改的地方-------------------------------
clean: true,
// ---------------------------------------------------------------
},
};
03、webpack.config.js编译执行
04、测试
05、总结
1、webpack.config.js的导出文件output加入【clean: true】
4、咨询
如果你觉得本文对您有所帮助，希望您【点赞】、【评论】、【分享】、【收藏】 。您的【点赞】、【评论】、【分享】、【收藏】就是我写作的动力。如果你需要咨询技术问题与及源代码，可以加本作者微信【hdc1002-】，备注【博客】
