webpack3.x的entry,output,module解析-js教程-PHP中文网

首页

web前端

js教程

webpack3.x的entry,output,module解析

php中世界最好的语言

Mar 10, 2018 pm 01:56 PM

module output

这次给大家带来webpack3.x的entry,output,module解析，使用webpack3.x的entry,output,module的注意事项有哪些，下面就是实战案例，一起来看一下。

　webpack作为如今的热门工具跟前端三大框架密不可分,是有学一下的必要的;

　　先决条件: 有node环境,有npm工具;(新版的node自带了npm工具);

　　下面开始一步一步的做吧:

　　1.先选择一个目录作为你的项目存放的位置;

　　cmd 工具进入到项目目录(假设我的是D:\webpack-demo4); 然后使用nmp安装webpack: npm install webpack --save-dev("不推荐全局安装");

完了之后使用 npm init 你的项目目录,后面都是一些描述性的内容,如何想省略直接npm init -y;

　dist和src目录是自己创建的,dist用于存放编译后的文件,src用于存放源文件; node_modules是刚初始化生成的文件夹,里面各种模块,以后关于与项目构建有关的模块全部都是(也应该是)放在此目录下的;webpack.config.js是webpack配置项;package.json是node操作一些配置(其实也就是针对webpack);

　　webpack.config.js配置(暂时这么多);

首先说一下这个配置用来干嘛的,其实就是告诉webpack怎么打包;一一说明一下;

　　entry:是入口文件;意思是从哪个js文件开始的;说一下这个相对路径,这个是你cmd命令行进入那个目录开始计算的;比如我的是:

[ webpack-demo4] -->下面有dist目录,有src目录; 那么我运行配置的时候应该到webpack-demo4下面然后 webpack --config webpack-config.js(或直接webpack);

output为设置的输出:以上的设置结果是,webpack打包后会在dist目录下的js文件夹生成app.bundle.js和print.bundle.js name其实就是 entry中的键;

module中存放了两个加载文件和css的加载器;

当然在运行webpack之前要 npm install style-loader css loader --save -dev 和npm install file-loader --save -dev;安装的时候要cd到webpak-demo4目录;

　　现在我在dist目录下有一个自己写的index002.html:如下;

<html>
  <head>
   <title>Output Management(输出)</title>
    <meta charset=utf-8>
  </head>
  <body> 
  </body>
</html>
<script src="./js/app.bundle.js"></script>

登录后复制

在src目录有俩个js文件;

