js文件打包 无法加载文件 ..\webpack.ps1,因为在此系统上禁止运行脚本

工程中使用到一些js脚本资源,散落在多个文件加载非常麻烦。发现webpack是个好东西,能把所有资源都打包在一起。做前端的一定不会陌生。

优点多多:

  1. 优化js代码,提高加载速度
  2. 压缩js代码的尺寸,合并成单一文件方便调用
  3. 后续脚本变多,可以大胆拆分模块文件易于代码维护

1. 安装Webpack

webpack是NodeJS的东西,工程并不是web前端的代码所以安装东西不少。

安装步骤:

  1. 下载安装NodeJS https://nodejs.org
  2. 使用npm安装包 webpack 和 webpack-cli
  3. 检查版本是否可用

安装包: 由于不是前端代码,不想要没用的临时代码,所以需要把包安装在全局位置

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执行权限

参考: https://docs.microsoft.com/zh-cn/powershell/module/microsoft.powershell.core/about/about_execution_policies?view=powershell-7.1

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文件

END(蘑菇房 MOGUF.COM)