webpack如何将某个目录输出到构建目录下

1. 安装插件 CopyWebpackPlugin
将单个文件或整个目录复制到输出目录(outpath);
npm安装插件:

npm install copy-webpack-plugin -D

需要输出的文件夹为:存放静态资源图片的images文件夹:
在这里插入图片描述
2. 在webpack配置文件中配置,将images文件输出到outpath路径中
在这里插入图片描述
我的webpack所有配置文件代码:

const path = require('path');
const webapck = require("webpack");
const CopyWebpackPlugin = require('copy-webpack-plugin');

let config = {
  mode: 'none',
  entry: {
    DrawAndMeasureHelper: path.join(__dirname, './app.js')
  },
  output: {
    filename: '[name].bundle.js',
    path: path.join(__dirname, './dist')
  },
  module: {
    rules: [{
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.js$/,
        exclude: /node_module/,
        loader: 'babel-loader'
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        use: [{
          loader: 'file-loader',
          options: {
            name: '[hash:3]_[name].[ext]', // 打包后的文件名称
            outputPath: '',
            publicPath: '../img/',
            useRelativePath: true
          }
        }]
      },
      {
        test: /\.(otf|eot|svg|ttf|woff|woff2)$/,
        use: [{
          loader: 'url-loader',
          options: {
            name: '[name].[ext]', // 打包后的文件名称
            outputPath: '', // 默认是dist目录
            publicPath: '../font/', // 图片的url前面追加'../font'
            useRelativePath: true, // 使用相对路径
            limit: 50000 // 表示小于1K的图片会被转化成base64格式
          }
        }]
      }
    ]
  },
  resolve: {
    alias: {
      jquery: path.resolve(__dirname, "lib/jquery/jquery.min.js"),
      turf: path.resolve(__dirname, "lib/turf/turf.min.js"),
      layer: path.resolve(__dirname, "lib/layui/layui.all.js"),
      "layer.css":path.resolve(__dirname, "lib/layui/css/layui.css")
    }
  },
  plugins: [
    new webapck.ProvidePlugin({
      $: 'jquery',
      jquery: 'jquery',
      turf: 'turf'
    }),
    //-------------------------------复制文件夹到dist目录下---------------
    new CopyWebpackPlugin([
      {from: path.join(__dirname, 'images'),to: path.join(__dirname, 'dist/images')}
  ])
  ]
}

module.exports = config
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ponGISer

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值