webpack

首页将 style.css 也看成是一个模块，然后用 css-loader 来读取它，再用 style-loader 把它插入到页面中。

一、介绍

Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。

二、安装   

安装环境node.js下的npm  
 

在指定的文件中eg:

 E:\workfiles\webpack-simple

上面npm  install 表示在这个文件中配置webpack，当然你全局配置了在这里就可以不用配置了

注意：这里安装完过后是没有webpack.config.js的，这是要自己配置的。当初我以为是自动生成找了好久

二、webpack.config.js的配置：（非默认config的命名的实现和调用）

entry:[]表示同一路径下层级相同的文件 可以是个string   可以是个对象entry:{}   也可以是数组

output:{
  path:path.resolve(__dirname,'./dist/js'),//这里是两个短横
    filename:'[name]-[hash].bundle.js'
}

三、hash值

hash       一般用于表示唯一值

chunkhash  里面如果哪个文件内容更改了那么他本生的hash值就会改变，其他的不变   ------作为文件更新的依据

再次看了一下还是很乱啊，等什么时候多看看官网，重新整理一下，对于这样的总结，就勉强算作是初入门的记录吧，不足和混乱之处还请大家见谅啊

题外话：

1、mkdir   

百度百科链接：

http://baike.baidu.com/link?url=bGM3eau-BaR1FBAKv4Dp4lvqr6KmvvFn3xRVYvV9dbmuNEXp9ktCH3Uki3vBYKryat93481iC9t2OIfIDeX1NK

unix命令

在工作目录下，建立一个名为 AAA 新的子目录 : 　 mkdir AAA

在工作目录下的 BBB 目录中，建立一个名为 Test 的子目录。若 BBB 目录原本不存在，则建立一个： 　 mkdir -p BBB/Test（注：本例若不加 -p，且原本 BBB目录不存在，则产生错误。）

语法：mkdir [选项] dir-name

说明：该命令创建由dir-name命名的目录。要求创建目录的用户在当前目录中（dir-name的父目录中）具有写权限，并且dirname不能是当前目录中已有的目录或文件名称。

2、atom

Github Atom 详细介绍

Atom 是 Github 专门为程序员推出的一个跨平台文本编辑器。具有简洁和直观的图形用户界面，并有很多有趣的特点：支持CSS，HTML，JavaScript等网页编程语言。它支持宏，自动完成分屏功能，集成了文件管理器。

https://www.oschina.net/p/github-atom 开源项目网址   https://atom-china.org/社区网址

看慕课视频老师是直接用 E:\workfiles\webpack-simple\webpackdemo>atom ./这样打开文件所以再次的查看了一下，觉得很有用

二、webpack的使用和介绍

webpack只能够直接读取和编译js或者json格式的代码。其他类型的例如css，vue，png等这些是需要通过不同的loadder进行编译生成的。

webpack主要的模块分为  loadder  plugin  等