Loading fonts from UI package

[dagatsoin]

I am new to webpack config and wonder how to load fonts for package like vue-material?

Here is my webpack.conf.js

"use strict"

const {
    webpack,
    createConfig,
    devServer,
    defineConstants,
    env,
    css,
    entryPoint,
    setOutput,
    sourceMaps,
    addPlugins
} = require("webpack-blocks");
const ts = require("webpack-blocks-ts");
const vue = require("webpack-blocks-vue");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ProgressBarPlugin = require("progress-bar-webpack-plugin");
const autoprefixer = require("autoprefixer");

const basePlugins = [
    // Generate skeleton HTML file
    new HtmlWebpackPlugin({
        inject: true,
        template: "public/index.html"
    }),
    // Show nice progress bar
    new ProgressBarPlugin()
];

const productionPlugins = [
    // Support older plugins/loaders that still use global options
    // see https://webpack.js.org/plugins/loader-options-plugin/
    new webpack.LoaderOptionsPlugin({
        minimize: true,
        debug: false
    }),
    // Minify JavaScript
    new webpack.optimize.UglifyJsPlugin({
        compress: {
            warnings: false
        },
        output: {
            comments: false
        },
        screwIe8: true,
        sourceMap: false
    })
];

module.exports = createConfig([
    // This will use ./src/index.* based on extension resolution order
    entryPoint("./src/main.ts"),

    // Always incude the [hash] because the URL is injected into the skeleton
    // generated by the HtmlWebpackPlugin
    setOutput("./build2/bundle-[hash].js"),

    // CSS loader
    css(),

    // TypeScript loader options are specified in tsconfig.json
    ts({appendTsSuffixTo: [/\.vue$/]}),

    // Vue loader must play nice with TypeScript so we use esModule option
    vue({
        // Make compatible with TS loader
        esModule: true,
        // Use autoprefixer
        postcss: [autoprefixer()]
    }),

    // Make process.env.NODE_ENV available in the client code
    defineConstants({
        "process.env.NODE_ENV": process.env.NODE_ENV
    }),

    // Add all the base plugins
    addPlugins(basePlugins),

    env("development", [
        // In development mode, activate dev server and source maps
        devServer(),
        sourceMaps(),
    ]),

    env("production", [
        // Add all the production plugins
        addPlugins(productionPlugins)
    ])
]);

[andywer]

Hey @dagatsoin,

thanks a lot for sharing! :)

To solve it for now:

const {
  // ...
  file
} = require('webpack-blocks')

module.exports = createConfig([
  // ...
  file('application/font')
])

But I totally agree, the documentation must be improved, especially at this point. To be fair, the assets package was just added, so it's not surprising that there are still rough edges.

That's why your feedback is so important 😉

[dagatsoin]

thx I will try this.

BTW the base config is from @foxbunny from https://github.com/foxbunny/vue-ts-sandbox/

[dagatsoin]

What would be the equivalent of this config?

 {
   test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
   loader: 'url-loader',
   options: {
     limit: 10000,
     name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
   }
 }

[andywer]

That would be

url('application/font', {
  limit: 10000,
  name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
})

(see packages/assets/README.md)