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
要将CSS文件打包到css目录下,可以在webpack配置文件中进行如下配置: ```javascript const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = { // ...其他配置 module: { rules: [ { test: /\.css$/, use: [ { loader: MiniCssExtractPlugin.loader, options: { publicPath: '../' // 解决css中引入的图片路径不正确的问题 } }, 'css-loader' ] } ] }, plugins: [ new MiniCssExtractPlugin({ filename: 'css/[name].[chunkhash].css' }) ] } ``` 其中,module.rules配置用于指定如何处理各种类型的文件,plugins配置用于指定插件。这里使用了MiniCssExtractPlugin(需要先安装),它的作用是将CSS文件单独打包到指定的目录下,而不是将CSS代码打包到JS文件中。 在module.rules中配置了针对CSS文件的处理规则,其中使用了css-loader和MiniCssExtractPlugin.loader。css-loader用于解析CSS文件中的@import和url()等语法,并将其转换为Webpack可以理解的语法。MiniCssExtractPlugin.loader用于将CSS代码从JS文件中提取出来并打包到指定目录下,同时也可以处理CSS中引入的图片路径不正确的问题。 在plugins中配置了MiniCssExtractPlugin插件,用于指定打包生成的CSS文件输出目录和文件名。这里将打包生成的所有CSS文件都放在了css目录下,文件名格式为css/[name].[chunkhash].css,其中name表示文件名,chunkhash表示文件的hash值。这样每次打包生成的文件名都不同,有助于缓存更新。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

ponGISer

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

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

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

打赏作者

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

抵扣说明:

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

余额充值