首先利用npm install webpack -g，这里我试过用cnpm安装不成功，不知道是什么回事，

webpack 用来压缩打包网站的一些插件和依赖包而存在的，

webpack  文件名  打包后的文件名

上图中，红框：哈希值（个人认为是不同文件的一个id，代表文件的唯一性【值得一提的是当文件作出修改后哈希值会发生变化，即在打包的文件中增加或者修改文件内容会发生变化】）黄框：webpack的版本号

在webpack里面需要插入更多的loader才能打包css文件：css-loader 、stytle-loader

打包html文件：html-webpack-plugin

webpack初入门的更多相关文章

  1. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  2. webpack入坑之旅（三）webpack.config入门

    这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...

  3. webpack快速入门——实战技巧：watch的正确使用方法，webpack自动打包

    随着项目大了,后端与前端联调,我们不需要每一次都去打包,这样特别麻烦,我们希望的场景是,每次按保存键,webpack自动为我们打包,这个工具就是watch! 因为watch是webpack自带的插件, ...

  4. webpack快速入门——CSS进阶：自动处理CSS3前缀

    为了浏览器的兼容性,有时候我们必须加入-webkit,-ms,-o,-moz这些前缀.目的就是让我们写的页面在每个浏览器中都可以顺利运行. 1.安装 cnpm i postcss-loader aut ...

  5. webpack快速入门——如何安装webpack及注意事项

    1.window+R键,输入cmd打开命令行工具,输入 mkdir XXXX(XX:文件夹名): 2.cd XXX 进入刚刚创建好的文件夹里,输入cnpm install -g webpack (安装 ...

  6. webpack快速入门——webpack3.X 快速上手一个Demo

    1.进入根目录,建两个文件夹,分别为src和dist 1).src文件夹:用来存放我们编写的javascript代码,可以简单的理解为用JavaScript编写的模块. 2).dist文件夹:用来存放 ...

  7. webpack快速入门——配置文件：入口和出口，多入口、多出口配置

    1.在根目录新建一个webpack.config.js文件,然后开始配置: const path = require('path'); module.exports={ //入口文件的配置项 entr ...

  8. webpack快速入门——配置文件：服务和热更新

    1.在终端安装 cnpm i webpack-dev-server --save-dev 2.配置好后执行 webpack-dev-server,这时候会报错 出现错误,只需要在pagejson里配置 ...

  9. webpack快速入门——CSS文件打包

    1.在src下新建css文件,在css文件下新建index.css文件,输入以下代码 body{ background:pink; color:yellowgreen; } 2.css建立好后,需要引 ...

随机推荐

  1. 基于github+hexo搭建个人博客（window）

    0x01 环境搭建 1.Node.js环境 下载Node.js安装文件:https://nodejs.org/en/download/ 根据系统选择相应安装包下载,安装过程一路Next,默认设置即可. ...

  2. C 预处理

    http://baike.baidu.com/link?url=0mwKZRcxHuNHa_TiwXgpQPS2S-YbOGCUJVSgZ9sb-qe-G-x4oIDZpWuZqiVNBsMYA4HT ...

  3. setcursor 与 showcursor

    Windows为鼠标光标保存了一个「显示计数」.如果安装了鼠标,显示计数会被初始化为0:否则,显示计数会被初始化为-1. 只有在显示计数非负时才显示鼠标光标.要增加显示计数,呼叫:ShowCursor ...

  4. CWnd与HWND的区别与转换

    CWnd与HWND的区别与转换 2011-10-20 10:29:30|  分类: VC学习库|字号 订阅     一.区别HWND是句柄,CWnd是MFC窗体类,CWnd中包含HWND句柄成员对象是 ...

  5. JavaScript的数据类型---最全，最详细的数据类型，高级的工程师从数据类型开始

    一.基本数据类型 1.字符串数据类型     var hello="你好啊";     var hello='你好啊';示例:<script language="j ...

  6. IOS设计模式第三篇之外观设计模式

    外观设计模式: 这个外观设计模式提供了一个单独的接口给复杂的子系统.而不是暴露用户的一组类和API,你仅仅暴露一个简单的同一的API. 下面的图片解释这个概念: API的用户根本不知道后面系统的复杂性 ...

  7. 【Python3】 PyV8的安装与使用

    centos7  python3.6.4 1 安装boost  :  PyV8 依赖于Boost yum install boost yum install boost-devel yum insta ...

  8. nginx+memcache实现页面缓存应用

    一.前言 nginx的memcached_module模块可以直接从memcached服务器中读取内容后输出,后续的请求不再经过应用程序处理,如php-fpm.django,大大的提升动态页面的速度. ...

  9. 【CF913G】Power Substring 数论+原根

    [CF913G]Power Substring 题意:T组询问,每次给定一个数a,让你求一个k,满足$2^k$的10进制的后$min(100,length(k))$位包含a作为它的子串.你只需要输出一 ...

  10. 【CF865C】Gotta Go Fast 二分+期望DP

    [CF865C]Gotta Go Fast 题意:有n个关卡需要依次通过,第i关有pi的概率要花ai时间通过,有1-pi的概率要花bi时间通过,你的目标是花费不超过m的时间通关,每一关开始时你都可以选 ...