• <table id="x5mq0"><track id="x5mq0"></track></table>
  • <code id="x5mq0"><nobr id="x5mq0"><sub id="x5mq0"></sub></nobr></code>

      <pre id="x5mq0"><small id="x5mq0"><p id="x5mq0"></p></small></pre>
    1. <pre id="x5mq0"><small id="x5mq0"><track id="x5mq0"></track></small></pre>

    2. <th id="x5mq0"><video id="x5mq0"></video></th>

      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)

      亚洲成A∨人片在线观看无码
    3. <table id="x5mq0"><track id="x5mq0"></track></table>
    4. <code id="x5mq0"><nobr id="x5mq0"><sub id="x5mq0"></sub></nobr></code>

        <pre id="x5mq0"><small id="x5mq0"><p id="x5mq0"></p></small></pre>
      1. <pre id="x5mq0"><small id="x5mq0"><track id="x5mq0"></track></small></pre>

      2. <th id="x5mq0"><video id="x5mq0"></video></th>