当前位置:
首页 > temp > JavaScript教程 >
-
110_webpack学习使用
什么是Webpack
模块化的演进
Script标签
CommonsJS
AMD
CMD
ES6模块
安装Webpack
npm install webpack -g
npm install webpack-cli -g
安装卡时,可以使用cnpm,但尽量使用npm
cnpm install webpack -g
cnpm install webpack-cli -g
C:\Users\Administrator>webpack -v
webpack: 5.57.1
webpack-cli: 4.9.0
webpack-dev-server not installed
C:\Users\Administrator>webpack-cli -v
webpack: 5.57.1
webpack-cli: 4.9.0
webpack-dev-server not installed
C:\Users\Administrator>
配置
使用Webpack
创建项目webpack-study
idea打开项目
创建modules目录,用于放置js模块等资源文件
在modules下创建模块文件,如hello.js,用于编写js模块相关代码
// 暴露一个方法
exports.sayHi = function () {
document.write("<div>暴露一个方法</div>");
}
在modules下创建main.js入口文件,用于打包时设置entry属性
var hello = require("./hello");
hello.sayHi();
在项目目录下创建webpack.config.js配置文件,使用webpack命令打包
module.exports = {
entry: './modules/main.js',
output: {
filename: './js/bundle.js'
}
}
webpack命令打包报错:无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\webpack.ps1
PS D:\code\vue\webpack-study> webpack
无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\webpack.ps1,因为在此系统中禁止执行脚本。有关详细信息,请参阅 "get-help about_signing"。
所在位置 行:1 字符: 8
+ webpack <<<<
+ CategoryInfo : NotSpecified: (:) [], PSSecurityException
+ FullyQualifiedErrorId : RuntimeException
解决
参考文档:https://blog.csdn.net/Autism_er/article/details/108444522
Windows PowerShell
版权所有 (C) 2009 Microsoft Corporation。保留所有权利。
PS C:\Users\Administrator> set-ExecutionPolicy RemoteSigned
执行策略更改
执行策略可以防止您执行不信任的脚本。更改执行策略可能会使您面临 about_Execution_Policies
帮助主题中所述的安全风险。是否要更改执行策略?
[Y] 是(Y) [N] 否(N) [S] 挂起(S) [?] 帮助 (默认值为“Y”): y
PS C:\Users\Administrator> get-ExecutionPolicy RemoteSigned
Get-ExecutionPolicy : 无法绑定参数“Scope”。由于枚举值无效,无法将值“RemoteSigned”转换为类型“Microsoft.PowerShell.E
xecutionPolicyScope”。请指定以下枚举值之一,然后重试。可能的枚举值为“Process、CurrentUser、LocalMachine、UserPolicy、
MachinePolicy”。
所在位置 行:1 字符: 20
+ get-ExecutionPolicy <<<< RemoteSigned
+ CategoryInfo : InvalidArgument: (:) [Get-ExecutionPolicy], ParameterBindingException
+ FullyQualifiedErrorId : CannotConvertArgumentNoMessage,Microsoft.PowerShell.Commands.GetExecutionPolicyCommand
PS C:\Users\Administrator> get-ExecutionPolicy
RemoteSigned
PS C:\Users\Administrator>
webpack命令打包,生成dist/js/bundle.js
PS D:\code\vue\webpack-study> webpack
asset ./js/bundle.js 237 bytes [emitted] [minimized] (name: main)
./modules/main.js 47 bytes [built] [code generated]
./modules/hello.js 109 bytes [built] [code generated]
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/
webpack 5.57.1 compiled with 1 warning in 711 ms
PS D:\code\vue\webpack-study>
(()=>{var r={645:(r,t)=>{t.sayHi=function(){document.write("<div>暴露一个方法</div>")}}},t={};(function i(e){var o=t[e];if(void 0!==o)return o.exports;var n=t[e]={exports:{}};return r[e](n,n.exports,i),n.exports})(645).sayHi()})();
在项目目录下创建index.html,导入webpack打包后的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>
打开浏览器测试
webpack --watch实现热部署
webpack --watch
watch用于监听变化,代码改变后,会自动打包,实现热部署
出 处:
https://www.cnblogs.com/wl3pb/p/15579864.html
栏目列表
最新更新
nodejs爬虫
Python正则表达式完全指南
爬取豆瓣Top250图书数据
shp 地图文件批量添加字段
爬虫小试牛刀(爬取学校通知公告)
【python基础】函数-初识函数
【python基础】函数-返回值
HTTP请求:requests模块基础使用必知必会
Python初学者友好丨详解参数传递类型
如何有效管理爬虫流量?
2个场景实例讲解GaussDB(DWS)基表统计信息估
常用的 SQL Server 关键字及其含义
动手分析SQL Server中的事务中使用的锁
openGauss内核分析:SQL by pass & 经典执行
一招教你如何高效批量导入与更新数据
天天写SQL,这些神奇的特性你知道吗?
openGauss内核分析:执行计划生成
[IM002]Navicat ODBC驱动器管理器 未发现数据
初入Sql Server 之 存储过程的简单使用
SQL Server -- 解决存储过程传入参数作为s
关于JS定时器的整理
JS中使用Promise.all控制所有的异步请求都完
js中字符串的方法
import-local执行流程与node模块路径解析流程
检测数据类型的四种方法
js中数组的方法,32种方法
前端操作方法
数据类型
window.localStorage.setItem 和 localStorage.setIte
如何完美解决前端数字计算精度丢失与数