　index.js
import _ from &#39;lodash&#39;;     
import &#39;../css/style1.css&#39;;
import icon1 from &#39;../img/aa00.jpg&#39;;
import printMe from &#39;./print.js&#39;;
function component() {
    var div = document.createElement(&#39;div&#39;);
    var btn = document.createElement(&#39;button&#39;);
    // Lodash（目前通过一个 script 脚本引入）对于执行这一行是必需的
    div.innerHTML = _.join([&#39;Hello&#39;, &#39;webpack&#39;], &#39; &#39;);
    var img = new Image();
    img.src = icon1;
    div.appendChild(img);
    btn.innerHTML = &#39;Click me and check the console!&#39;;
    btn.onclick = printMe;
    div.appendChild(btn);
    return div;
}
document.body.appendChild(component()); //放回元素给到页面;

登录后复制

说些重要的; import '../css/style1.css'; 是在相对于index.js的上级目录(src)下的css下有个style1.css;比如我写了 body的背景时蓝色;同样在img下存放了一张图片;

再分别引入了图片和print.js;

print.js:

export default function printMe() {    console.log(&#39;print.js...&#39;);}
    完成之后,直接

登录后复制

在cmd 命令 webpack一下;出现了图片和样式; 检查一下dist目录下会出现打包后的js以及图片;上面示例了webpack如何打包css,图片等一些简单操作;

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7478

CakePHP 教程

1377

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

ModuleNotFoundError：如何解决Python找不到模块错误？ Jun 25, 2023 pm 09:30 PM

在Python的开发过程中，经常会遇到找不到模块的错误。这个错误的具体表现就是Python在导入模块的时候报出ModuleNotFoundError或者ImportError这两个错误之一。这种错误很困扰，会导致程序无法正常运行，因此在这篇文章里，我们将会探究这个错误的原因及其解决方法。ModuleNotFoundError和ImportError在Pyth

Java9新特性Module模块化编程的方法 May 19, 2023 pm 01:51 PM

在Java9版本中Java语言引入了一个非常重要的概念：模块(module)。如果对javascript代码模块化管理比较熟悉的小伙伴，看到Java9的模块化管理，应该有似曾相识的感觉。一、什么是Javamodule？与Java中的package有些类似，module引入了Java代码分组的另一个级别。每个这样的分组（module）都包含许多子package包。通过在一个模块的源代码文件package的根部，添加文件module-info.java来声明该文件夹及其子文件夹为一个模块。该文件语法

前端输出设置 Feb 19, 2024 am 09:30 AM

前端output配置，需要具体代码示例前端开发中，output配置是一项非常重要的配置。它用于定义项目打包后生成的文件路径、文件名以及相关的资源路径等。本文将介绍前端output配置的作用、常用配置选项，并给出具体的代码示例。output配置的作用：output配置项用于指定项目打包后生成的文件路径和文件名。它决定了项目的最终输出结果。在webpack等打包

如何解决Linux系统下挂载ntfs盘时出现'module fuse not found'的问题？ Dec 31, 2023 pm 03:17 PM

1.首先确认一下Linux系统内核[root@localhost~]#uname-r-p2.6.18-194.el5i6862.到http://sourceforge.net/projects/linux-ntfs/files/下载对应内核的rpm包如果找不到完全一致的，可以找最相近的。我的就没有找到完全一致的，我下载的是：kernel-module-ntfs-2.6.18-128.1.1.el5-2.1.27-0.rr.10.11.i686.rpm3.安装rpm包rpm-ivhkernel-m

webpack核心概念之输出（Output） Aug 09, 2022 pm 06:32 PM

将所有的资源(assets)归拢在一起后，还需要告诉 webpack 在哪里打包应用程序。webpack 的 output 属性描述了如何处理归拢在一起的代码(bundled code)。下面本篇文章就来带大家深入了解一下webpack核心概念中的输出（Output），希望对大家有所帮助！

Vuex Module-状态仓库分割的使用介绍 Aug 10, 2022 pm 04:01 PM

vuex主要包含以下五个部分:State、Getter 、Mutation 、Action 、Module ，下面就给大家介绍Vuex Module-状态仓库分割，希望对需要的朋友有所帮助！

PHP将 GD 图像输出到浏览器或文件 Mar 21, 2024 am 10:41 AM

这篇文章将为大家详细讲解有关PHP将GD图像输出到浏览器或文件，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。PHP将GD图像输出到浏览器或文件引言phpGD库为处理图像提供了强大的功能，允许您创建、编辑和输出图像。可以将图像输出到浏览器或文件，以进行显示或进一步处理。输出到浏览器要将图像输出到浏览器，请使用以下步骤：创建图像资源：使用imagecreate()函数创建图像资源。加载图像数据：使用imagepng()、imagejpeg()或imagegif()

wps2019表格输出为图片的操作步骤 Mar 27, 2024 pm 04:51 PM

1、使用wps2019打开要编辑的表格。2、点击wps2019窗口左上角的【文件】菜单项。3、在弹出的文件下拉菜单中，点击【输出为图片】的菜单项。4、这时就会弹出输出为图片的窗口，在窗口中选择输出质量的格式。5、点击格式下拉菜单，在弹出菜单中选择要保存为图片的格式。6、最后点击保存到后面的选项按钮，设置要保存图片的位置。7、点击确定后，一会就会弹出输出成功的提示了。

See all articles

webpack3.x的entry,output,module解析

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题