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文件（一个是从其中一个文件导入的图像，另一个是从bootstrap导入的）？

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/' : '')
}

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

1 个答案: