Vue2从入门到精通：全面掌握前端开发利器Vue.js！（第三部分Webpack（自动化 模块化 前端开发构建工具））

目录

三、webpack 打包

1.概述

2. webpack安装

3. webpack使用

4.打包

4.1打包js文件

第一种：使用webpack进行打包

第二种：使用配置文件打包 （推荐）

5.热重载服务

如何使用热重载

1.安装

2.使用热重载服务

6.html+css文件打包

1.打包html的打包

2.打包css

---

三、webpack 打包

1.概述

正常项目是要基于模块编程的，但是传统的项目不支持模块化，这个时候需要使用webpack进行管理，打包，打包之后项目就支持了模块化，就能够正常运行；

从本质上来说，webpack是一个静态模块打包工具。

要想让我们写好的模块化代码在各式各样的浏览器上能做到兼容，就必须借助于其他工具；而webpack的其中一个核心就是让我们可以进行模块化开发，并帮我们处理模块间的依赖关系。不仅仅是Javascript文件，我们的css、图片、json文件等在webpack中都可以当作模块来使用，这就是webpack的模块化概念。

Webpack有人也称之为 模块打包机 ，由此也可以看出Webpack更侧重于模块打包，当然我们可以把开发中的所有资源（图片、js文件、css文件等）都可以看成模块，最初Webpack本身就是为前端JS代码打包而设计的，后来被扩展到其他资源的打包处理。Webpack是通过loader（加载器）和plugins（插件）对资源进行处理的。

2. webpack安装

首先环境需要下载node

下载地址Node.js — Node v16.13.0 (LTS) (nodejs.org)

傻瓜式安装，此处不讲，忽略。

node -v 查看自己电脑上是否有node

注意： 要想使用webpack，需要安装2个模块，(1) webpack （2）webpack-cli

npm install webpack

npm install webpack-cli

或者直接一个指令安装多个模块

npm Install webpack webpack-cli

-S 生产模式安装 （默认值） ； -D开发模式安装 ； -g 全局安装

查看webpack是否安装成功： webpack -v

3. webpack使用

举例：安装jquery

npm install jquery

index.html

4.打包

4.1打包js文件

第一种：使用webpack进行打包

1.打包指令
    webpack  需要打包文件的路径   -o  目录名称       【-o  output 导出】
    webpack  ./index.js   -o   dist
               npm install  webpack  -g
              npm install  webpack-cli  -g

第二种：使用配置文件打包 （推荐）

通过配置文件进行打包，可以快速的对js、html、css文件进行打包
1.创建一个配置文件   webpack.config.js
2.配置文件的内容
// webpack文件配置
// 1.引入path模块  （路径模块path）
const path = require("path");
​
// 2.对外暴露
module.exports = {
    // path.join("路径1","路径2")
    // C:\Users\zwd\Desktop\74期\day7\课件\webpack + ./index.js
    entry:path.join(__dirname,"./index.js"),// 进入的意思
    output:{  // -o
        path:path.join(__dirname,"./dist"),
        filename:"bbb.js",//打包之后的名将名称
    }
}
3.设置运行的指令
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start":"webpack  ./index.js  -o  dist --mode  production",
    "nstart":"webpack --config  webpack.config.js --mode  production"
  },
    
    执行  npm  run  nstart

问题:每一次修改代码,都需要重新打包我们的项目,比较麻烦,所以我们需要搭建一个人热重载服务,辅助我们项目开发

5.热重载服务

特点:可以搭建一个服务器,这个服务器叫热重载,将你的项目运行在他的这个服务器上,你修改了代码,就重启在线打包项目,并重新启动服务,让你完成实时项目预览

如何使用热重载

1.安装

npm install   webpack-dev-server    热重载模块

2.使用热重载服务

浏览器运行页面：
    1.将页面放到public下面（public是自己创建的空目录）
    2.在index.html中修改 js文件的地址
    直接使用/+文件名称
    

6.html+css文件打包

1.打包html的打包

1.安装一个模块
npm  install html-webpack-plugin
​
2.修改webpack.config.js文件
 // 2.对html进行打包
    plugins: [
        // 实例化
        new HtmlWebpackPlugin({
            template: path.join(__dirname,"./public/index.html"), //要打包的模板
            filename:"index.html",// 打包之后的名字
        })
    ]
​
打包之后的dist目录，就是将来上线要用的文件；

2.打包css

1.安装模块   2个模块
    npm  install  css-loader    js能够解析css代码
    npm  install  style-loader  js解析css代码之后，解析的代码让html代码认识
​
2.创建css文件
    index.css文件
*{
    font-size: 60px;
}   
    注意：要将当前的css文件引入到index.js文件中
    import “./index.css”；
3.修改配置文件
// 3.打包css文件  npmjs.com 网站上找到的
    module: {
        rules: [
            {
                test: /\.css$/i, //正则表达式   $ 以什么结尾   i 不区分大小写
                use: ["style-loader", "css-loader"],
            },
        ],
    },
      
      css文件的内容，会打包到js文件中，js文件会被引入html文件中，运行html文件，即可生效