工程中使用到一些js脚本资源,散落在多个文件加载非常麻烦。发现webpack是个好东西,能把所有资源都打包在一起。做前端的一定不会陌生。
优点多多:
- 优化js代码,提高加载速度
- 压缩js代码的尺寸,合并成单一文件方便调用
- 后续脚本变多,可以大胆拆分模块文件易于代码维护
1. 安装Webpack
webpack是NodeJS的东西,工程并不是web前端的代码所以安装东西不少。
安装步骤:
- 下载安装NodeJS
https://nodejs.org
- 使用npm安装包
webpack 和 webpack-cli
- 检查版本是否可用
安装包: 由于不是前端代码,不想要没用的临时代码,所以需要把包安装在全局位置
npm install -g webpack
npm install -g webpack-cli
安装完成查看node npm 和 webpack的版本
状态
PS D:\docs\devs\searcher\bin\Config> node --version
v14.17.5
PS D:\docs\devs\searcher\bin\Config> npm --version
6.14.14
2. 无法加载 webpack 文件解决
查看 webpack 版本时会出现下面情况, 网上大部分的解决方法时把PowellShell升级管理员权限
PS D:\docs\devs\searcher\bin\Config> webpack --version
webpack : 无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\webpack.ps1,因为在此系统上禁止运行脚本。有关详细信息,请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execu
tion_Policies。
所在位置 行:1 字符: 1
+ ~~~~~~~
+ CategoryInfo : SecurityError: (:) [],PSSecurityException
+ FullyQualifiedErrorId : UnauthorizedAccess
解决方法:
方法1. PowellShell 升级管理员权限
方法2. 修改策略Set-ExecutionPolicy
(推荐)
这个问题的实质webpack
是个脚本默认没权限,需要提升PowerShell
执行权限
3. 提升PowerShell
权限 set-ExecutionPolicy RemoteSigned
set-ExecutionPolicy RemoteSigned
执行结果如下, webpack能显示版本可以正常使用
PS D:\docs\devs\searcher\bin\Config> get-ExecutionPolicy
Restricted
PS D:\docs\devs\searcher\bin\Config> set-ExecutionPolicy RemoteSigned
RemoteSigned
PS D:\docs\devs\searcher\bin\Config> webpack --version
webpack 5.51.1
webpack-cli 4.8.0
4. 现在可以快乐的打包
最后一步: 加个打包配置
自己配置打包文件webpack.config.js
配置参考官网:https://webpack.docschina.org/concepts/
const path = require('path');
module.exports = {
entry: './SearchAPI.js',
mode: 'development',
devtool: 'source-map',
output: {
path: path.resolve(__dirname, './dist'),
filename: 'api.js'
}
};
现在就能快乐打包,直接执行 webpack
PS D:\docs\devs\searcher\bin\Config> webpack
asset api.js 33 KiB [emitted] [minimized] (name: main) 1 related asset
./SearchAPI.js 77.8 KiB [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.51.1 compiled with 1 warning in 878 ms
打包完成,在dist目录下有个生成的api.js文件