管理输出步骤

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. list,tuple,dict,set 思维导图整理

  2. Nginx下HTTP强制重定向至HTTPS

    Nginx下HTTP强制重定向至HTTPS 对于nginx来说,配置http强制重定向至https有多种多样的写法.可以直接rewrite,也可以用301重定向.但是直接拷贝网上的配置往往会出现问题, ...

  3. GitHub上优秀的开源项目（转载）

    转载出处:https://github.com/Trinea/android-open-project 第一部分 个性化控件(View) 主要介绍那些不错个性化的 View,包括 ListView.A ...

  4. element 根据某多个属性合并列

    日常渲染 methods: { arraySpanMethod({ row, column, rowIndex, columnIndex }) { // 没办法循环判断具体是那一列 所以就只好写了多个 ...

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

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

  6. 老男孩 python 自学 打印05 dict 复习总结

    dict 语法       {key : value} key 必须是可hash的 可哈希的目前有int . str . tuple .bool value 是没有任何限制的 2. 字典的相关操作 增 ...

  7. Java基础面试题及答案（五）

    Java Web 64. jsp 和 servlet 有什么区别? jsp经编译后就变成了Servlet.(JSP的本质就是Servlet,JVM只能识别java的类,不能识别JSP的代码,Web容器 ...

  8. Rust 入门 (三)_下

    这部分我们学习 rust 语言的 变量.数据类型.函数.注释.流程控制 这五个方面的内容.前文介绍了前两个内容,本文介绍后三个内容. 函数 函数在 rust 代码普遍存在,我们也已经见过了它的主函数 ...

  9. 同步工具类 CountDownLatch 和 CyclicBarrier

    在开发中,一些异步操作会明显加快执行速度带来更好的体验,但同时也增加了开发的复杂度,想了用好多线程,就必须从这些方面去了解 线程的 wait() notify() notifyall() 方法 线程异 ...

  10. 相关性不一定等于因果性：从 Yule-Simpson’s Paradox 讲起

    1. 两件事伴随发生,不代表他们之间有因果关系 - 从一些荒诞相关性案例说起 在日常生活和数据分析中,我们可以得到大量相关性的结论,例如: 输入X变量,有98%置信度得到Y变量 只要努力,就能成功 只 ...