webpack是什么

是一个模块打包器

模块化历史

//moduleB.js
var moduleA = require('./moduleA')

// moduleB.js
require(['./moduleA'], function(moduleA){
console.log(moduleA.name)
})

// moduleB.js
import name from './moduleA'
console.log(name)

config.js是node的文件，浏览器是看不到的，只有开发者看得到
配置文件的写法

webpack.config.js

说明：有了配置文件，就可以直接运行webpack，然后根据你配置的入口和输出位置来进行文件的打包，就不用像前面那样写一长串的命令行来指定要打包的文件，和输出的位置。
运行配置文件

修改scripts实现效果

说明：这里只写webpack就能实现效果是因为有两个默认：1. 输入webpack，node会默认在当前目录的node_modules下寻找webpack工具包。 2. webpack会默认在当前目录下寻找webpack.config.js来作为它的配置文件。因为有这两个默认的存在，可以直接通过webpack命令实现效果。
引入变量

引入其他模块的变量
在ES6中，如果对象中的变量为name:name，那么可以直接写name作为对象中的变量

index.js写法

1.配置图片处理loaders

配置loaders

2.缺少模块，进行安装

image.png

3.安装缺少的模块后，继续build，产生图片

生成图片

生成图片请求

生成img标签

webpack-dev-server如果是3.x的话，webpack必须是4.x才不会报此TypeError: Cannot read property 'compile' of undefined错误, 同理如果webpack是3.x，则webpack-dev-server必须是2.x

安装
npm install webpack-dev-server --save-dev
运行webpack dev server
出现提示，项目在localhost8080下运行，此时打开这个地址，就能预览页面

文件目录结构

运行

看看根目录下都有啥

查看请求

请求

修改css，查看是否能自动刷新并查看效果

出现问题
解决前面出现的不能刷新效果的问题
原因：首先，原因是我们访问的是dist目录，而其中的index.html引用的是dist目录下的bundle.js，这个文件是死的，也就是我们在修改css文件后，这个js文件是没有被重新build的，而根目录（也就是localhost：8080下）下的bundle.js是动态的，是活的，所以我们要引用这个js
引用根目录下的bundle.js
下图这种写法是在引用dist目录下的bundle.js，这个文件是死的。为什么呢？其实现在8080根目录下和dist目录下都有bundle.js，但是dist下的那个是死的，8080下这个是动态的，因为devserver会默认将你所有的静态资源都能在8080下访问到，只有一个bundle.js是动态的

原来的写法

下图这种写法在引用8080根目录下的bundle.js

修改代码

效果
引用dist目录下的bundle.js

dist目录下的bundle.js

总结：webpack-dev-server其实是会默认将当前目录的所有静态文件放到localhost下，但只有一个文件是动态的，就是默认的根目录下的bundle.js，所以需要引用localhost下的bundle.js，但是我们可以通过配置来实现依赖那个js文件

回到最开始，webpack其实就是个打包器，就像刚刚上面所实现的，将所有东西，图片、js、css、html都打包成一个bundle.js，然后这些东西通过一个文件放到页面上。还有另一个概念，就是为模块化而生的打包器，就像我们刚刚生成的bundle，就是一个模块，它内部有自己的逻辑，也就是各个文件之间的逻辑，不受别人影响，也不影响别人，就是一个独立的模块，这样就让我们的代码条理清晰，不会出现写一个1000代码的js，而是10个100行代码的js。

为模块化而生的打包器
bundle.js有问题
这时的bundle.js还是从缓存中获取的，如果我们升级了呢？那用户还是用的旧的，所以应该加个哈希，让用户能保持最新的代码来使用

bundle.js问题