# Part4-Webpack与脚手架
## 一、Webpack(熟悉)
> 从本质上来说，webpack是一个**静态模块打包工具**。
>
> 要想让我们写好的模块化代码在各式各样的浏览器上能做到兼容，就必须借助于其他工具；而webpack的其中一个核心就是让我们可以进行模块化开发，并帮我们处理模块间的依赖关系。不仅仅是Javascript文件，我们的css、图片、json文件等在webpack中都可以当作模块来使用，这就是webpack的模块化概念。
### 1. gulp和webpack
> Gulp侧重于前端开发的 **整个过程** 的控制管理（像是流水线），我们可以通过给gulp配置不同的task（通过Gulp中的gulp.task()方法配置，比如启动server、sass/less预编译、文件的合并压缩等等）来让gulp实现不同的功能，从而构建整个前端开发流程。
**gulpfile.js**
```js
var gulp = require('gulp');
var uglify = require('gulp-uglify'); //压缩代码
// 压缩js
gulp.task('uglify',function(){
var combined = combiner.obj([
gulp.src('src/scripts/**/*.js'), //需要压缩的js文件路径
sourcemaps.init(),
uglify(), //压缩js
sourcemaps.write('./'),
gulp.dest('dest/scripts') //生成的js文件的目录
]);
});
//默认任务
gulp.task('default',['uglify']);
```
> Webpack有人也称之为 **模块打包机** ，由此也可以看出Webpack更侧重于模块打包，当然我们可以把开发中的所有资源（图片、js文件、css文件等）都可以看成模块，最初Webpack本身就是为前端JS代码打包而设计的，后来被扩展到其他资源的打包处理。Webpack是通过loader（加载器）和plugins（插件）对资源进行处理的。
### 2. webpack初体验
#### 1. 生成项目依赖文件
```js
// 执行后生成package.json文件
npm init -y
```
#### 2. 安装依赖
```js
// 最后的参数-D是安装到package.json的开发依赖devDependencies(开发环境)对象里，也可以用 --save-dev代替
npm install webpack webpack-cli -D
// -S是--save的简写，这样安装的话，会安装到dependencies(生产环境)对象里，也可以用 --save代替
npm install jquery -S
```
```js
// package.json
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^5.58.1",
"webpack-cli": "^4.9.0"
},
"dependencies": {
"jquery": "^3.6.0"
}
}
```
> devDependencies与dependencies的区别：
>
> 在发布npm包的时候，本身dependencies下的模块会作为依赖，一起被下载；devDependencies下面的模块就不会自动下载了；但对于项目而言，npm install 会自动下载devDependencies和dependencies下面的模块。
### 3.创建入口文件
`index.html`：
```html
Document
```
`src/index.js`：
```js
import $ from 'jquery'
$('ul li:even').css({background: 'red'})
$('ul li:odd').css({background: 'green'})
```
在浏览器打开
[](https://i.loli.net/2021/03/19/sOw4Hi3NURotngc.png)
> 为什么会这样？因为浏览器并不兼容import引入模块这种方式，所以我们要用到webpack打包
### 4. 通过webpack打包
**webpack.config.js：**
```js
const path = require('path');
module.exports = {
mode: "development",
entry: path.join(__dirname, './src/index.js'), // dirname代表索引到文件所在目录
output: {
path: path.join(__dirname, './dist'),
filename: 'main.js'
}
}
```
**package.json：**
```json
"scripts": {
"build": "webpack --config webpack.config.js"
}
```
然后修改 `index.html`:
```html
```
再打开 `index.html`，就可以观察到：
### 5.webpack-dev-server
> 这时候如果修改index.html的背景颜色red改成是gray，会发现浏览器刷新也没有效果，需要再跑一次`npm run start`命令才有用，这时候就需要webpack-dev-server(热重载)
**安装：**
```js
npm install webpack-dev-server -D
```
**package.json：**
```json
"scripts": {
"start": "webpack-dev-server --open --port 3002 --hot",
"build": "webpack --config webpack.config.js"
}
// --open 自动打开浏览器
// --port 服务监听的端口 3002
// --hot 自动更新
```
> 这里注意：
>
> 1、启动webpack-dev-server后， 你在目标文件夹中是看不到编译后的文件的，实时编译后的文件都保存到了内存当中。想看到main.js文件，可以运行localhost:3002/main.js查看
**index.html**
```html
```
至此，通过 `npm run start` 我们仍然无法访问html页面，因为打包出来的dist被隐藏，同时它也并不包含 `index.html` ，所以会有 `Cannot GET /` 的警告。
接下来，我们解决html的问题：
### 6. html-webpack-plugin
安装：`npm install html-webpack-plugin -D`
**webpack.config.js**
```js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: "development", // development-开发环境。 production-生产环境
entry: path.join(__dirname, './index.js'),
output: {
path: path.join(__dirname, './dist'),
filename: 'main.js'
},
plugins: [
new HtmlWebpackPlugin({
template: path.join(__dirname, './index.html')
})
]
}
```
> 删掉index.html文件里面的main.js引用，因为html-webpack-plugin会自动把打包出来的bundle自动加到我们的index.html代码里
重新运行 `npm run start`，即可看到：
并且，此时你随意修改 `index.js` 中的代码，界面也会实时更新。
### 7. css-loader
创建一个index.css
**index.css**
```css
body {
background: skyblue;
}
```
**index.js**
```js
import $ from 'jquery';
$('ul li:even').css({background: 'gray'});
$('ul li:odd').css({background: 'green'});
import './index.css';
```
[](https://i.loli.net/2021/03/19/DlywArz5Nqcudnv.png)
> 为什么报错，因为webpack默认是不识别`.css`文件的，需要我们通过 `loader` 将 `.css` 文件进行解释成正确的模块。
**安装css-loader和style-loader**
```js
npm install css-loader style-loader -D
//index.css -> bundle.js -> style-loader ->