webpack引入iconfont图标报错
工程目录:
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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论