【Webpack3.x】学习笔记（一）

太过爱你忘了你带给我的痛 2022-06-02 07:07 214阅读 0赞

本文环境：Visual Studio Code、Windows10

--------------------

# 什么是Webpack？ #

> WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Sass，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。在3.0出现后，Webpack还肩负起了优化项目的责任。

我们可以从下图再次了解一下WebPack的作用:  
![这里写图片描述][SouthEast]

--------------------

# 安装WebPack #

## 1）进入项目目录 ##

mkdir webpack_demo  // 建立一个文件夹
    cd webpack_demo     // 进入这个文件夹

注意：执行下一步前必须已安装node

## 2）初始化 ##

npm init

输入完成后，npm终端会问你关于项目的名称，描述…，如果想默认直接跳过请在后面加上 -y 参数：

npm init -y

初始化完成后可以看到生成的package.json文件

> 在用npm安装前，我们先要进行一下初始化，初始化的主要目的是生成package.json文件（这是一个标准的npm说明文件，里面蕴含了丰富的信息，包括当前项目的依赖模块，自定义的脚本任务等等）。

## 3）安装 webpack 依赖 ##

// 第一步：全局安装
    npm install -g webpack  // 这个安装会提供一个全局的webpack命令。
    
    // 第二步：项目安装
    npm install --save-dev webpack  // 安装到项目里，这样webpack运行时才会require到这个包，这两步是必须的。

–save与–save-dev区别：

*  –save是对生产环境所需依赖的声明(开发应用中使用的框架，库)
 *  –save-dev是对开发环境所需依赖的声明(构建工具，测试工具)

--------------------

# 迅速上手第一个Demo #

## 建立基本项目结构 ##

进入之前创建的webpack\_demo项目文件夹后建立两个文件夹，分别是src文件夹和dist文件夹：

*  src文件夹：用来存放我们编写的JavaScript代码，可以简单的理解为用JavaScript编写的模块。
 *  dist文件夹：用来存放供浏览器读取的文件，这个是webpack打包成的文件。

可以理解为：src是源码文件，dist是我们编译打包好的文件；一个用于**开发环境**，一个用于**生产环境**。

> 开发环境：在开发时需要的环境，这里指在开发时需要依赖的包。  
> 生产环境：程序开发完成，开始运行后的环境，这里指要使项目运行，所需要的依赖包。

## 编写程序文件 ##

/dist/index.html

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        <div id="title"></div>
        <script src="./bundle.js"></script>  // 这个文件现在还没有，这是用webpack执行打包命令后生产的文件。
    </body>
    </html>

src/entery.js

document.getElementById('title').innerHTML = 'Hello Webpack';

## 第一次Webpack打包 ##

webpack src/entry.js dist/bundle.js  // webpack 入口文件 打包存放位置

执行结果如下图：  
![这里写图片描述][SouthEast 1]

--------------------

# 配置文件webpack.config.js #

在 `第一次打包webpack` 中的终端打包方案，在实际开发中并不使用，而是使用webpack的配置文件的方式进行设置。

webpack.config.js就是Webpack的配置文件，这个文件**需要在项目根目录下手动建立**。建立好后我们对其进行配置，先看下面的代码（webpack.config.js的基本结构），这是一个没有内容的标准webpack配置模版。

module.exports={
        //入口文件的配置项
        entry:{},
        //出口文件的配置项
        output:{},
        //模块：例如解读CSS,图片如何转换，压缩
        module:{},
        //插件，用于生产模版和各项功能
        plugins:[],
        //配置webpack开发服务功能
        devServer:{}
    }

## ① entry 和 output ##

当我不用终端打包方案而采用webpack.config.js配置文件时：

### 单入口、单出口配置 ###

const path = require('path');
    module.exports={
        //入口文件的配置项
        entry:{
            entry:'./src/entry.js'
        },
        //出口文件的配置项
        output:{
            //输出的路径，用了Node语法
            path:path.resolve(__dirname,'dist'),  // path.resolve(__dirname,’dist’)就是获取了项目的绝对路径。
            //输出的文件名称
            filename:'bundle.js'
        },
        ...
    }

