如何在使用 webpack 时将静态文件导入资产目录中的 js 中

Question

我有 es6 angularjs 应用程序，这在我的webpack.config.js文件中：

plugins: [
    new webpack.optimize.CommonsChunkPlugin({
        name: "vendor",
        minChunks: function (module) {
            // this assumes your vendor imports exist in the node_modules directory
            return module.context && module.context.indexOf("node_modules") !== -1;
        }
    }),
    new CopyWebpackPlugin([
        {from: 'favicon', to: 'favicon'},
        {from: 'index.html'},
        {from: 'rpc.php'},
        {from: 'json-rpc.php'},
        {from: '.htaccess'}
    ])
],
module: {
    loaders: [
        {
            test: /.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
                presets: ['env']
            }
        },
        {
            test: /jquery(.min)?.js$/,
            loader: 'expose-loader?jQuery'
        },
        {
            test: /.html$/,
            loader: 'html-loader'
        },
        {
            test: /.css$/,
            loaders: ['style-loader', 'css-loader']
        },
        {
            test: /.(eot|woff2?|ttf|svg)$/,
            loader: 'file-loader'
        }
    ]
}

我的dist文件夹看起来像这样：

448c34a56d699c29117adc64c43affeb.woff2  e18bbf611f2a2e43afc071aa2f4e1512.ttf   index.html
89889688147bd7575d6327160d64e760.svg    f4769f9bdb7466be65088239c12046d1.eot   json-rpc.php
app.js                                  fa2772327f55d8198301fdb8bcfc8158.woff  rpc.php
dac34d70a97c4088841fb6f5f3d2df62.svg    favicon                                vendor.js

如何在资产目录中制作静态文件(由文件加载器加载(，例如字体或 SVG 文件(一个来自其中一个文件中导入的图像，一个来自引导程序(？

Answer 1

我需要添加outputPath：

{
    test: /.(eot|woff2?|ttf|svg)$/,
    loader: 'file-loader?outputPath=/assets/'
}

对于 webpack-dev-server，我需要添加：

  "scripts": {
    "webpack": "NODE_ENV=production webpack",
    "serve": "NODE_ENV=development webpack-dev-server --hot"
  },

在package.json和webpack.config.js中：

{
    test: /.(eot|woff2?|ttf|svg)$/,
    loader: 'file-loader' +
        (process.env.NODE_ENV == 'production' ? '?publicPath=assets/&outputPath=/assets/' : '')
}