Webpack

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

webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler)

安装

npm install webpack -g
npm install webpack-cli -g
# 查看安装是否成功
webpack -v

配置

创建webpack.config.js配置文件

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

#打包
webpack

使用webapck

创建一个项目
idea打开，项目下创建modules文件夹

modules下创建hello.js

exports.sayHi = function () {
    document.write("<h1>你好</h1>")
}

modules下创建入口文件main.js

let hello = require("./hello");
hello.sayHi();

根目录下创建webpack.config.js文件，名字必须是这个

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

根目录下创建index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--引入webpack后的js文件-->
<script src="/dist/js/bundle.js"></script>
</body>
</html>

运行命令webpack

idea中wepack失败，webpack : 无法加载文件 C:\Program Files\nodejs\webpack.ps1

解决命令：set-ExecutionPolicy RemoteSigned

posted @ 2022-01-12 09:29 jpy 阅读(4) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· Vue-cli

· Vue-router

· webpack

· webpack - 安装和使用

· Webpack的使用

公告

昵称： jpy
园龄： 4年1个月
粉丝： 1
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

jpy

Webpack

Webpack

安装

配置

使用webapck

公告

搜索

常用链接

随笔分类

随笔档案

阅读排行榜