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笔记三 管理输出的更多相关文章

  1. webpack笔记二 管理资源

    webpack笔记二 管理资源 webpack最出色的功能之一就是除了引入JavaScript,还可以通过loader引入任何其它类型的文件. 加载CSS 为了在JavaScript模块中import ...

  2. webpack学习_管理输出(管理资源插件)

    管理输出步骤 Step1:在src新建文件print.js添加逻辑 Step2:在src/index.js import 引用新添加的逻辑 Step3:更新dist/index.html文件,修改引入 ...

  3. Git学习笔记三--管理修改、撤销修改、删除文件

    1.管理修改 什么是修改?比如你新增了一行,这就是一个修改,删除了一行,也是一个修改,更改了某些字符,也是一个修改,删了一些又加了一些,也是一个修改,甚至创建一个新文件,也算一个修改. 为什么说Git ...

  4. [C语言学习笔记三]格式化输出和输入

    使用 printf 函数来输出,使用 scanf 函数来输入 在 printf 函数中使用变量,需要使用占位符代替. int 型一般存储整数,使用 %d 代替 long long int 型一般存储长 ...

  5. django笔记三之admin的管理

    django笔记三之admin的管理 设置自动admin应用 vim todos/settings.py INSTALLED_APPS = ( 'django.contrib.admin', 新版本已 ...

  6. Webpack笔记（一）——从这里入门Webpack

    准备了挺久,一直想要好好深入了解一下Webpack,之前一直嫌弃Webpack麻烦,偏向于Parcel这种零配置的模块打包工具一些,但是实际上还是Webpack比较靠谱,并且Webpack功能更加强大 ...

  7. 学习笔记(三)--->《Java 8编程官方参考教程（第9版）.pdf》:第十章到十二章学习笔记

    回到顶部 注:本文声明事项. 本博文整理者:刘军 本博文出自于: <Java8 编程官方参考教程>一书 声明:1:转载请标注出处.本文不得作为商业活动.若有违本之,则本人不负法律责任.违法 ...

  8. 物联网学习笔记三：物联网网关协议比较：MQTT 和 Modbus

    物联网学习笔记三:物联网网关协议比较:MQTT 和 Modbus 物联网 (IoT) 不只是新技术,还是与旧技术的集成,其关键在于通信.可用的通信方法各不相同,但是,各种不同的协议在将海量“事物”连接 ...

  9. 《CMake实践》笔记三：构建静态库(.a) 与 动态库(.so) 及 如何使用外部共享库和头文件

    <CMake实践>笔记一:PROJECT/MESSAGE/ADD_EXECUTABLE <CMake实践>笔记二:INSTALL/CMAKE_INSTALL_PREFIX &l ...

随机推荐

  1. Types的Type访问模式

    在Types类中定义的访问都类如下: 1.MapVisitor类 2.SimpleVisitor 3.UnaryVisitor 4.TypeRelation

  2. 基础js--调试js

    1,逻辑错误 常见错误: 是否由于拼写错误而导致申明了新的变量? 是否在条件判定上出现了疏漏? 方法:使用开发者工具调试代码 2,代码错误 常见错误: 是否拼写错误? 是否使用中文的符号? 扩展: 1 ...

  3. Oracle 12c pdb自动启动

    PDB Pluggable Database是12c中扛鼎的一个新特性, 但是对于CDB中的PDB,默认启动CDB时不会将所有的PDB带起来,这样我们就需要手动alter pluggable data ...

  4. 解决angular-deckgrid高度不均衡和重加载的问题

    在项目中使用angular-deckgrid+ng-infinite-scroll实现瀑布流的无限加载.但是实际测试中发现deckgrid有2个比较严重影响体验的BUG: 每次添加新的card,整个d ...

  5. [转]OPEN(SAP) UI5 学习入门系列之一：扫盲与热身（上）

    本文转自:http://www.cnblogs.com/qianmarv/p/4671394.html 1 扫盲 什么是SAP Fiori? 了解SAP UI5必须要从SAP Fiori开始,两者概念 ...

  6. jquery点击按钮或链接，第一次与第二次执行不同的事件

    本文和大家分享一个jquery的实例,这个实例实现的是点击网页里的按钮或链接,第一次和第二次会执行不同的事件,也就是两个事件会轮流执行. <script language="javas ...

  7. select2 下拉搜索 可编辑可搜索 / 只可搜索

    官网 (http://select2.github.io/examples.html) <!--引入select2需要的文件--> <script type="text/j ...

  8. [javaSE] 基本数据类型对象包装类

    按照java面向对象的原则,每个基本类型都有对应的包装类 byte Byte short Short int Integer long Long boolean Boolean float Float ...

  9. (二)Apache服务器的下载与安装

    PHP的运行必然少不了服务器的支持,何为服务器?通俗讲就是在一台计算机上,安装个服务器软件,这台计算机便可以称之为服务器,服务器软件和计算机本身的操作系统是两码事,计算机自身的操作系统可以为linux ...

  10. Java 锁机制总结

    锁的种类 独享锁 VS 共享锁 独享锁:锁只能被一个线程持有(synchronized) 共享锁:锁可以被多个程序所持有(读写锁) 乐观锁 VS 悲观锁 乐观锁:每次去拿数据的时候都乐观地认为别人不会 ...