WebPack的使用

最新推荐文章于 2024-11-16 22:44:28 发布

Luck_ZZ

最新推荐文章于 2024-11-16 22:44:28 发布

阅读量289

点赞数

分类专栏： node 文章标签： webpack 打包 webpack-dev-server watch

本文链接：https://blog.csdn.net/Luck_ZZ/article/details/103540590

版权

node 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、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

查看版本：

三、编写模块

1.目录结构：

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

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 app/main.js --output public/bundle.js --mode development

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

webpack参数:

--mode 模式
--config 指定其他配置文件，配置文件默认为webpack.config.js
--progress 打印处编译进度的百分比值
--watch 观察文件系统的变化
--profile 记录编译的性能数据，并且输出，编译过程能看到编译时间
--output 输出文件

结果：

2.使用配置文件打包

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

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

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

终端输入：

npx webpack

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

结果：

浏览器打开index.html页面，观察到成功显示内容

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

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

安装webpack-dev-server包

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

修改配置文件webpack.config.js

module.exports = {
    mode: 'development',//开发模式
    entry:  __dirname + "/app/main.js",//唯一入口文件
    output: {
        path: __dirname + "/public",//打包后的文件存放的地方
        filename: "bundle.js"//打包后输出文件的文件名
    },
    devServer: {
        contentBase: "./public",//本地服务器所加载的页面所在的目录
        historyApiFallback: true,//不跳转
        inline: true//实时刷新
    }
}

启动：