一、WebPack

WebPack 是前端资源模块工具：WebPack能够分析项目结构，找到 JavaScript 模块，将多个依赖模块打包成一个模块。

二、准备

1.初始化项目

使用 npm init -y 命令，项目根目录下会生成 package.json 文件

npm init -y

2.安装 WebPack

安装 webpack 和 webpack-cli：

npm install --save-dev  webpack webpack-cli

查看版本：

zxm@zxm-pc:~/IdeaProjects/webpack-test$ npm list webpack webpack-cli
webpack-test@1.0.0 /home/zxm/IdeaProjects/webpack-test
├─┬ webpack-cli@5.1.4
│ ├─┬ @webpack-cli/configtest@2.1.1
│ │ ├── webpack-cli@5.1.4 deduped
│ │ └── webpack@5.91.0 deduped
│ ├─┬ @webpack-cli/info@2.0.2
│ │ ├── webpack-cli@5.1.4 deduped
│ │ └── webpack@5.91.0 deduped
│ ├─┬ @webpack-cli/serve@2.0.5
│ │ ├── webpack-cli@5.1.4 deduped
│ │ └── webpack@5.91.0 deduped
│ └── webpack@5.91.0 deduped
└─┬ webpack@5.91.0
  └─┬ terser-webpack-plugin@5.3.10
    └── webpack@5.91.0 deduped

三、编写模块

1.目录结构：

新建两个文件夹 app 和 public，app 存放编写的 JavaScript 模块，public 存放 index.html 页面和 app 打包的 JavaScript 文件 bundle.js

zxm@zxm-pc:~/IdeaProjects$ tree webpack-test/
webpack-test/
├── app
│   ├── greeter.js
│   └── main.js
├── package.json
└── public
    └── index.html

2.编写代码

greeter.js

module.exports = function() {
    var greet = document.createElement('div');
    greet.textContent = "Welcome!";
    return greet;
};

main.js

const greeter = require('./greeter.js');
document.querySelector("#root").appendChild(greeter());

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <div id="root"></div>
    <script src="./bundle.js"></script>
</body>
</html>

四、打包

1.使用命令行打包

npx webpack --entry ./app/main.js --output-path ./public --output-filename bundle.js --mode development

npx 会自动查找当前依赖包中的可执行文件，即会找到webpack命令

webpack参数:

--entry：应用程序的入口文件
--output-path：webpack 生成文件的输出位置
--mode：定义 webpack 所需的 mode
--config：提供 webpack 配置文件的路径
--progress：打印处编译进度的百分比值

结果：

zxm@zxm-pc:~/IdeaProjects/webpack-test$ npx webpack app/main.js --output public/bundle.js --mode development
Hash: 8f58b70820535d343983
Version: webpack 4.41.2
Time: 98ms
Built at: 2019-12-14 17:16:23
    Asset     Size  Chunks             Chunk Names
bundle.js  4.3 KiB    main  [emitted]  main
Entrypoint main = bundle.js
[./app/greeter.js] 133 bytes {main} [built]
[./app/main.js] 96 bytes {main} [built]

2.使用配置文件打包

在项目根目录添加 WebPack 配置文件 webpack.config.js

配置文件指定需要打包的模块，及打包后的模块位置名称，其中 __dirname 是 NodeJS 中的一个全局变量，它执行当前执行脚本所在的目录

zxm@zxm-pc:~/IdeaProjects/webpack-test$ cat webpack.config.js 
module.exports = {
    mode: 'development',  // 开发模式
    entry:  __dirname + "/app/main.js",  // 唯一入口文件
    output: {
        path: __dirname + "/public",  // 打包后的文件存放的地方
        filename: "bundle.js"  // 打包后输出文件的文件名
    }
}

终端输入：

npx webpack

这条命令会自动引用 webpack.config.js 文件中的配置选项

结果：

zxm@zxm-pc:~/IdeaProjects/webpack-test$ npx webpack
Hash: 8f58b70820535d343983
Version: webpack 4.41.2
Time: 95ms
Built at: 2019-12-14 17:29:58
    Asset     Size  Chunks             Chunk Names
bundle.js  4.3 KiB    main  [emitted]  main
Entrypoint main = bundle.js
[./app/greeter.js] 133 bytes {main} [built]
[./app/main.js] 96 bytes {main} [built]

五、使用 webpack 构建本地服务器

如果需要浏览器监听代码的变化，并自动刷新显示修改后的结果，webpack 提供一个可选的本地开发服务器

安装 webpack-dev-server 包

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

查看版本：

zxm@zxm-pc:~/IdeaProjects/webpack-test$ npm list webpack-dev-server
webpack-test@1.0.0 /home/zxm/IdeaProjects/webpack-test
└── webpack-dev-server@5.0.4

修改配置文件webpack.config.js

zxm@zxm-pc:~/IdeaProjects/webpack-test$ cat webpack.config.js 
module.exports = {
    mode: 'development',  // 开发模式
    entry:  __dirname + "/app/main.js",  // 唯一入口文件
    output: {
        path: __dirname + "/public",  // 打包后的文件存放的地方
        filename: "bundle.js"  // 打包后输出文件的文件名
    },
    devServer: {
    static: {
        directory: __dirname + "/public",  // 本地服务器所加载的页面所在的目录
    },
    port: 9000
    }
}

启动：

npx webpack-dev-server

结果：

zxm@zxm-pc:~/IdeaProjects/webpack-test$ npx webpack-dev-server
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:9000/
<i> [webpack-dev-server] On Your Network (IPv4): http://192.168.1.105:9000/
<i> [webpack-dev-server] Content not from webpack is served from '/home/zxm/IdeaProjects/webpack-test/public' directory
asset bundle.js 260 KiB [emitted] (name: main)
runtime modules 27.4 KiB 12 modules
modules by path ./node_modules/ 172 KiB
  modules by path ./node_modules/webpack-dev-server/client/ 69.7 KiB 16 modules
  modules by path ./node_modules/webpack/hot/*.js 5.18 KiB
    ./node_modules/webpack/hot/dev-server.js 1.94 KiB [built] [code generated]
    + 3 modules
  modules by path ./node_modules/html-entities/lib/*.js 78.9 KiB
    ./node_modules/html-entities/lib/index.js 4.84 KiB [built] [code generated]
    ./node_modules/html-entities/lib/named-references.js 73.1 KiB [built] [code generated]
    + 2 modules
  ./node_modules/ansi-html-community/index.js 4.16 KiB [built] [code generated]
  ./node_modules/events/events.js 14.5 KiB [built] [code generated]
modules by path ./app/*.js 231 bytes
  ./app/main.js 97 bytes [built] [code generated]
  ./app/greeter.js 134 bytes [built] [code generated]
webpack 5.91.0 compiled successfully in 498 ms

近期文章

近期评论

node · 2019-12-14 1

WebPack的使用

一、WebPack

二、准备

1.初始化项目

2.安装 WebPack

三、编写模块

1.目录结构：

2.编写代码

四、打包

1.使用命令行打包

2.使用配置文件打包

五、使用 webpack 构建本地服务器

您可能还喜欢...

1 条回复

发表回复取消回复

node · 2019-12-14 1

一、WebPack

二、准备

1.初始化项目

2.安装 WebPack

三、编写模块

1.目录结构：

2.编写代码

四、打包

1.使用命令行打包

2.使用配置文件打包

五、使用 webpack 构建本地服务器

您可能还喜欢...

XPath的使用

Linux下载及安装jdk1.8

生成ssl证书，nginx配置https

1 条回复

发表回复 取消回复

发表回复取消回复