我正试着从Gulp转到Webpack。在Gulp中,我有一个任务,它将所有文件和文件夹从/static/文件夹复制到/build/文件夹。如何用Webpack做同样的事情?我需要一些插件吗?


当前回答

webpack配置文件(在webpack 2中)允许你导出承诺链,只要最后一步返回一个webpack配置对象。参见承诺配置文档。从这里开始:

webpack现在支持从配置文件中返回Promise。这允许在配置文件中进行异步处理。

你可以创建一个简单的递归复制函数来复制你的文件,并且只在触发webpack之后。例如:

module.exports = function(){
    return copyTheFiles( inpath, outpath).then( result => {
        return { entry: "..." } // Etc etc
    } )
}

其他回答

你可以在package.json中编写bash:

# package.json
{
  "name": ...,
  "version": ...,
  "scripts": {
    "build": "NODE_ENV=production npm run webpack && cp -v <this> <that> && echo ok",
    ...
  }
}

我也被困在这里了。Copy-webpack-plugin对我有用。

然而,'copy-webpack-plugin'在我的情况下是不必要的(我后来才知道)。

Webpack忽略根路径 例子

<img src="/images/logo.png'>

因此,在不使用copy-webpack-plugin的情况下实现此功能 在路径中使用“~”

<img src="~images/logo.png'>

'~'告诉webpack将'images'视为一个模块

注意: 您可能必须在中添加images目录的父目录

resolve: {
    modules: [
        'parent-directory of images',
        'node_modules'
    ]
}

访问https://vuejs-templates.github.io/webpack/static.html

如果你想复制静态文件,你可以这样使用文件加载器:

对于HTML文件:

在webpack.config.js中:

module.exports = {
    ...
    module: {
        loaders: [
            { test: /\.(html)$/,
              loader: "file?name=[path][name].[ext]&context=./app/static"
            }
        ]
    }
};

在js文件中:

  require.context("./static/", true, /^\.\/.*\.html/);

./static/相对于js文件的位置。

你可以对图像或其他东西做同样的事情。 语境是一种强大的探索方法!!

让我们说你所有的静态资产都在一个文件夹“静态”在根级别,你想复制他们到构建文件夹维护子文件夹的结构,然后 在你的参赛档案中)

//index.js or index.jsx

require.context("!!file?name=[path][name].[ext]&context=./static!../static/", true, /^\.\/.*\.*/);

我加载静态图像和字体的方式:

module: {
    rules: [
      ....

      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        /* Exclude fonts while working with images, e.g. .svg can be both image or font. */
        exclude: path.resolve(__dirname, '../src/assets/fonts'),
        use: [{
          loader: 'file-loader',
          options: {
            name: '[name].[ext]',
            outputPath: 'images/'
          }
        }]
      },
      {
        test: /\.(woff(2)?|ttf|eot|svg|otf)(\?v=\d+\.\d+\.\d+)?$/,
        /* Exclude images while working with fonts, e.g. .svg can be both image or font. */
        exclude: path.resolve(__dirname, '../src/assets/images'),
        use: [{
          loader: 'file-loader',
          options: {
            name: '[name].[ext]',
            outputPath: 'fonts/'
          },
        }
    ]
}

不要忘记安装文件加载器来让它工作。