首页 文章

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

提问于
浏览 次
0

我试图通过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

angular webpack webpack-dev-server webpack-2

3 回答

  • 0

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

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

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

    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 dev服务器为给定目录提供静态文件 .

    回复于
  • 0

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

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

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

    回复于

相关问题