Angular 如何使用webpack 2开发服务器为资产提供服务

我试图通过Webpack2dev服务器为开发中的静态文件（图像）提供服务。我似乎无法让它工作。这将是我的网页文件，我正在为Angular 2应用程序提供服务，该应用程序的文件夹

/src/assets/images

：

var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var helpers = require('./helpers');

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

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

    module: {
        rules: [
            {
                test: /\.ts$/,
                loaders: [{
                    loader: 'awesome-typescript-loader',
                    options: { configFileName: helpers.root('src', 'tsconfig.json') }
                } , 'angular2-template-loader']
            },
            {
                test: /\.html$/,
                loader: 'html-loader'
            },
            {
                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
                loader: 'file-loader?name=assets/[name].[ext]'
            },
            {
                test: /\.scss$/,
                exclude: /node_modules/,
                loaders: ['raw-loader', 'sass-loader'] // sass-loader not scss-loader
            },
            {
                test: /\.css$/,
                loaders: ['style-loader', 'css-loader']
            }
        ]
    },

    output: {
        path: path.join(__dirname, '../src/assets'),
        publicPath: '/assets/'
    },

    plugins: [
        // Workaround for angular/angular#11580
        new webpack.ContextReplacementPlugin(
            // The (\\|\/) piece accounts for path separators in *nix and Windows
            /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
            helpers.root('./src'), // location of your src
            {} // a map of your routes
        ),

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

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

我在这里看到两个相关部分，它们都不起作用：

设置为

file loader？name=assets/[name].[ext]

设置为的

输出

字段

output: {
    path: path.join(__dirname, '../src/assets'),
    publicPath: '/assets/'
},

当我加载图像时，就像我得到一个

404

无法获取/assets/images/welt\u plus.png

---

是否要将资产包括在捆绑包中（以便像js文件一样需要它们）？或者您想通过URL/链接链接到它们

如果您认为可以从包中访问它们，请尝试require（'./path/to/asset/image.png'）

---

如果要链接到它们，必须正确设置contentBase，请参阅。然后，webpack dev服务器将充当该文件夹的http服务器（当然，除了为捆绑包提供服务之外）。

是否要将您的资产包括在捆绑包中（以便您可以像js文件一样需要它们）？或者您想通过URL/链接链接到它们

如果您认为可以从包中访问它们，请尝试require（'./path/to/asset/image.png'）

---

如果要链接到它们，必须正确设置contentBase，请参阅。然后，webpack dev服务器将充当该文件夹的http服务器（当然，除了提供捆绑包之外）。

TL；DR在

webpack.config.js

中自定义dev服务器，以便它除了提供构建的文件外，还提供静态文件。如果只提供静态文件（*），则甚至不需要文件加载器。考虑到

webpack.config.js

位于项目根目录中，配置如下，以提供来自

src/

文件夹的静态文件：

module.exports = {
  ...
  devServer: {
    contentBase: [..., path.resolve(__dirname, 'src')],
    ...
  }
}

---

（*）“仅提供静态服务”=（1）您不需要代码中的

资源（'assets/images/foo.png'）

，（2）您的CSS/SCS也不需要任何资源，例如，不包含任何

url（…）

。但是离开文件加载程序并没有什么坏处

---

较长的解释是，静态“资产”文件，例如应用程序使用的

文件，不会由文件加载器或网页包处理。这些都是由浏览器请求的，服务器应该拥有它们。网页包处理“模块”，即

require（…）

，

import。。。从…

等。文件加载器的

webpack.config.js

规则规定，如果某个模块需要另一个名称以png、jpeg结尾的模块，则使用文件加载器

---

上面的配置只是指示Webpack dev服务器为给定目录中的静态文件提供服务。

TL；DR在

webpack.config.js

中自定义dev服务器，以便它除了提供构建的文件外，还提供静态文件。如果只提供静态文件（*），则甚至不需要文件加载器。考虑到

webpack.config.js

位于项目根目录中，配置如下，以提供来自

src/

文件夹的静态文件：

module.exports = {
  ...
  devServer: {
    contentBase: [..., path.resolve(__dirname, 'src')],
    ...
  }
}

---

（*）“仅提供静态服务”=（1）您不需要代码中的

资源（'assets/images/foo.png'）

，（2）您的CSS/SCS也不需要任何资源，例如，不包含任何

url（…）

。但是离开文件加载程序并没有什么坏处

---

较长的解释是，静态“资产”文件，例如应用程序使用的

文件，不会由文件加载器或网页包处理。这些都是由浏览器请求的，服务器应该拥有它们。网页包处理“模块”，即

require（…）

，

import。。。从…

等。文件加载器的

webpack.config.js

规则规定，如果某个模块需要另一个名称以png、jpeg结尾的模块，则使用文件加载器

---

上面的配置只是指示Webpack dev服务器为给定目录中的静态文件提供服务。

确保webpackconfig文件位于根目录中，以下代码应该适用于您。快乐编码

{
  test: /\.png$/,
  include: [
    path.resolve(__dirname, 'images')
  ],
  use: [{
    loader: 'file-loader',
    options: {
      name: '[path][name].[ext]'
    }
  }]
},

---

确保webpackconfig文件位于根目录下，并且以下代码应该适用于您。快乐编码

{
  test: /\.png$/,
  include: [
    path.resolve(__dirname, 'images')
  ],
  use: [{
    loader: 'file-loader',
    options: {
      name: '[path][name].[ext]'
    }
  }]
},

---

我认为，对于开发，您不需要加载器；在

webpack.config.js

中添加

devServer

部分，并将

src

添加到

contentBase

属性中；e、 g.：

devServer:{contentBase:[…，path.resolve（uu dirname，'src'），…}

。开发服务器将直接从您的源文件夹提供文件。很抱歉，我没有看到您的评论，但事实上，这也是我现在找到的解决方案。如果你发布一个官方的回答，我会接受它。我会争辩说，为了发展，你不需要加载器；在

webpack.config.js

中添加

devServer

部分，并将

src

添加到

contentBase

属性中；e、 g.：

devServer:{contentBase:[…，path.resolve（uu dirname，'src'），…}

。开发服务器将直接从您的源文件夹提供文件。很抱歉，我没有看到您的评论，但事实上，这也是我现在找到的解决方案。如果你发布官方答案，我会接受。谢谢，我可以在dev服务器文档中找到答案。但是我很犹豫是否接受你的答案（对不起），所以谷歌的人不会因为没有真正找到答案而失望。谢谢你，我可以在dev服务器文档中找到答案。然而，我很犹豫是否接受你的答案（对不起），所以谷歌的人不会因为没有真正找到答案而感到失望。