• webpack的copywebpackplugin插件


    webpack的copy-webpack-plugin插件的作用是将项目中的某单个文件或整个文件夹在打包的时候复制一份到打包后的文件夹中(即复制一份到dist目录下)。

    效果如下图所示:

    使用方法:

    给项目中添加copy-webpack-plugin插件:

    yarn add copy-webpack-plugin@5.1.2 --save

    然后webpack.dev.js文件配置如下:

    const  CopyPlugin = require("copy-webpack-plugin");
    
    plugins: [
        new webpack.DefinePlugin({
          'process.env': {
            NODE_ENV: JSON.stringify(process.env.NODE_ENV),
            BUILD_ENV: JSON.stringify(process.env.BUILD_ENV)
          }
        }),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoEmitOnErrorsPlugin(),
        // copy custom static assets
        new  CopyPlugin(
          [
            {
              from: path.resolve(__dirname, '../src/public/echarts.js'), to: path.resolve(__dirname, '../dist/static/js/echarts.js')
            },
            {
              from: path.resolve(__dirname, '../src/public/china.js'), to: path.resolve(__dirname, '../dist/static/js/china.js')
            }
          ]
        ),
      ],

    webpack.prod.js文件配置如下:

    const  CopyPlugin = require("copy-webpack-plugin");
    
    plugins: [
          new webpack.DefinePlugin({
            'process.env': {
              NODE_ENV: JSON.stringify(process.env.NODE_ENV),
              BUILD_ENV: JSON.stringify(process.env.BUILD_ENV),
            }
          }),
          new CleanWebpackPlugin(['dist'], {
            root: path.resolve(),
          }),
          new MiniCssExtractPlugin({
            filename: 'static/css/[name]-[contenthash:8].css',
            chunkFilename: 'static/css/[name]-[contenthash:8].css',
          }),
          // copy custom static assets
          new  CopyPlugin(
            [
              {
                from: path.resolve(__dirname, '../src/public/echarts.js'), to: path.resolve(__dirname, '../dist/static/js/echarts.js')
              },
              {
                from: path.resolve(__dirname, '../src/public/china.js'), to: path.resolve(__dirname, '../dist/static/js/china.js')
              }
            ]
          ),
        ]

    关于copy-webpack-plugin其他参数的配置可以查看copy-webpack-plugin

  • 相关阅读:
    区块链基础
    区块链基础
    区块链基础
    区块链基础
    浅淡网易云音乐小号/网易云音乐手机号帐号批量注册/出售网易云音乐小号、网易云音乐手机号帐号
    网易云音乐小号批发/网易云音乐账号售卖/网易云音乐账号怎么购买/网易云音乐真人手机账号
    msyql分区命令,删除命令
    elastic job 发布版本后突然不执行问题解决
    Maven安装以及常用命令
    Linux zip 命令
  • 原文地址:https://www.cnblogs.com/rachelch/p/15650804.html
Copyright © 2020-2023  润新知