管理输出步骤

Step1:在src新建文件print.js添加逻辑

Step2:在src/index.js import 引用新添加的逻辑

Step3:更新dist/index.html文件,修改引入的文件(引入的JS文件)

Step4:对应修改webpack/.config.js配置文件(entry和output)

Step5:执行npm prun build

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.js';

  function component() {

    var element = document.createElement('div');

+   var btn = document.createElement('button');

    element.innerHTML = _.join(['Hello', 'webpack'], ' ');

+   btn.innerHTML = 'Click me and check the console!';

+   btn.onclick = printMe;

+

+   element.appendChild(btn);

    return element;

  }

  document.body.appendChild(component());

dist/index.html

  <!doctype html>

  <html>

    <head>

-     <title>Asset Management</title>

+     <title>Output Management</title>

+     <script src="./print.bundle.js"></script>

    </head>

    <body>

-     <script src="./bundle.js"></script>

+     <script src="./app.bundle.js"></script>

    </body>

  </html>

webpack.config.js

  const path = require('path');

  module.exports = {

-   entry: './src/index.js',

+   entry: {

+     app: './src/index.js',

+     print: './src/print.js'

+   },

    output: {

-     filename: 'bundle.js',

+     filename: '[name].bundle.js',

      path: path.resolve(__dirname, 'dist')

    }

  };

 

设定HtmlWebpackPlugin插件

插件HtmlWebpackPlugin默认生成index.html文件,当执行 npm prun build的时候 生成的index.html文件会把原本的替换掉

Step1:安装HtmlWebpackPlugin插件

Step2:在webpack.config.js里面配置(主要是引入和在plugins里面写入)

Step3:npm run build运行

Step1

npm install --save-dev html-webpack-plugin

Step2

 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 Management'

+     })

+   ],

    output: {

      filename: '[name].bundle.js',

      path: path.resolve(__dirname, 'dist')

    }

  };

设定cleanWebpackPlugin 插件

每次构建前清理/dist文件夹,那么里面就只会生成用到的文件(减少用于的代码和文件)

  const path = require('path');

  const HtmlWebpackPlugin = require('html-webpack-plugin');

+ const { CleanWebpackPlugin } = require('clean-webpack-plugin');

  module.exports = {

    entry: {

      app: './src/index.js',

      print: './src/print.js'

    },

    plugins: [

+     new CleanWebpackPlugin(),

      new HtmlWebpackPlugin({

        title: 'Output Management'

      })

    ],

    output: {

      filename: '[name].bundle.js',

      path: path.resolve(__dirname, 'dist')

    }

  };

