一、第一种打包方式 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. kindeditor上传图片的大小在哪控制

    请修改修改了multiimage.js 的imageSizeLimit = K.undef(self.imageSizeLimit, '3MB') 大小设置级可以

  2. Linux命令之ll

    ll命令 用处:以长格形式列出当前目录下的所有文件,每个文件的长度和创建时间不同. 用法:输入 ll 示例: 前面的一大串字母的意思,第一个要么是d要么是-,d的意思就是目录,-的意思就是文件.其后的 ...

  3. 在IIS上启用Gzip压缩(HTTP压缩)

    一.摘要 本文总结了如何为使用IIS托管的网站启用Gzip压缩, 从而减少网页网络传输大小, 提高用户显示页面的速度. 二.前言. 本文的知识点是从互联网收集整理, 主要来源于中文wiki.  使用Y ...

  4. IDEA中设置Tab多行显示、打开过多自动关闭的方法

    IDEA中默认Tab是单行显示的,而且默认允许同时打开10个Tab,继续打开Tab会根据规则关闭之前打开的Tab.但是可以通过设置来符合自己的使用习惯. 一.打开Tab过多自动关闭 1.选择File→ ...

  5. 线程本地变量ThreadLocal (耗时工具)【原】

    线程本地变量类 package king; import java.util.ArrayList; import java.util.List; import java.util.Map; impor ...

  6. 14. Spring Boot的 thymleaf公共页抽取

    5).CRUD-员工列表实验要求:1).RestfulCRUD:CRUD满足Rest风格:URI: /资源名称/资源标识 HTTP请求方式区分对资源CRUD操作   普通CRUD(uri来区分操作) ...

  7. python中修改工作目录

  8. C# 对图片加水印

    using System; using System.Collections; using System.Data; using System.Linq; using System.Web; usin ...

  9. JavaScript之浏览器兼容问题与IE(神经病一样的浏览器)

    IE是最讨厌的浏览器,没有之一.----题记 废话不说,粘上大图~

  10. snmp 发送类型ASN_OBJECT_ID

    参考链接: http://blog.csdn.net/yin138/article/details/50388878 ,,,,,,,,,}; int ret = snmp_set_var_typed_ ...