一、第一种打包方式 webpack entry<entry> output

假设目录结构如下:

index.html是入口文件

打包app.js为bundle.js如下

app.js

当使用amd模块规范多出了0.bundle.js,是由于amd异步加载模块,单独形成一个chunk:

二、第二种打包方式

webpack --config  webpack.conf.js

如果想要直接webpack打包,把webpack.conf.js改为webpack.config.js

配置文件[name]是entry里面的key,[hash:5]是MD5,是文件的数字指纹

前端工程化-webpack(打包JS)(二)的更多相关文章

  1. 前端工程化 Webpack基础

    前端工程化 模块化 (js模块化,css模块化,其他资源模块化) 组件化 (复用现有的UI结构.样式.行为) 规范化 (目录结构的划分.编码规范化.接口规范化.文档规范化.Git分支管理) 自动化 ( ...

  2. 使用webpack打包js文件(隔行变色案例)

    使用webpack打包js文件(隔行变色案例) 1.webpack安装的两种方式 运行npm i webpack -g全局安装webpack,这样就能在全局使用webpack的命令 在项目根目录中运行 ...

  3. 前端小白webpack学习(二)

    前一篇写了自我总结的webpack定义:为JavaScript服务的静态模块打包器 和几大基本概念 entry.output.plugins.loaders等.指路前端小白webpack学习(一) 下 ...

  4. webpack打包js文件

    当输入 webpack 输入指令 npm run dev  后会自动启动一个浏览器 需要借鉴插件 open-browser-webpack-plugin 下载:npm install open-bro ...

  5. 27、前端知识点--webpack面试题(二)

    webpack面试题总结 本文主要是对webpack面试会常被问到的问题做一些总结,且文章会不断持续更新 1.webpack打包原理 把所有依赖打包成一个 bundle.js 文件,通过代码分割成单元 ...

  6. webpack 打包js和css

    首先进行全局安装webpack npm install -g webpackcmd跳转到项目的文件夹,安装webpack npm install --save-dev webpack接着需要packj ...

  7. 前端工程化webpack(一)

    webpack 的基本用法   1.app.js 引入模块 import moduleLog from './module.js' //引入moduleLog从./module.js 2.module ...

  8. webpack——打包JS

    1.在文件中打开命令行,输入code ./    (我的编译器是vs code) 2.然后会弹出编译器,在编译器内新建js文件app,sum app.js import sum from './sum ...

  9. webpack打包js,css和图片

    1.webpack打包默认配置文件webpack.config.js 2.打包js文件:有这个文件并配置可以直接在cmd上webpack打包,没有这个文件要在cmd上输入 webpack main.j ...

随机推荐

  1. Java设计模式--缺省适配器模式

    我认为这个模式比较常见,还记得我们学习Swing的时候吗,有没有见过很多Adapter?那时候不知道Adapter的意义所在,但至少知道他能够省去我们不需要的实现. 这个社会有N中职业(job),但是 ...

  2. poj 3320(尺取法)

    传送门:Problem 3320 参考资料: [1]:挑战程序设计竞赛 题意: 一本书有 P 页,每页都有个知识点a[i],知识点可能重复,求包含所有知识点的最少的页数. 题解: 相关说明: 设以a[ ...

  3. 最短路算法模板--SPFA

    初见SPFA时,直接认成了优先队列优化的Dijkstra,经过几位大佬的指点,我终于明白了他们的差异. Dijkstra是保证已经出队过的点不再入队,SPFA是已经在队列中不再入队.比较起来,SPFA ...

  4. 移动端自动化测试-Windows-Android-Appium环境搭建

    1.安装JDK,并且配置好[JAVA_HOME]和[path]两个环境变量 1.1.JAVA_HOME:指向JDK的安装路径(如:C:\Program Files (x86)\Java\jdk1.7. ...

  5. Math对象小笔记

    来,总结下Math对象的常用方法和属性 1.E  自然对数的底数 Math.E; //2.718281828459045 2.PI 圆周率 Math.PI; //3.141592653589793 3 ...

  6. mac安装神器brew

    安装方法:命令行输入 /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/ma ...

  7. Hibernate SQL查询 addScalar()或addEntity()【转】

    本文完全引用自: http://www.cnblogs.com/chenyixue/p/5601285.html Hibernate除了支持HQL查询外,还支持原生SQL查询.          对原 ...

  8. 挖洞姿势:特殊的上传技巧,绕过PHP图片转换实现远程代码执行(RCE)

    我使用了一个特殊的图片上传技巧,绕过PHP GD库对图片的转换处理,最终成功实现了远程代码执行. 事情是这样的.当时我正在测试该网站上是否存在sql注入漏洞,不经意间我在网站个人页面发现了一个用于上传 ...

  9. 04-接口隔离原则(ISP)

    1. 背景 类A通过接口I依赖类B,类C通过接口I依赖类D,如果接口I对于类B和类D来说不是最小接口,则类B和类D不得不去实现它们不需要的方法. 2. 定义 一个类对另一个类的依赖应该建立在最小的接口 ...

  10. C++字符串(srtring)反转

    对称平方数 题目描述 打印所有不超过n(n<256)的,其平方具有对称性质的数.如11*11=121. 分析: 1.首先使用函数to_string将int转化为string: 2.然后将字符串反 ...