批量移动所有文件

Question

我应该使用哪个加载器/插件将多个html文件从一个文件夹（src）移动到另一个文件夹（dist），该文件只导入符合本例中某些规则的文件我需要导入多个html文件，因此正则表达式将是：

/。HTML $ /

我知道我可以使用html-webpack-plugin移动html，但我不想为每个想要移动的页面创建对象实例。我也不想在我的app.js中进行多次导入（webpack的入口点）。

所以我尝试使用copy-webpack-plugin，但是这个从src移动到dist。是否可以使用我的正则表达式模式进行过滤，或者您是否知道其他方法可以做到这一点？

new CopyWebpackPlugin([{ 
    from: './src',
    to: path.resolve(__dirname, "dist")
}],

我猜我可以使用系统

mkdir dist && cp ./src/*.html ./dist

在运行webpack -d之前，只需在脚本中的package.json中运行它但这不是＆＃34;礼貌＆＃34;这样做的方式。我确信webpack可以轻松地做到这一点..

聚苯乙烯。此外，如果可能的话，最小化这些文件会很好。

Answer 1

批量移动所有文件

所以现在它的工作原理是这样的。为了不必将src文件夹中的每个文件都包含在我的app.js（这是我的webpack的入口点）中，我需要使用require.context（）的所有文件

因为我的app.js也在我的src文件夹中，所以我使用相对路径来要求所有其他文件：

// requires all files in current directory and sub directories
require.context("./", true, /^\.\/.*\..*/);

或者，如果您想要导入具有特定扩展名的文件，请改为使用：

// requires all html files in current directory and sub directories
require.context("./", true, /^\.\/.*\.html/);

所以现在一切都已导入，我不需要手动输入文件。我唯一要做的就是使用path.resolve设置app.js的条目。

我现在可以使用test属性从webpack.config.js模块规则中获取我想要的内容。

 ...
  module: {
    rules: [
      { 
        test: /\.(html)$/,
        use:
          [
            {
              loader: 'file-loader',
              options: {
                name: '[path][name].[ext]',
                context: './src',
                outputPath: '/',
                publicPath: '/'
              }
            },
            ...

这样可以正常移动我的文件（但不会缩小）。也许有人可以更进一步，答案将完成。

下面我放置完整档案仅供参考

<强> webpack.config.js

// imports node plugin which allows us to save data to a file for example css external files
var ExtractTextPlugin = require("extract-text-webpack-plugin");
// cleans defined folders before webpack will build new files now we can remove package.json commands "rm -rf ./dist && ..."
var CleanWebpackPlugin = require("clean-webpack-plugin");
// copies to memory html from template file and injects css and javascript as well as img src to newly generated html file. 
var HtmlWebpackPlugin = require("html-webpack-plugin");
// to include jquery we need to import 'jquery' in app.js but also we need to make connection between bundle.js jquery script
var Webpack = require('webpack');
// includes node path resover that is need for webpack-dev-server to run properly
var path = require('path');

// webpack configuration 
module.exports = {
  entry: [
    path.resolve(__dirname, "src/app.js"),
  ],
  output: {
    path: path.resolve(__dirname, 'dist'), // defins the main utput directory
    filename: 'js/bundle.js',
  },
  devServer: {
    contentBase: path.join(__dirname, "dist"),
    compress: true,
    port: 8080,
  },
  module: {
    rules: [
      { 
        test: /\.(html)$/,
        use:
          [
            {
              loader: 'file-loader',
              options: {
                name: '[path][name].[ext]',
                context: './src',
                outputPath: '/',
                publicPath: '/'
              }
            }, 

          ]
      },
      {
        test: /\.(jpg|png|gif)$/,
        use: {
          loader: 'file-loader',
          options: {
            name: '[name].[ext]',
            outputPath: 'img/',
            publicPath: '/' // this path relates to reference path from the index.html file that imports out bundle.js file
          }
        }
      },
      {
        test:  /\.js$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['es2015']
            }
          }
        ]
      },
      {
        test: /\.sass$/,
        include: [
          path.resolve(__dirname, "src/sass")
        ],
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          //resolve-url-loader may be chained before sass-loader if necessary
          use: [
            {
              loader: 'css-loader',
              options: {
                minimize: false,
                sourceMap: true,
              }
            },
            'sass-loader'
          ]
        })
      },
    ]
  },
  plugins: [
    // mapping jQuery variable to our node module dependency (remember to import 'jquery' in app.js)
    // below we make jquery available as both the $ and jQuery variable
    new Webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    }),
    // use extract plugin to build an external file loded by sass-loader > complied to css > movig to bundle.css
    new ExtractTextPlugin({
      filename: 'css/bundle.css'
    }),
    // remove all files from this folder before generating new files
    // new CleanWebpackPlugin(['dist']),
  ],
}

Answer 2

您应该能够使用copy-webpack-plugin对globs的支持来实现您的目标。

 new CopyWebpackPlugin([
   {
    from: './src/*.html',
    to: path.resolve(__dirname, 'dist')
  }
])

全球也接受minimatch options。

编辑：

此外，如果您只是复制HTML（并希望缩小它们），您可能需要查看html-webpack-plugin。 minify选项允许您缩小这些HTML文件。

使用webpack2复制多个html文件（从src到dist文件夹）

2 个答案:

批量移动所有文件