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

Question

我正在尝试通过 webpack 2 开发服务器在开发中提供静态文件（图像）。我似乎无法让它发挥作用。这将是我的 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

Cannot GET /assets/images/welt_plus.png

Answer 1

你想把你的资产包含在捆绑包中吗（这样你就可以像 js 文件一样需要它们）？还是您想通过 urls/links 向他们 link？

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

如果你想link他们，你必须正确设置contentBase，见https://webpack.js.org/configuration/dev-server/。然后 webpack-dev-server 将充当该文件夹的 http 服务器（当然除了服务包之外）。

Answer 2

TL;DR 在 webpack.config.js 中自定义开发服务器，使其除了提供内置文件外，还提供静态文件。如果你只提供静态文件（*），你甚至不需要文件加载器。配置如下，提供来自 src/ 文件夹的静态文件，假设 webpack.config.js 在项目根目录中：

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

(*) "only serving static" = (1) 您不从您的代码中执行 require('assets/images/foo.png') 并且 (2) 您的 CSS/SCSS 也不需要任何资产，例如不包含任何 url(...)。不过，离开文件加载器也没什么坏处。

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

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

Answer 3

确保 webpackconfig 文件在根目录下，下面的代码应该适合你。编码愉快。

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

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

How to serve assets with the webpack 2 dev server

webpack

webpack-dev-server

webpack-2

angular