Question

我正在尝试通过webpack 2 dev服务器在开发中提供静态文件（图像）。我似乎无法使其发挥作用。这将是我的webpack文件，我正在为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'
        })
    ]
};

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

设置为file-loader?name=assets/[name].[ext]

设置为

的output字段

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

当我加载 http://localhost:8080/assets/images/welt_plus.png 之类的图片时，我得到404

无法获取/assets/images/welt_plus.png

Answer 1

TL; DR 自定义webpack.config.js中的开发服务器，以便除了构建的静态文件之外，它还可以提供静态文件。如果您只提供静态文件（*），则甚至不需要文件加载器。如果src/位于项目根目录中，则配置如下，以提供webpack.config.js文件夹中的静态文件：

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

（*）“仅提供静态”=（1）您没有从代码中require('assets/images/foo.png')和（2）您的CSS / SCSS也不需要任何资产，例如：不包含任何url(...)。离开文件加载器并没有什么坏处。

更长的解释是静态“资产”文件，例如具有<img src="the/static/file.png" />的应用程序使用的那些不由文件加载器或Webpack处理。这些是浏览器请求的，服务器应该有它们。 Webpack处理“模块”，即require(...)，import ... from ...等请求的代码和资源。文件加载器webpack.config.js中的规则表示如果某个模块需要另一个名称以？结尾的模块png，jpeg，...，然后使用文件加载器。

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

Answer 2

您是否希望将资产包含在捆绑中（以便您可以像js文件那样要求它们）？或者您想通过网址/链接链接到他们？

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

如果要链接到它们，则必须正确设置contentBase，请参阅https://webpack.js.org/configuration/dev-server/。然后，webpack-dev-server将充当该文件夹的http服务器（当然还要提供捆绑服务）。

Answer 3

确保webpackconfig文件位于root中，以下代码应该适合您。快乐的编码。

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

如何使用webpack 2 dev服务器提供资源

3 个答案: