情形一:如果项目是基于自配置的webpack构建的。想要把拷贝文件到指定目录,这样配置;

1.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')

2. 配置 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/test.js',to:'assets/js' }
    ]),

    new HtmlWebpackIncludeAssetsPlugin({
        assets:['assets/js/test.js'],
        append:false
    })
 ]

情形二:如果基于angular-cli构建的项目,怎么拷贝文件呢?

在angular中不能直接进行webpack相关配置。这时就可以通过copyfiles拷贝文件。

1.npm install copyfiles

2.在package.json中配置

"scripts": {

"ng": "ng",

"build": "ng build && npm run copy",

"copy": "copyfiles -u 1 node_modules/test/test.js  ../../../target/assembly/tar/demo/assets"

}

这样编译打包时,会先拷贝文件,然后把拷贝的文件打包进来。

解释:copyfiles -u 1 node_modules/test/test.js

数字1,表示截取路径。如果直接copyfiles node_modules/test/test.js,会把node_modules/test/test.js整个目录路径拷过去。

copyfiles -u 1 node_modules/test/test.js 表示只拷 test/test.js这个路径。copyfiles -u 2 node_modules/test/test.js 就是只拷test.js文件,不带目录。

其他用法:

Usage: copyfiles [options] inFile [more files ...] outDirectory

  Options:

    -u, --up       slice a path off the bottom of the paths               [number]

    -a, --all      include files & directories begining with a dot (.)   [boolean]

    -f, --flat     flatten the output                                    [boolean]

    -e, --exclude  pattern or glob to exclude (may be passed multiple times)

    -E, --error    throw error if nothing is copied                      [boolean]

    -V, --verbose  print more information to console                     [boolean]

    -s, --soft     do not overwrite destination files if they exist      [boolean]

    -F, --follow   follow symbolink links                                [boolean]

    -v, --version  Show version number                                   [boolean]

    -h, --help     Show help       

参考:https://www.npmjs.com/package/copyfiles

Logo

瓜分20万奖金 获得内推名额 丰厚实物奖励 易参与易上手

更多推荐