webpack

webpack简单理解就是用来对web工程进行打包，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

webpack：含有几要素（entry，入口；mode，模式，output，输出）
loader：（插件，webpack兼容不同文件类型）由于webpack设计之初只能对js文件进行打包，因此后期衍生出插件loader来对诸如css，图片，html进行打包；
babel：（插件，webpack转换浏览器可识别的es语法）其次es语法和浏览器的兼容性问题，往往需要将高级es语法转换为浏览器可识别的es5格式，这个转换过程需要使用bable插件

webpack基础要素

配置一个基础的webpack工作环境

1. ·webpack·基础目录结构包括
  config：文件夹，含有webpack配置文件webpack.dev.js
  dist：webpack打包的文件存储文件夹
  src：源码文件存储文件夹
  package.json:npm配置文件
  .babelrc: babe配置文件
  具体文件接口如图
  image.png
1. npm init 初始化npm，生成package.json文件
  git init初始化git，生成.git文件夹
1. src文件夹新建main.js文件，作为webpack入口文件
1. dist文件夹新建index.html文件，index.html如下

<body>
    <div class="profile">
        <h1>hello world</h1>
        <script src="main-bundle.js"></script>
    </div>
</body>

1. config文件夹新建webpack.dev.js文件，用来设置webpack配置文件

const path = require("path")
module.exports = {
    //入口文件
    entry: {
        main:["./src/main.js"]
    },
    //模式
    mode:"development",
    //输出
    output: {
        filename: "[name]-bundle.js",
        path: path.resolve(__dirname, "../dist"),
        publicPath: "/"
    }
}

6.webpack命令行执行打包webpack --config=config/webpack.dev.js

jc@jc:~/Desktop/技术栈/Webpack/review/react-demo-review$ webpack --config=config/webpack.dev.js 
Hash: cac8d7fee57c157b3bbd
Version: webpack 4.44.2
Time: 56ms
Built at: 01/11/2021 3:33:52 PM
         Asset      Size  Chunks             Chunk Names
main-bundle.js  4.13 KiB    main  [emitted]  main
Entrypoint main = main-bundle.js
[0] multi ./src/main.js 28 bytes {main} [built]
[./src/main.js] 44 bytes {main} [built]

执行后工程目录生成dist/main-bundle.js文件，至此完成基础webpack工程的配置

image.png

webpack-dev-server插件

webpack-dev-server插件的作用是本地启服务，便于调试。
插件安装：npm install -D webpack-dev-server
配置npm启动命令：在package.json配置scripts脚本，如下：

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --config=config/webpack-dev.js",  
    "build": "webpack ---config=config/webpack-dev.js"
  },

工程根目录执行：
npm run start :打包web工程，并启动本地服务，webpack配置文件为config/webpack-dev.js
npm run build: 打包web工程，打包后文件存储在dist/main-bundle. js文件

webpack-dev.js对webpack-dev-server的配置

  devServer: {
    contentBase:"dist",  //本地工程启动落页，即dist/index.html
    overlay:true   //错误日志能打印在浏览器中
  }

css文件loader

webpack针对css文件的打包，需要使用loader安装css-loader插件来实现

安装loader插件：
style-loader:将css文件加载到html中
css-loader:识别css文件
安装指令: npm install -D style-loader@2.0.0 css-loader@5.0.1
webpack配置文件配置
test：适配的文件，正则匹配
use: 需要装载的loader

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

webpack-dev-server启动本地服务
npm start ("webpack-dev-server --config=config/webpack-dev.js")
访问本地http://localhost:8080/ css被正常加载

html文件loader

webpack针对html文件的打包，需要使用loader，安装html-loader插件来实现

将dist/index.html 移动到src/index.html路径下
安装html-loader插件， npm install -D html-loader@1.3.2
配置webpack-dev.js文件， module/rules增量更新

{
        test:/\.html/,
        use:[
          {
            loader: "file-loader",
            options: {
              name:"[name].html"
            }
          },
          {loader: "extract-loader"},

          {loader: "html-loader"}

file-loader，extract-loader:配合使用，html独立打包到dist，并存储为[name].html文件
html-loader: 让webpack支持html的识别

main.js入口文件require html文件

require("./main.css")
require("./index.html")      //增量
console.log("test")

执行npm start本地启服务/npm run build打包
发现dist文件夹下生成打包后的html

图片文件loader

webpack针对html文件的打包，需要使用loader，安装file-loader插件来实现

修改index.html，加载对图片的渲染

<body>
    <div class="profile">
        <img src="./images/link.jpg" alt="">      //更新，注意路径为当前的路径
        <h1>hello world</h1>
        <script src="/main-bundle.js"></script>
    </div>
</body>

配置webpack-dev.js文件， module/rules增量更新

{
        test:/\.(jpg|png|gif)/,
        use: {
          loader: "file-loader",
          options: {
            name:"./images/[name]-[hash:8].[ext]"
          }
        }
      }

执行npm start本地启服务/npm run build打包
发现dist文件夹下生成打包后的图片

image.png

babel es语法转换

babel的作用将一些高级的es语法转换为浏览器能够识别的es5语法

main.js编写高版本的es语言，作为测试数据

require("./main.css")
require("./index.html")

//高级es语法，不通过babel转换部分浏览器识别
var a = async args => {
    const {a, b} = args
    await console.log("hello world", a, b)
    console.log("Done")
}

a({a:1, b:2})

新建bable配置文件.babelrc
在工程根目录，新建.babelrc用来设置babel对应的插件
安装bable转换插件presets
1.安装插件babel-preset-env, npm install -D babel-preset-env@1.7.0， presets能够自动下载对应babel依赖的插件
2.在.babelrc进行配置

{
  "presets": [
    [
      "env",
      {
        "target": {
          "browsers": ["last 2 version"]
        },
        "debug": true
      }
    ]
  ],
  "plugins": [
    "transform-runtime"
  ]
}

browsers:支持es5 的浏览器
debug：调试
plugins：插件，其中transform-runtime用来运行时优化
3.在main.js 中更新代码

require("babel-runtime/regenerator") //增量
require("./main.css")
require("./index.html")

var a = async args => {
    const {a, b} = args
    await console.log("hello world", a, b)
    console.log("Done")
}
a({a:1, b:2})

webpack配置文件设置babel的loader
先npm下载babel-loader， npm install -D babel-loader@7.1.5
在webpack-dev.js的rulues添加对应的loader使用

          {
                test: /\.js$/,
                use: [
                    {loader: "babel-loader"}
                ],
                exclude: /node_modules/  // 排除node_modules文件夹下的loader的转换
            },

5.执行webpakc打包， npm run build
打包后的main-bundle.js将高级es语法成功转换为es5语法

image.png