webpack学习_管理输出(管理资源插件)的更多相关文章

  1. 【webpack学习笔记】a02-管理资源

    在webpack 中,各种资源要引入,要用到module配置,比如css/图片/字体等等. 例如: module.exports = { entry: './src/app.js', //这是入口文件 ...

  2. webpack学习_资源管理(loader)

    webpack 最出色的功能之一就是,除了 JavaScript,还可以通过 loader 引入任何其他类型的文件 引入资源步骤 Step1:安装你需要的loader  Step2:在 module配 ...

  3. webpack学习_模块热替换(Hot Module Peaplacement)

    模块热替换(Hot Module Replacement 或 HMR) 是webpack提供的最有用的功能之一.允许在u女性是更新各种模块,而无需进行完全刷新. 启用HMR 承接之前的代码 webpa ...

  4. webpack学习_使用source map

    追踪错误和警告,JS提供sourcemap功能,将编译后的代码映射回原始代码(简单来说就是即使打包后,也可以检测知道该错误来自哪个JS文件).如果一个错误来自与b.js,那么source map回明确 ...

  5. webpack笔记三 管理输出

    webpack笔记三 管理输出 增加src/print.js: export default function printMe() { console.log('I get called from p ...

  6. linux kernel学习笔记-5内存管理_转

    void * kmalloc(size_t size, gfp_t gfp_mask); kmalloc()第一个参数是要分配的块的大小,第一个参数为分配标志,用于控制kmalloc()的行为. km ...

  7. Terraform模块Module管理，聚合资源的抽取与复用

    我最新最全的文章都在南瓜慢说 www.pkslow.com,欢迎大家来喝茶! 1 简介 最近工作中用到了Terraform,权当学习记录一下,希望能帮助到其它人. Terraform系列文章如下: T ...

  8. 【webpack学习笔记】a03-管理输出

    webpack 中输出管理主要运用了两个插件: html-webpack-plugin clean-webpack-plugin 这两个插件可以满足常规的输出管理需求. html-webpack-pl ...

  9. Docker学习笔记 ---存储与管理

    存储管理 为了适应不同平台不同场景的存储需求,Docker提供了各种基于不同文件系统实现的存储驱动来管理实际的镜像文件 元数据管理 镜像在设计上将元数据和文件存储完全隔离.Docker管理元数据采用的 ...

随机推荐

  1. Qt Framework 问题之 framework/Versions/A:bundle format unrecognized, invalid, or unsuitable

    在解决标题提到的问题之后,先来介绍下Qt Framework一些基本知识. 基于QT的Mac端工程,在打包时需要对所有需要嵌入到APP的framework及dylib文件进行手动签名处理. 一.签名处 ...

  2. 使用 Angular 打造微前端架构的 ToB 企业级应用

    这篇文章其实已经准备了11个月了,因为虽然我们年初就开始使用 Angular 的微前端架构,但是产品一直没有正式发布,无法通过生产环境实践验证可行性,11月16日我们的产品正式灰度发布,所以是时候分享 ...

  3. 最省钱的爬虫解决方案，比IP代理更划算

    现状: 1.网上提供代理IP池的解决方案非常多,价格也有高有低,包天/月/年的都有,品质都要靠自己去尝试. 2.试过之后,发现成本相对高,每月要花200~300元, 所以希望研究一下是否有更性价比高的 ...

  4. Linux 基本命令操作 （文件共享） 一

    前言:在学习Linux过程中,遇到一些经典而又基本的命令操作,想记录下来去帮助刚学Linux的同学.下面是有关相关的操作,我会进行详细的分解步骤:希望能够帮助到你们.由于时间仓促,再加上笔者的能力有限 ...

  5. 【设计模式大法】Iterator模式

    Iterator模式 --一个一个遍历 在Java中的for语句中 i++的作用是让 i 的值在每次循环后自增1,这样就可以访问数组中的下一个元素.下下一个元素.再下下一个元素,也就实现了从头至尾逐一 ...

  6. python matplotlib 画图表（点状图）

    首先,选择自己希望画的图:在官方网站就可以直接点击图,然后就会出现源代码: http://matplotlib.org/gallery.html

  7. Scrapy持久化存储-爬取数据转义

    Scrapy持久化存储 爬虫爬取数据转义问题 使用这种格式,会自动帮我们转义 'insert into wen values(%s,%s)',(item['title'],item['content' ...

  8. 第五章 Unity中的基础光照（3）

    目录 1. 在Unity Shader中实现高光反射光照模型 1.1 实践:逐顶点光照 1.2 逐像素光照 1.3 Blinn-Phong光照模型 2. 召唤神龙:使用Unity内置的函数 @ 1. ...

  9. SpringBoot 发送邮件功能实现

    背景 有个小伙伴问我你以前发邮件功能怎么弄的.然后我就给他找了个demo,正好在此也写一下,分享给大家. 理清痛点 发送邮件,大家可以想一下,坑的地方在哪? 我觉得是三个吧. 第一:邮件白名单问题. ...

  10. 区块链学习笔记：D03 区块链在各行业领域的应用（一）

    今天主要是学习了区块链在金融和供应链领域的应用,重点体现了区块链多方参与.透明可信.防篡改防抵赖的技术优势 区块链的应用场景最早是在金融行业应用较多,后续逐步扩展到传统行业,如:供应链.政务服务.物联 ...