当前位置：首页 > news >正文

包头企业网站建设公司今日十大新闻

news 2025/7/7 3:06:05

包头企业网站建设公司,今日十大新闻,新疆最新疫情通报,网站建设源码一：安装Webpack 简介：WebPack是一款模块加载器兼打包工具，它能把各种资源，如JS、JSX、ES6、SASS、LESS、图片等都作为模块来处理和使用(把ES6规范的代码打包编译成ES5规范的代码，让所有浏览器都能运行) 安装命令&…

一：安装Webpack

简介：WebPack是一款模块加载器兼打包工具，它能把各种资源，如JS、JSX、ES6、SASS、LESS、图片等都作为模块来处理和使用(把ES6规范的代码打包编译成ES5规范的代码，让所有浏览器都能运行)

安装命令：

npm install webpack -g 如果不行就换cnpm
npm install webpack-cli -g 如果不行就换cnpm

安装完两个之后再查看版本信息如果单安装第一个立刻查看版本信息的话会提升没安装webpack-cli,原因是 webpack4+版本（还需要安装 cli），因为webpack 4将 cli 分离出来了
测试安装成功：
webpack -v
webpack-cli -v
在这里插入图片描述

二、使用webpack

1、创建项目 (可直接创建文件夹并用idea打开)

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

在这里插入图片描述

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

//暴露一个方法
exports.sayHai = function () {document.write("<h1>潮汕奴仔在线学Vue</h1>")
}

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

//引入js类 通过生成的对象 调用类中的方法
var hello = require("./hello");
hello.sayHai()

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

module.exports= {
//    程序入口entry:'./modules/main.js',
//    打包输出output:{filename:'./js/bundle.js'}
}

在这里插入图片描述

6、新建index页面引入打包好的JS文件并在浏览器运行查看效果

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!--前端的模块化开发-->
<script src="dist/js/bundle.js"></script>
</body>
</html>

在这里插入图片描述

注意点：

1、关于webpack.config.js的配置文件

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