Webpack 不打包 Angular2 组件样式背景 url答案

【问题标题】：Webpack does not package Angular2 component styles background urlWebpack 不打包 Angular2 组件样式背景 url
【发布时间】：2016-10-23 00:25:03
【问题描述】：

我有一个 HomeComponent，它通过

加载 home.css

styleUrls: ['home.css']

home.css

.home {
    background: url('../../img/home.png') no-repeat;
}

（有一个有效的路径）

Webpack 不会将 assets 目录中的图像与 npm run build 捆绑在一起，也不会在 dev 模式下使用 npm start 加载它。

webpack.common.js（来自official Angular2 tutorial）：

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var helpers = require('./helpers');

module.exports = {
    entry: {
        'polyfills': './src/polyfills.ts',
        'vendor': './src/vendor.ts',
        'app': './src/main.ts'
    },

    resolve: {
        extensions: ['', '.js', '.ts']
    },

    module: {
        loaders: [
             {
                 test: /\.ts$/,
                 loaders: ['awesome-typescript-loader', 'angular2-template-        loader']
            },
            {
                test: /\.html$/,
                 loader: 'html'
            },
            {
                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
                loader: 'file?name=assets/[name].[hash].[ext]'
            },
            {
                test: /\.css$/,
                exclude: helpers.root('src', 'app'),
                loader: ExtractTextPlugin.extract('style', 'css?sourceMap')
            },
            {
                test: /\.css$/,
                include: helpers.root('src', 'app'),
                loader: 'raw'
            }
        ]
    },

    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: ['app', 'vendor', 'polyfills']
        }),

        new HtmlWebpackPlugin({
            template: 'src/index.html'
        })
    ]
};

我还尝试使用 npm install resolve-url 帮助构建 te dist 文件夹文件，但不是使用 npm start 构建实时开发（来自教程）

...
//instead of the 'raw' loader            
{
    test: /\.css$/,
    include: helpers.root('src', 'app'),
    loaders: ['style','css?sourceMap', 'resolve-url']
 }

【问题讨论】：

标签： angular webpack

【解决方案1】：

您确定您已正确配置angular2-template-loader 吗？您在上面发布的版本似乎存在一些问题（加载程序名称中的一些空格）。但我认为这是由于将您的源代码粘贴到 stackoverflow 而您的源代码看起来不像这样。

与示例项目不同的是您在 styleUrls 数组中引用 css 文件的方式。

您能否尝试将文件引用为相对路径，例如 styleUrls: ['./home.css'] 而不是 styleUrls: ['home.css']？这可能会影响angular2-template-loader 尝试解析文件的方式。

【讨论】：

【解决方案2】：

我最终使开发环境工作并通过简单地更改 webpack.common.js 中的 css 'raw' 加载器为生产 dist 文件夹生成图像

        {
            test: /\.css$/,
            include: helpers.root('src', 'app'),
            loaders: ['to-string', 'style', 'css?sourceMap']
        }

并安装npm to-string。

在这种情况下，我不需要使用任何解析 URL 加载器。

【讨论】：