Vue笔记：WebPack模块加载器兼打包工具

程序员文章站 2022-05-30 18:25:51

...

文章目录

Webpack

Webpack

WebPack 是一款模块加载器兼打包工具，它能把各种资源，如 JS、JSX、ES6、SASS、LESS、图片等都作为模块来处理和使用。

安装

npm install webpack -g
npm install webpack-cli -g

测试安装成功:

webpack -v
webpack-cli -v

配置

创建 webpack.config.js 配置文件

entry：入口文件，指定 WebPack 用哪个文件作为项目的入口
output：输出，指定 WebPack 把处理完成的文件放置到指定路径
module：模块，用于处理各种类型的文件
plugins：插件，如：热更新、代码重用等
resolve：设置路径指向
watch：监听，用于设置文件改动后直接打包

module.exports = {
    entry: "",
    output: {
        path: "",
        filename: ""
    },
    module: {
        loaders: [
            {test: /\.js$/, loader: ""}
        ]
    },
    plugins: {},
    resolve: {},
    watch: true
}

直接运行 webpack 命令打包

使用webpack

创建项目
创建一个名为 modules 的目录，用于放置 JS 模块等资源文件

在modules下创建模块文件，如 hello.js，用于编写 JS 模块相关代码

//暴露一个方法:sayHi
exports.sayHi = function () {
  document.write("<div>Hello WebPack</div>");
};

在modules下创建一个名为 main.js 的入口文件，用于打包时设置 entry 属性

//require 导入一个模块,就可以调用这个模块中的方法了
var hello = require("./hello");
hello.sayHi();

在项目目录下创建 webpack.config.js 配置文件，使用 webpack 命令打包

module.exports = {
    entry: "./modules/main.js",
    output: {
        filename: "./js/bundle.js"
    }
};

在项目目录下创建 HTML 页面，如 index.html，导入 WebPack 打包后的 JS 文件

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>狂神说Java</title>
</head>
<body>
<script src="dist/js/bundle.js"></script>
</body>
</html>

在IDEA控制台中直接执行webpack;如果失败的话,就使用管理员权限运行即可!
运行 HTML 看效果

说明:

# 参数 --watch 用于监听变化
webpack --watch

上一篇：招聘信息如何采集才能快速找到心怡的工作

下一篇：清代衬衣都是什么样？有什么款式

Vue笔记：WebPack模块加载器兼打包工具

文章目录

Webpack

安装

配置

使用webpack

详解webpack模块加载器兼打包工具

Vue笔记：WebPack模块加载器兼打包工具

webpack模块加载器兼打包工具

webpack的使用（3） ----模块加载器以及webpack打包多个包