Question

我对webpack非常新，实际上是整个现代前端开发。我过去几周试图学习angular2，直到我想部署它才行。我遇到了生成index.html的webpack，脚本上包含了所有angular2东西，所以我可以部署我正在试验的网站。

问题在于我的图像路径似乎没有被webpack处理。 Html和CSS很好，但是当我尝试做类似的事情时：

import {ImageSection} from './image-section';

export const PAGEONE: ImageSection = {
    title: "Page One",
    imgsrc: "../../../public/images/pageone.png"
}

这是我的网络包配置：

webpack.common.js

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: ['', '.ts', '.js']
  },

  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'
    })
  ]
};

我应该在.ts上添加一些加载器吗？我真的很想学习角度，原谅我在webpack上的无聊。我真的很想让它工作，首先学习角度到至少一个舒适的程度，然后开始学习这个webpack的东西。

Answer 1

webpack无法猜测任意JavaScript字符串，是否需要加载字符串。您需要require资源。在您的示例中，替换

imgsrc: "../../../public/images/pageone.png"

带

imgsrc: require("../../../public/images/pageone.png")

这会在输出目录中将pageone.png作为文件发出，并返回公共URL。有关详细信息，请参阅usage section of the file-loader。

Webpack配置未在.ts文件上加载我的图像路径

webpack.common.js

1 个答案: