webpack笔记三 管理输出
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源码
webpack笔记三 管理输出的更多相关文章
- webpack笔记二 管理资源
webpack笔记二 管理资源 webpack最出色的功能之一就是除了引入JavaScript,还可以通过loader引入任何其它类型的文件. 加载CSS 为了在JavaScript模块中import ...
- webpack学习_管理输出(管理资源插件)
管理输出步骤 Step1:在src新建文件print.js添加逻辑 Step2:在src/index.js import 引用新添加的逻辑 Step3:更新dist/index.html文件,修改引入 ...
- Git学习笔记三--管理修改、撤销修改、删除文件
1.管理修改 什么是修改?比如你新增了一行,这就是一个修改,删除了一行,也是一个修改,更改了某些字符,也是一个修改,删了一些又加了一些,也是一个修改,甚至创建一个新文件,也算一个修改. 为什么说Git ...
- [C语言学习笔记三]格式化输出和输入
使用 printf 函数来输出,使用 scanf 函数来输入 在 printf 函数中使用变量,需要使用占位符代替. int 型一般存储整数,使用 %d 代替 long long int 型一般存储长 ...
- django笔记三之admin的管理
django笔记三之admin的管理 设置自动admin应用 vim todos/settings.py INSTALLED_APPS = ( 'django.contrib.admin', 新版本已 ...
- Webpack笔记（一）——从这里入门Webpack
准备了挺久,一直想要好好深入了解一下Webpack,之前一直嫌弃Webpack麻烦,偏向于Parcel这种零配置的模块打包工具一些,但是实际上还是Webpack比较靠谱,并且Webpack功能更加强大 ...
- 学习笔记(三)--->《Java 8编程官方参考教程（第9版）.pdf》:第十章到十二章学习笔记
回到顶部 注:本文声明事项. 本博文整理者:刘军 本博文出自于: <Java8 编程官方参考教程>一书 声明:1:转载请标注出处.本文不得作为商业活动.若有违本之,则本人不负法律责任.违法 ...
- 物联网学习笔记三：物联网网关协议比较：MQTT 和 Modbus
物联网学习笔记三:物联网网关协议比较:MQTT 和 Modbus 物联网 (IoT) 不只是新技术,还是与旧技术的集成,其关键在于通信.可用的通信方法各不相同,但是,各种不同的协议在将海量“事物”连接 ...
- 《CMake实践》笔记三：构建静态库(.a) 与 动态库(.so) 及 如何使用外部共享库和头文件
<CMake实践>笔记一:PROJECT/MESSAGE/ADD_EXECUTABLE <CMake实践>笔记二:INSTALL/CMAKE_INSTALL_PREFIX &l ...
随机推荐
- js小技巧--摘录1
原文地址https://github.com/loverajoel/jstips 1.数组中插入元素 a.尾部追加 var arr = [1,2,3,4,5]; var arr2 = []; arr. ...
- Linux-socket使用
socket 产生的原因 进程通信的概念最初来源于单机系统.由于每个进程都在自己的地址范围内运行,为保证两个相互通信的进程之间既互不干扰又协调一致工作,操作系统为进程通信提供了相应设施,如 UNIX ...
- ../../build/debug/codegen/libCodeGen.a(llvm-codegen.cc.o ):( data.rel.ro_ZTIN4llvm18ValueMapCallbackVHIPKNS_5ValueENS_6WeakVHENS_14ValueMapConfigIS3_EEEE[_ZTIN4llvm18ValueMapCallbackVHIPKNS_5ValueENS_
解决方式如下: wget http://llvm.org/releases/3.3/llvm-3.3.src.tar.gz tar xvzf llvm-3.2.src.tar.gz cd ...
- concurrency基础
Runnable 一个执行任务,没有返回值,也不能抛出受检查异常 Callable 一个执行任务有返回值,也能抛出受检查异常 Future 表示执行任务的生命周期,任务的生命周期为:创建,提交,开始, ...
- 再回首:object是什么
前言 这里说得object是C#语言中的类型object,也是Framework中的System.Object(两者是一个意思).如其名“面向对象编程”对象就是Object.既然提到面向对象,自然就想 ...
- 【Chat】实验 -- 实现 C/C++下TCP, 服务器/客户端 "多人聊天室"
本次实验利用TCP/IP, 语言环境为 C/C++ 利用套接字Socket编程,以及线程处理, 实现Server/CLient 之间多人的聊天系统的基本功能. 结果大致如: 下面贴上代码(参考参考.. ...
- python——高级特性
切片操作符 Python提供了切片(Slice)操作符,切片操作十分有用,可以通过切片轻松取出某一段数列.比如前10个数: #slice切片操作符 取前10个元素 L=list(range(0,100 ...
- Visual Studio for Mac 安装无响应或者无法连接网络等解决方法
1.无法连接到网络 2.点击安装和更新无响 这两种情况造成的原因都是由于被墙的原因,第一种情况有部分可以通过fq解决,第二种情况是我遇到过的 反正我全局也失败 这里给出一个我自己用过的解决方案 查看控 ...
- C#Json数据类型
引用所对应框架的类库文件,下载地址:http://json.codeplex.com/ 在一般处理程序axhx中: 引用的命名空间: using System.IO;using Newtonsoft. ...
- 关于JAVA是值传递还是引用传递的问题
1.概念 值传递:方法调用时,实际传入的是它的副本,在方法中对值的修改,不影响调用者的值. 引用传递:方法调用时,实际传入的是参数的实际内存地址,调用者和调用方法所操作的参数都指向同一内存地址,所以方 ...