管理输出步骤

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. JPA中使用@Query注解多表联查

    原生SQL: select `user`.id, `user`.`name`,dept.name deptName,sum(sd.score) SumScore from `user` LEFT JO ...

  2. python_day04

    今日内容: 一.爬虫三部曲: 1.发送请求 2.解析数据 3.保存数据 4.解析详情页,获取视频地址 mport requests import re #正则模块 import uuid #uuid. ...

  3. Vue 幸运大转盘

    转盘抽奖主要有两种,指针转动和转盘转动,个人觉得转盘转动比较好看点,指针转动看着头晕,转盘转动时指针是在转盘的中间位置,这里要用到css的transform属性和transition属性,这两个因为不 ...

  4. 【论文阅读】CornerNet: Detecting Objects as Paired Keypoints

    以下内容将介绍ECCV2018的一篇目标检测的文章<CornerNet: Detecting Objects as Paired Keypoints>.该文章讲述了一个老子就是不用anch ...

  5. java之初见

    1.Java语言的了解: Java语言最早是由SUN公司创造出来的,1991年,SUN公司的green项目,Oak,随后SUN公司和后来的甲骨文公司又先后发布了java1.0,1.1,1.2,1.3, ...

  6. nginx（二）：基本应用

    配置文件详解 event段配置 worker_connections #; 每个worker进程所能够响应的最大并发请求数量: nginx最大并发响应数=worker_proceses * worke ...

  7. 老男孩python 自学day09 函数开始

    什么是函数? 函数用关键字def定义 语法: def 函数名(形参): 函数体 return 调用 函数名(实参) 命名规则:和变量一样 1. 由数字, 字母, 下划线组成 2. 不能数字开头. 更不 ...

  8. 【Android - 组件】之IntentFilter的匹配规则

    我们知道,Activity的启动模式分为两种,分别是显式启动和隐式启动.显式启动需要明确的指定被启动的对象的组件信息,包括包名和类名:而隐式启动需要 Intent 能够匹配目标组件的 IntentFi ...

  9. Android Native Binder，在Native层与App交互数据

    Binder底层是基于C实现的,因此可以作为Native进程与App层交互数据的渠道.其应用场景为:Native Service.Hal驱动设置.应用层JNI服务等. Android 4.4引入SEA ...

  10. Thinkphp5——实现分页(模型和Db分页，多种方法)

    现在很多网站的数据量的很多,如果全部在一页里显示效果不好,数据量太大,那怎么办?这时我们就需要分页,而分页的好处就是分段显示数据,这样页面就不用加载很多数据,需要时才加载,下面我教大家实现ThinkP ...