Ashun's 技術駅
xugaoyi
2022-02-26
目录

webpack

# webpack

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

# 打包器

什么是打包器？ 以前：html\css\js 没有模块化 现在：vue 项目 模块化（复用性高、维护便利） npm run build 打包:把现代的项目变回以前的项目，目的是让浏览器能识别的同时又能让我们开发的时候可以使用现代的模块化开发

# 安装 webpack

//初始化包管理系统（注意项目目录名字不要写webpack）
npm init -y

//安装最新版webpack和指定版本webpack（不建议全局安装）
npm install --save-dev webpack
npm install --save-dev webpack@<version>

//全局安装，因为webpack各版本之间互不兼容，所以【不建议全局安装】
npm i webpack -g

//如果是4及以上的版本还需要额外安装cli
npm install --save-dev webpack-cli
1
2
3
4
5
6
7
8
9
10
11
12

正常安装三条命令

npm init -y
npm install --save-dev webpack
npm install --save-dev webpack-cli
1
2
3

# webpack 配置

在根目录下创建 webpack.config.js 文件

const path = require("path"); //npm自带的路径管理器

module.exports = {
  entry: "./index.js", //入口
  output: {
    //出口(只支持绝对路径)
    path: path.resolve(__dirname, "dist"),
  },
};
1
2
3
4
5
6
7
8
9

配置 package.json 文件

{
  "name": "webapck_test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \\"Error: no test specified\\" && exit 1",
    "build":"webpack --config webpack.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.52.0",
    "webpack-cli": "^4.8.0"
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 前端工程目录规范

  • public 存放不需要改动的文件
  • src 存放核心文件

# 核心概念

# 入口

webapck 会根据某个指定的文件作为核心文件，然后其他文件以这个文件为依赖进行依赖关系图设置，从而找到其他文件。

module.exports = {
  entry: "./src/main.js", //入口
};
1
2
3

# 出口

根据核心文件打包后的文件。

const path = require("path"); //npm自带的路径管理器

module.exports = {
  entry: "./src/main.js", //入口
  output: {
    //出口(只支持绝对路径)
    path: path.resolve(__dirname, "dist"),
  },
};
1
2
3
4
5
6
7
8
9

# loader 翻译器

这里先安装两个插件

npm i style-loader css-loader -D
1

处理非 js 文件，因为 webpack 无法识别非 js 文件，所以需要 loader 进行转换。

const path = require("path"); //npm自带的路径管理器

module.exports = {
  entry: "./src/main.js", //入口
  output: {
    //出口(只支持绝对路径)
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    //loader的执行顺序是下往上，右往左
    rules: [
      {
        test: /\\.css$/,
        use: [
          {
            loader: "style-loader", // 可以把css放在页面上
          },
          {
            loader: "css-loader", // 放在后面的先被解析
          },
        ],
      },
    ],
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

# plugins 插件

这里先安装一下

npm i html-webpack-plugin -D
1

专门处理一些 webpack 本身无法处理的事情，比如 css、js、图片压缩等额外操作。

const path = require("path"); //npm自带的路径管理器
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/main.js", //入口
  output: {
    //出口(只支持绝对路径)
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\\.css$/,
        use: [
          {
            loader: "style-loader", // 可以把css放在页面上
          },
          {
            loader: "css-loader", // 放在后面的先被解析
          },
        ],
      },
    ],
  },
  plugins: [new HtmlWebpackPlugin()],
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

# webpack 常用插件

这里安装依赖包

npm install webpack-dev-server -D
1
  • HtmlWebpackPlugin 创建 html 模版
  • webpack-dev-server 运行本地服务器

package.json 文件

{
  "name": "webapck_test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \\"Error: no test specified\\" && exit 1",
    "build": "webpack --config webpack.config.js",
    "dev":"webpack serve" //记得加入这一句
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^6.2.0",
    "html-webpack-plugin": "^5.3.2",
    "style-loader": "^3.2.1",
    "webpack": "^5.52.0",
    "webpack-cli": "^4.8.0",
    "webpack-dev-server": "^4.1.1"
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
module.exports = {
  mode: "development", //记得加入这一句
  entry: "./src/main.js", //入口
};
1
2
3
4

然后打开浏览器输入 http://localhost:8080 即可查看效果

# webpack 实现 vue 代码运行

1、安装插件和loader

npm i vue@2 [email protected] babel-loader @babel/core @babel/preset-env -D
1
vue                    vue核心文件
vue-loader             vue翻译器，让我们能够使用vue文件
vue-template-compiler  翻译vue的template标签
babel-loader           让es6或者更高版本的js代码降级为大部分浏览器能识别的es5代码
@babel/core            babel的核心核心（新版的babel都需要安装）
@babel/preset-env      babel的预设文件（就是内部配置好的文件）

"vue": "^2.6.14",
"vue-loader": "^14.2.2",
1
2
3
4
5
6
7
8
9

2、配置.babelrc文件

{
    "presets": [
      "@babel/env"
    ]
  }
1
2
3
4
5

3、webpack进行vue-loader和babel配置

const path = require("path"); //npm自带的路径管理器
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  mode: "development",
  entry: "./src/main.js", //入口
  output: {
    //出口(只支持绝对路径)
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: "style-loader", // 可以把css放在页面上
          },
          {
            loader: "css-loader", // 放在后面的先被解析
          },
        ],
      },
      {
        test: /\.vue$/,
        use: [
          {
            loader: "vue-loader",
          },
        ],
      },
      {
        test: /\.js$/,
        // exclude：排除
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: "babel-loader",
        },
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./public/index.html", //必须要有这个步骤
    }),
  ],
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

4、根目录下public/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>
    <div id="app"></div>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12

5、创建src/App.vue

<template>
  <div>
    {{ msg }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "你是猴子派来的救兵吗？",
    };
  },
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

6、更改main.js文件

import Vue from "vue";
import App from "./App.vue";
import "./index.css";

new Vue({
  render: (h) => h(App),
}).$mount("#app");
1
2
3
4
5
6
7

这是所有配置package.json

{
  "name": "webpack_test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.config.js",
    "dev": "webpack serve"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.17.5",
    "@babel/preset-env": "^7.16.11",
    "babel-loader": "^8.2.3",
    "css-loader": "^6.6.0",
    "html-webpack-plugin": "^5.5.0",
    "style-loader": "^3.3.1",
    "vue": "^2.6.14",
    "vue-loader": "^14.2.2",
    "webpack": "^5.69.1",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.7.4"
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
编辑 (opens new window)
上次更新: 2023/08/06, 00:38:41
git教程
scss

← scss→

最近更新
01
课件-react路由-V6
01-22
02
课件-国际化
01-22
03
课件-redux-toolkit
01-22
更多文章>
Theme by Vdoing | Copyright © 2019-2024 Evan Xu | MIT License