Question

我有一个Angular应用程序，它使用webpack作为模块捆绑器。此应用程序还使用一些其他项目的资产（图像，字体，样式），这些项目作为node_modules导入。

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

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

现在，在我的scss中，我有一些对图像src="/images/..."的引用，它们位于node_modules / my_assets / images中，所以我使用了copy-webpack-plugin将图像包含在bundle time中

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应该能够自己构建依赖树。

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

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

从Webpack sass-loader does not provide url rewriting开始，你必须告诉webpack根据构建后移动资产的地方重写它们。

Webpack 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复制文件：

从版本3.0.0开始，我们停止使用fs将文件复制到文件系统并根据webpack的in-memory filesystem启动：


... webpack-dev-server将提供构建文件夹中的静态文件。它会查看您的源文件以进行更改，并且在进行更改时，将重新编译该包。此修改的包在内存中以publicPath中指定的相对路径提供（请参阅API）。它不会写入配置的输出目录。


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

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

1 个答案:

旁注