管理输出步骤

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. Mac上安装并配置JDK

    1,下载 点击 官网 ,进入下载界面, 同意协议内容 找到对应的Mac版本, 2,安装 安装下载下来的文件,期间会要求输入一次电脑密码,然后自动安装完. 如果显示文件已经损坏,打开 终端 输入 sud ...

  2. 你必须知道的容器日志 (1) Docker logs & logging driver

    本篇已加入<.NET Core on K8S学习实践系列文章索引>,可以点击查看更多容器化技术相关系列文章.监控和日志历来都是系统稳定运行和问题排查的关键,在微服务架构中,数量众多的容器以 ...

  3. mac如何开启两个vmware虚拟机

    转载链接:https://blog.csdn.net/aifore/article/details/87833088

  4. IDEA用Maven连接MySQL的jdbc驱动，并操作数据库

    1.在IDEA里创建Maven项目 1.1.点击Create New Project   1.2.选择Maven,JDK这里用的是1.8,点击Next  1.3.填入“组织名”.“项目名”,版本是默认 ...

  5. CSV数据存取

    CSV数据的读取十分地简单 分为两部分 读 读取csv文件可以使用csv模块下的reader(f)以及DictReader(f) mport csv with open("text.csv& ...

  6. [FPGA]Verilog利用PWM调制巧妙完成RGB三色彩虹呼吸灯(给简约的题目以美妙的解答)

    概述 实现彩虹呼吸灯 题目就是这么简短,但这是目前我碰到的最有意思的一道题目,因为他有无数种解决方法,并且每一种都是那么高级或者巧妙,比如 可以利用3路不同初相的PWM调制信号驱动三颗RGB灯重叠呼吸 ...

  7. day 27 网路编程 面向对象多继承

    知识补充: 字符串转化为字节 string1  = input(“请输入你的名字”) string1.encode('utf-8') 字节转化为字符串 byte1 = b"alex" ...

  8. java中sleep()和wait()区别

    1,sleep方法是Thread类的静态方法,wait()是Object超类的成员方法 2,sleep()方法导致了程序暂停执行指定的时间,让出cpu该其他线程,但是他的监控状态依然保持者,当指定的时 ...

  9. 聚类-DBSCAN基于密度的空间聚类

    1.DBSCAN介绍 DBSCAN(Density-Based Spatial Clustering of Applications with Noise,具有噪声的基于密度的聚类方法)是一种基于密度 ...

  10. MySQL CRUD使用之小总结

    总结一下最近碰到的一些关于MySQL CRUD方面的语句. 在使用pymysql的executemany方法时,需要注意的几个问题: 1.在写sql语句时,不管字段为什么类型,占位符统一使用%s,且不 ...