webpack笔记三 管理输出
2024-10-15 23:38:56
webpack笔记三 管理输出
增加src/print.js：
export default function printMe() {
console.log('I get called from print.js!');
}
在src/index.js中导入它：
import _ from 'lodash';
import printMe from './print';
function component() {
let element = document.createElement('div');
let btn = document.createElement('button');
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
btn.innerHTML = 'Click here, then watch the console!';
btn.onclick = printMe;
element.appendChild(btn);
return element;
}
document.body.appendChild(component());
在webpack.config.js中增加一个入口：
const path = require('path');
module.exports = {
entry: {
app: './src/index.js',
print: './src/print.js'
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
到这里，还需要手动修改dist/index.html：
<html lang="en">
...
<body>
<script src="app.bundle.js"></script>
</body>
</html>
打包后可以看到效果：
使用 HtmlWebpackPlugin 插件
经过以上实践，我们发现每次修改输出文件名，都得手动修改dist/index.html文件，如果给输出文件名增加了hash值维护起来更是麻烦。懒是进步的动力：
安装 HtmlWebpackPlugin 插件：
npm install --save-dev html-webpack-plugin
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
app: './src/index.js',
print: './src/print.js'
},
plugins: [
new HtmlWebpackPlugin({
title: '管理输出'
})
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
HtmlWebpackPlugin会生成一个index.html，替换掉之前的文件。
HtmlWebpackPlugin插件
html-webpack-template提供默认模板之外，还提供了一些额外的功能。
CleanWebpackPlugin 清理/dist文件夹
npm install --save-dev clean-webpack-plugin
webpack.config.js
...
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
...
plugins: [
...
new CleanWebpackPlugin()
],
...
};
manifest
webpack通过manifest追踪所有模块到输出bundle之间的映射。
通过WebpackManifestPlugin可以将manifest数据提取为一个json文件。
The end... Last updated by: Jehorn, April 24, 2019, 4:22 PM
demo源码
最新文章
- Ibatis 使用心得
- 配置 Windows 下的 nodejs C++ 模块编译环境
- 删除sqlserver代理任务脚本
- POJ 2184 01背包+负数处理
- BZOJ4399 : 魔法少女LJJ
- IIS权限设置
- 创建FILE GEODATABASE 和栅格目录及向栅格目录中添加影像
- 02_使用WebMagic爬虫获取CSDN推荐专家的个人博客信息
- 一台服务器同时搭建IIS和WAMP，利用WAMP 80端口转发
- 逻辑回归 vs 决策树 vs 支持向量机（II）
- discuz 3.1论坛快照被百度劫持解决方案
- java中常用的进制转换
- floor函数
- SQL Operations Studio的安装和使用
- C 标准IO 库函数与Unbuffered IO函数
- 人脸检测及识别python实现系列（2）——识别出人脸
- jsonp/ajax 自己的一些总结
- UVa 11038 有多少个0
- SQL中利用脚本恢复数据库
- Linux下mongodb