copy-webpack-plugin,包含/ node_modules中的字体

Question

我有一个Angular应用程序,它使用webpack作为模块捆绑器.此应用程序还使用一些其他项目的资产(图像,字体,样式),这些项目作为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那么这个工具不适合您。

\n

给定你的字体和 SCSS 加载器，Webpack 应该能够自行构建依赖关系树。

\n

从 Webpack 配置中删除CopyWebpackPlugin设置并确保显式设置output.publicPath设置。

\n

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

\n

由于Webpacksass-loader不提供 url 重写，因此您必须告诉 webpack 将它们相应地重写到构建后资源移动的位置。

\n

Webpackresolve-url-loader 插件正是这样做的。将其直接放在 CSS 加载器链中的 sass-loader 之后，您就可以开始了。

\n

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

\n

边注

\n

copy-webpack-plugin 文档，清楚地解释了为什么该插件不使用 webpack-dev-server 复制文件：

\n

\n

从 3.0.0 版本开始，我们停止使用 fs 将文件复制到文件系统，并开始依赖于 webpack 的内存文件系统：

\n

\n

... webpack-dev-server 将提供构建文件夹中的静态文件。它\xe2\x80\x99将监视您的源文件是否有更改，并且当发生更改时，捆绑包将被重新编译。此修改后的包是从内存中 publicPath 中指定的相对路径提供的（请参阅 API）。它不会写入您配置的输出目录。

\n

\n

如果必须让 webpack-dev-server 写入输出目录，可以使用write-file-webpack-plugin强制执行强制执行。

\n

\n