当前位置:
首页 > 网站开发 > 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
最新更新
C语言两结构体之间的成员互换
【爬虫实战项目】Python爬取Top100电影榜单
linux(Ubuntu)安装python
anaconda peompt 、labalimg 数据标注
【Python数据分析案例】python数据分析老番
【爬虫+情感判定+Top10高频词+词云图】“
【爬虫+情感判定+Top10高频词+词云图】"
机器学习回顾篇(2):最小二乘法
机器学习回顾篇(3):线性回归
机器学习回顾篇(4):逻辑回归
支线第九篇:
数据库的值获取过来转换成Json数组的方法
支线第八篇:数据类型转换
支线第七篇:又是解决报错
支线第六篇:停下脚步,理清思路
支线第五篇:配置接口
支线第四篇:解决数据库报错
支线第三篇:设计数据库结构
支线第二篇:这又是另外一个问题:如何响
支线第一篇:小作业:回答问题
C# List<T> 转 DataTable
C# List<T> 转 DataTable
C# List<T> 转 DataTable 方法修改版
使用插件式开发称重仪表驱动,RS232串口
实现简单的csv文件上传和bootstrap表格的下
第一百一十七篇: JavaScript 工厂模式和原型
第一百一十六篇: JavaScript理解对象
第一百一十五篇: JS集合引用类型Map
第一百一十四篇: JS数组Array(三)数组常
第一百一十三篇: JS数组Array(二)数组方