### 多入口、多出口配置 ###

const path = require('path');
    module.exports={
        entry:{   // 外部这个entry不能写错
            entry:'./src/entry.js',  //里面的这两个名字随便起
            entry2:'./src/entry2.js'
        },
        output:{
            path:path.resolve(__dirname,'dist'),
            filename:'[name].js'  // [name]的意思是根据入口文件的名称，打包成相同的名称，有几个入口文件，就可以打包出几个文件
        },
        ...
    }

对应的index.html

--------------------

## ② devServer ##

### 设置webpack-dev-server ###

安装

npm install webpack-dev-server --save-dev

安装完成之后需要设置下webpack.config.js中的devServer配置

devServer:{
       //设置基本目录结构
        contentBase:path.resolve(__dirname,'dist'),
       //服务器的IP地址，可以使用IP也可以使用localhost
        host:'localhost',
       //服务端压缩是否开启
        compress:true,
       //配置服务端口号
        port:1717
    }

配置好后，你可以试着在终端中输入webpack-dev-server,如果可以执行成功，但是往往提示下面的错误（或者是无法找到内部或外部命令）。  
![这里写图片描述][SouthEast 2]  
出现下面的错误不用慌张，我们只要在package.json里配置一下scripts选项就可以执行了。

/package.json

"scripts": {
        "server":"webpack-dev-server --open"
    },

配置好保存后，在终端里输入 `npm run server` 打开服务器并自动打开浏览器就可以看到结果了。

### 支持热更新 ###

在npm run server 启动后，它是有一种监控机制的（也叫watch）。它可以监控到我们修改源码，并立即在浏览器里给我们更新。

--------------------

## ③ module ##

Loaders是Webpack最重要的功能之一，他也是Webpack如此盛行的原因。

简单的举几个Loaders使用例子：

*  可以把SASS文件的写法转换成CSS，而不在使用其他转换工具。
 *  可以把ES6或者ES7的代码，转换成大多浏览器兼容的JS代码。
 *  可以把React中的JSX转换成JavaScript代码。

Loaders的配置模型

*  test：用于匹配处理文件的扩展名的表达式，这个选项是必须进行配置的；
 *  use：loader名称，就是你要使用模块的名称，这个选项也必须进行配置，否则报错；
 *  include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）；
 *  query：为loaders提供额外的设置选项（可选）。

### 打包CSS文件 ###

./src/css/index.css

body{ background-color: red; color: white; }

CSS文件建立好后，需要引入到入口文件中，才可以打包到，这里我们引入到entry.js中。

/src/entery.js中在首行加入代码：

import css from './css/index.css';

CSS和引入做好后，我们就需要使用loader来解析CSS文件了，这里我们需要两个解析用的loader，分别是style-loader和css-loader。

npm install style-loader --save-dev
    npm install css-loader --save-dev

#### loaders配置 ####

webpack.config.js

//模块：例如解读CSS,图片如何转换，压缩
    module:{
        rules: [
            {
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader' ]
            }
        ]
    },

#### loader的三种写法 ####

##### 第一种写法：直接用use #####

module:{ 
        rules:[
            {
                test:/\.css$/,
                use:['style-loader','css-loader']
            }
        ]
    },

##### 第二种写法：把use换成loader #####

module:{ 
        rules:[
            {
                test:/\.css$/,
                loader:['style-loader','css-loader']
            }
        ]
    },

##### 第三种写法：用use+loader的写法 #####

module:{ rules:[ { test:/\.css$/, use: [ { loader: "style-loader" }, { loader: "css-loader" }
                ]
            }
        ]
    },

--------------------

## ④ plugins ##

未完待续…

[SouthEast]: /images/20220602/eccca0bba80644a4a49ff7019ae2dd2e.png
[SouthEast 1]: /images/20220602/8ec1780c60d14e78947e5e2cd39b79c2.png
[SouthEast 2]: /images/20220602/b8e096f927fd4b5981c1c562173a4292.png