webpack引入iconfont图标报错

发布于 2022-09-04 15:47:06 字数 4063 浏览 16 评论 0

工程目录:

clipboard.png

index.styl文件:

@import "./reset.styl"
@import "./common.styl"
@import "./icon.styl"

然后在welcome.js文件中引入index.styl文件

import "./common/stylus/index.styl";

启动工程,访问welcome.html报错:
 TypeError: n[t] is undefined        

...hot:l(t),parents:Z,children:[]};return n[t].call(e.exports,e,e.exports,c(t)),e.l...

但是我直接引入icon.styl文件:

import "./common/stylus/icon.styl";

并没有出现错误。
我的webpack.build.config.js文件配置如下:

// nodejs 路径对象
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var webpack = require('webpack');

module.exports = {
    // 入口路径
    entry: {
        index : path.resolve(__dirname, '../src/index.js'),
        welcome : path.resolve(__dirname, '../src/welcome.js'),
        venders: [
            'Vue', 'VueResource', 'VueRouter'
        ]
    },
    // 输入处理
    output: {
        path: path.resolve(__dirname, '../dist'),
        publicPath: './',
        filename: 'js/[name].[hash].js',
        chunkFilename: 'js/[id].[chunkhash].js'
    },
    resolve: {
        extensions: ['', '.js', '.vue'],
        alias : {
            Vue : 'vue/dist/vue.min.js',
            VueResource : 'vue-resource/dist/vue-resource.js',
            VueRouter : 'vue-router/dist/vue-router.js'
        }
    },
    module: {
        loaders: [
            // 加载器
            {
                test: /\.vue$/,
                loader: 'vue',
                exclude: /node_modules/
            },
            {
                test: /\.js$/,
                loader: 'babel',
                exclude: /node_modules/
            },
            {
                test: /\.(styl)$/,
                loader: ExtractTextPlugin.extract('style-loader', ['css-loader', 'stylus-loader']),
                exclude: /node_modules/
            },
            {
                test: /\.(png|jpg|ico)$/,
                loader: 'url-loader?limit=8192&name=imgs/[name].[hash].[ext]',
                exclude: /node_modules/
            },
            {test: /\.css$/,loader: 'style!css'},
            {test: /\.eot/,loader : 'file?prefix=font/'},
            {test: /\.woff/,loader : 'file?prefix=font/&limit=10000&mimetype=application/font-woff'},
            {test: /\.ttf/, loader : 'file?prefix=font/'},
            {test: /\.svg/, loader : 'file?prefix=font/'}
        ]
    },
    babel : {
        presets: ['es2015', 'stage-0'],
        plugins: ['transform-runtime']
    },
    vue : {
        loaders: {
            css : ExtractTextPlugin.extract('style-loader', ['css-loader', 'stylus-loader']),
            js : 'babel'
        }
    },
    plugins: [
        //js压缩插件
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            }
        }),
        //部分公共js压缩
        new webpack.optimize.CommonsChunkPlugin({
            name: 'venders',
            filename: 'js/venders/venders.js'
        }),
        // css压缩
        new ExtractTextPlugin("css/style.[contenthash].css"),
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: path.resolve(__dirname, '../src/index.html'),
            inject: true,
            chunks : ['index', 'venders']
        }),
        new HtmlWebpackPlugin({
            filename: 'welcome.html',
            template: path.resolve(__dirname, '../src/welcome.html'),
            inject: true,
            chunks : ['welcome', 'venders']
        }),
        // 把指定的文件复制到指定的目录
        new CopyWebpackPlugin([
            // from写的是源文件名,这里的位置是在项目根目录下,to是写将要复制过去的目录位置,相对于输出的js文件
            {from:'src/imgs/favicon.ico',to:"imgs/favicon.ico"}
        ])
    ]
};

有知道问题的解答的办法吗?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文