一、第一种打包方式 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代码示例（5）

    /** * 需求分析:从键盘输入5名学员某门课程的笔试成绩,并求出五门成绩的总成绩和平均成绩 * @author chenyanlong * 日期:2017/10/14 */ package com. ...

  2. springboot的注解详解

    配置类相关: @PropertySource(value = "classpath:test.properties")   //我们都把配置文件写到application.yml中 ...

  3. SparkRDD简介/常用算子/依赖/缓存

    SparkRDD简介/常用算子/依赖/缓存 RDD简介 RDD(Resilient Distributed Dataset)叫做分布式数据集,是Spark中最基本的数据抽象,它代表一个不可变.可分区. ...

  4. Python复习笔记（一）高级变量类型

    目标 列表元组 字典 字符串 公共方法 变量高级 01. 列表 02. 元组 03. 字典 04. 字符串 1)判断类型 - 9 2) 查找和替换 - 7 3) 大小写转换 - 5 4) 文本对齐 - ...

  5. es6三个点运算符

    ...扩展运算符:可以将数组或对象里面的值展开 const b = {a:1,b:2} console.log({...b,c:3}); //{a:1,b:2,c:3} 一定程度上可以替代apply方 ...

  6. string和list互转

    import string str = 'abcde' list = list(str) OR list = str.split() list ['a', 'b', 'c', 'd', 'e'] st ...

  7. （一）求 int 型数据在内存中存储时 1 的个数

    题目:求 int 型数据在内存中存储时 1 的个数 描述:输入一个 int 型数据,计算出该 int 型数据在内存中存储时 1 的个数 运行时间限制: 10 sec 内存限制:128 MByte 输入 ...

  8. Java基础编程题——分别统计出其中汉字、英文字母、空格、数字和其它字符的个数

    package com.yangzl.basic; import java.util.Scanner; /** * 分别统计出其中汉字.英文字母.空格.数字和其它字符的个数 * @author Adm ...

  9. cocos2d-x 2.1.4 项目配置过程

    http://cocos2d-x.org 下载cocos2d-x 2.1.4 使用project-creator.py脚本创建Cocos2d-win32 Application项目 1.先下载Wind ...

  10. 第18月第16天 statusBar

    1. 我们都知道要改状态栏statusBar的颜色很简单,只要如下一行代码就可以, [[UIApplicationsharedApplication]setStatusBarStyle:UIStatu ...