1、webpack介绍

  • webpack 是前端的一个项目构建工具，它是基于 Node.js 开发出来的一个前端工具；
  • 借助于webpack这个前端自动化构建工具，可以完美实现资源的合并、打包、压缩、混淆等诸多功能。

2、webpack的安装

  • 全局安装运行npm i webpack -g这样就可以在全局使用webpack的命令了
  • 在项目根目录中运行npm i webpack --save-dev安装到项目依赖中

备注：在webpack4之后的版本，不光需要安装webpack还需要安装webpack-cli

3、webpack的使用

　　以简单隔行换色为例，创建demo文件夹，demo中创建src文件夹，src中创建index.html和index.js

index.html代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <li>第1个</li>
        <li>第2个</li>
        <li>第3个</li>
        <li>第4个</li>
        <li>第5个</li>
        <li>第6个</li>
        <li>第7个</li>
        <li>第8个</li>
        <li>第9个</li>
        <li>第10个</li>
    </ul>
</body>
</html>

index.js代码：

　　此时我们想要偶数行变为红色，奇数行变为绿色,如果将index.js直接引入到index.html会报错，接下来的操作就是解决这些问题

import $ from "jquery"
$("li:odd").css("color", "red")
$("li:even").css("color", "green")

　　3.1 在demo文件夹路径下打开终端，输入命令npm init后全部默认回车，会生成一个package.json文件，使用package.json管理项目。（npm前端的包管理工具）

npm init

　　3.2 安装jquery插件 npm i jquery

npm i jquery

　　3.3 浏览器不认识es6的高级语法，所以使用webpack打包js文件，将这个js文件转化成浏览器可以认识的文件，安装并且指定版本号.

npm i webpack@4 webpack-cli@3 -D

　　3.4 执行打包命令, webpack --entry 【需要打包的文件】 -o 【输出的文件】因为webpack不是全局安装所以没有办法在命令行中直接执行webpack命令，这里可以借助npm提供的npx命令执行webpack命令 npx webpack --entry 【需要打包的文件】 -o 【输出的文件】

　　打包src下的index.js,输出为dist文件夹下的index.js

npx webpack --entry ./src/index.js -o ./dist/index.js

　　3.5 在html中引入打包好的js文件

<script src="../dist/index.js"></script>

　　到这一步，简单隔行换色完成。webpack为我们做了什么？

  1. 处理了js的依赖关系，对js做了合并。
  2. 让浏览器不识别的高级语法，转换成浏览器可以识别的语法。 
    $(function(){
    $('li:odd').css('background-color','red')
    $('li:even').css('background-color','blue')
})

4、webpack的配置文件webpack.config.js

　　4.1创建webpack.config.js的文件，放在项目的根目录，在文件中加入配置文件

配置入口和出口，配置放在module.exports导出的对象里

　　a.入口entry，配置这个时候后面写的是路径，这里用到的是node提供的path的api进行路径的拼接  

　　b.出口output    1.path

　　　　　　　　　　2.filename

// webpack的配置文件
const path = require('path');

// 为什么使用path提供的方法拼接路径
// /src/ ,/src , index.js. /index.js
// /src//index.js
// /src/index.js

module.exports = {
    entry: path.join(__dirname, 'src/index.js'),
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js'
    }
}

　　4.2 删除前面几步生成的dist文件夹，执行命令npx webpack可重新生成

npx webpack

5、使用webpack-dev-server插件启动页面

　　每次修改之后都要重新打包，之后刷新页面，操作很繁琐，使用webpack-dev-server就可以解决这个问题

　　5.1 安装webpack-dev-server依赖 npm i webpack-dev-server@3 -D

npm i webpack-dev-server@3 -D

　　5.2通过npx运行脚本npx webpack-dev-server

npx webpack-dev-server

　　5.3 配置package.json脚本

"dev": "webpack-dev-server"

修改后：

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server"
  },

　　5.4 配置之后通过 npm run dev 运行脚本

npm run dev

　　5.5执行这个webpack-dev-server发生了什么

  1. 启动了一个服务，这个服务默认启动在8080端口
  2. 执行webpack命令，把输出的内容放在了内存里，我们直接通过localhost:8080/【输出的文件名】就可以访问到这个文件。
    1. 为什么要放在内存里：我们文件一保存就会进行打包编译，会频繁涉及到文件的读写，内存的读写效率要比硬盘高很多，所以放在内存里。
  1. 我们一修改入口文件，就会执行打包命令，界面就会进行刷新

6、实现自动打开浏览器以及热更新

　　6.1 通过命令行指定参数的方式实现 webpack-dev-server --open --port 3000 --contentBase src --hot 注意参数之　　　　　　间都有空格

    1. open 打开浏览器
    2. port 服务端口号
    1. contentBase 默认的界面
    2. hot 热部署，每次修改js文件只会打包修改的地方，提高效率,浏览器不刷新修改内容

　　6.2 使用配置文件配置devServer，在webpack.config.js文件module.exports后加入以下红色部分代码接着执行npm run dev，自动打开页面后点击src即可

module.exports = {

    ..., // 省略了前面的内容

    devServer: {

        // --open --contentBase src --port 3000 --hot",

        open: true,

        // contentBase: 'src', //这行有bug，本意为自动打开src，打开以后样式不会发生变化

        port: 3000,

        hot: true

    }

}

 7、同时引入多个js

　　7.1 在src中创建main.js

import $ from "jquery"
$("li:odd").css("fontSize", "40px")
$("li:even").css("fontSize", "16px")

　　7.2 修改webpack.config.js

// webpack的配置文件
const path = require('path');

// 为什么使用path提供的方法拼接路径
// /src/ ,/src , index.js. /index.js
// /src//index.js
// /src/index.js

module.exports = {
    // entry: path.join(__dirname, 'src/index.js'),
    // output: {
    //     path: path.join(__dirname, 'dist'),
    //     filename: 'index.js'
    // },
    // 多个js
    entry: {
        main: path.join(__dirname, 'src/main.js'),
        index: path.join(__dirname, 'src/index.js')
    },
    output: {
        path: path.join(__dirname, 'dist'),
        filename: '[name].js'
    },
    devServer: {
        // --open --contentBase src --port 3000 --hot",
        open: true,
        // contentBase: 'src',
        port: 3000,
        hot: true
    }

}

　　7.3 删除之前的dist文件夹，重新执行npx webpack

npx webpack

　　7.4 在html中引入main.js

<script src="../dist/main.js"></script>

　　7.5 执行npm run dev即可

npm run dev

效果图：

webpack的使用（待完善/部分内容）_json