webpack - 使用/node_modules 中的字体复制 webpack-plugin

Question

我有一个使用 webpack 作为模块捆绑器的 Angular 应用程序。
此应用程序还使用了一些其他项目中的一些 Assets (图像、字体、样式)，这些项目作为 node_modules 导入。

我的应用程序的结构是这样的

src/
  app/
    ...
  stylesheets/
    application.scss

现在，在我的 scss 中，我引用了一些图片 src="/images/..." ，它们在 node_modules/my_assets/images 中，所以我使用 copy-webpack-plugin 将图像包含在捆绑时间中

new CopyWebpackPlugin([
  { from: 'node_modules/my-assets/images', to: 'images' },
  { from: 'node_modules/my-assets/favicons', to: 'favicons' },

这工作正常。

现在的问题是字体。我有相同的结构，但是当样式表引用字体时，现在使用的是相对 url ./fonts/Open-Sans-300/Open-Sans-300.eot
所以我试着和以前一样

new CopyWebpackPlugin([
  { from: 'node_modules/my-assets/images', to: 'images' },
  { from: 'node_modules/my-assets/favicons', to: 'favicons' },
  { from: 'node_modules/my-assets/fonts', to: 'fonts' }
])

这是行不通的。如果我直接在我的/src/stylesheets 文件夹中手动复制/fonts 文件夹，它可以正常工作。我猜因为它是相对的，所以我没有复制我必须复制的文件夹，所以我尝试了很多变体:

{ from: 'node_modules/my-assets/fonts', to: '/fonts' },
{ from: 'node_modules/my-assets/fonts', to: './fonts' },
{ from: 'node_modules/my-assets/fonts', to: 'src/stylesheets/fonts' },
{ from: 'node_modules/my-assets/fonts', to: '/src/stylesheets/fonts' }

这些都不起作用。知道为什么不？而我应该写什么呢？

我还应该提到我有一个字体加载器

{ 
 test: /\.(png|woff|woff2|eot|ttf|svg)$/, 
 loader: 'url-loader?limit=100000'
}

这似乎工作正常。

编辑:我还必须说，这个问题发生在使用 webpack-dev-server 时，所以我真的不知道 webpack 在做这样的事情时在哪里复制文件 { from: 'node_modules/my-assets/images', to: 'images' }
谢谢

Answer 1

如果您只想让您的 SASS 文件能够解析静态资源(如图像或字体)的路径，CopyWebpackPlugin不是适合您的工具。
给定你的字体和 SCSS 加载器，Webpack 应该能够自己构建依赖关系树。
删除 CopyWebpackPlugin从您的 Webpack 配置中进行设置，并确保显式设置 output.publicPath环境。

output: {
  publicPath: '/',
  /* follows your output config */
},

从 Webpack sass-loader does not provide url rewriting ，您必须告诉 webpack 相应地重写它们以在构建后移动 Assets 的位置。
网页包 resolve-url-loader 插件正是这样做的。将它直接放在 CSS 加载器链中的 sass-loader 之后，您应该可以开始使用了。

{
    test   : /\.scss$/,
    loaders: ['style-loader', 'css-loader', 'resolve-url-loader', 'sass-loader?sourceMap']
}

边注
copy-webpack-plugin docs ，清楚地解释为什么插件不使用 webpack-dev-server 复制文件:

Starting in version 3.0.0, we stopped using fs to copy files to the filesystem and started depending on webpack's in-memory filesystem:

... webpack-dev-server will serve the static files in your build folder. It’ll watch your source files for changes and when changes are made the bundle will be recompiled. This modified bundle is served from memory at the relative path specified in publicPath (see API). It will not be written to your configured output directory.

如果你必须让 webpack-dev-server 写入你的输出目录，你可以用 write-file-webpack-plugin 强制它。 .