angular项目从node_modules中复制文件到文件夹

最新推荐文章于 2023-06-26 21:01:25 发布

低调奋进

最新推荐文章于 2023-06-26 21:01:25 发布

阅读量3.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： Angular2 文章标签： angular

本文链接：https://blog.youkuaiyun.com/zwbHUST/article/details/79878554

Angular2 专栏收录该内容

42 篇文章

订阅专栏

本文介绍如何使用Webpack构建工具自定义配置流程，包括安装必要插件、配置文件拷贝及资源插入等步骤，确保最终生成的index.html文件正确引用外部资源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

对于自配置的webpack构建工具

1. 下载 test.js npm 包(npm install test.js@latest ）

2. npm下载并安装 [copy-webpack-plugin](https://github.com/webpack-contrib/copy-webpack-plugin) 和[html-webpack-include-assets-plugin](https://github.com/jharris4/html-webpack-include-assets-plugin) 两个插件，并在webpack配置文件中引入

    
          const 
          CopyWebpackPlugin = require(
          'copy-webpack-plugin'
          );
         
          const 
          HtmlWebpackIncludeAssetsPlugin =require(
          'html-webpack-include-assets-plugin'
          )

3. 配置 copy-webpack-plugin插件在构建时将 node_modules中的test.js拷贝相应目录(这里为assets/js目录),配置 html-webpack-include-assets-plugin 将test.js插入到打包后的index.html中

          plugins: [
         
          /**
         
          * Plugin: CopyWebpackPlugin
         
          * Description: Copy files and directories in webpack.
         
          *
         
          * Copies project static assets.
         
          *
         
          * See: https://www.npmjs.com/package/copy-webpack-plugin
         
          */
         
          new 
          CopyWebpackPlugin([
         
          { from: 
          'node_modules/test.js/test.js'
          ,to:
          'assets/js'
          }
         
          ]),
         
          new 
          HtmlWebpackIncludeAssetsPlugin({
         
          assets:[
          'assets/js/test.js'
          ],
         
          append:
          false
         
          })
         
          ]

4. 配置成功后，打包生成的index.html文件中包含test.js引用

    
          <script type=
          "text/javascript" 
          src=
          "assets/js/test.js"
          ></script>
         
          ...