vue.js - 关于webpack打包编译 找不到文件的问题。
本文介绍了vue.js - 关于webpack打包编译 找不到文件的问题。的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
我的主要代码如下。
index.html
<!DOCTYPE html>
<html>
<head>
<title>Page</title>
</head>
<body>
<div id='app'>
<app></app>
</div>
<div id='example'>{{ msg }}</div>
<div id='main'></div>
<script type="text/javascript" src='bundle.js'></script>
</body>
</html>entry.js
let Vue = require('vue');
let example = new Vue({
el: '#example',
data: {
msg: 'msg',
}
});
import App from './app';
let test = new Vue({
el: '#app',
components: {
app: App
}
});
import * as main from './src/main';
main.foo('main');
main.bar('hello js');
在src文件下的main.js
var main = document.getElementById('main');
main.innerHTML = 'main';
export function foo (id) {
document.getElementById(id).innerHTML = 'i will change you';
}
export function bar (str) {
var h2 = document.createElement('h2');
h2.style.color = 'blue';
var text = document.createTextNode(str);
h2.appendChild(text);
document.getElementById('main').appendChild(h2);
}
import * as x from './src/temp.js';
x.test();在src文件下的temp.js
export function test () {
alert(1);
}webpack.config.js如下
module.exports = {
entry: ["./entry.js"],
output: {
path: __dirname,
filename: "bundle.js"
},
devServer: {
historyApiFallback: true,
hot: false,
inline: true,
grogress: true,
},
module: {
loaders: [
{ test: /\.vue$/, loader: 'vue' },
{ test: /\.js$/, loader: 'babel', exclude: /node_modules/ },
{ test: /\.css$/, loader: 'style!css!autoprefixer'},
{ test: /\.(html|tpl)$/, loader: 'html-loader' },
]
},
vue: {
loaders: {
css: 'style!css!autoprefixer',
}
},
babel: {
presets: ['es2015'],
plugins: ['transform-runtime']
},
resolve: {
extensions: ['', '.js', '.vue'],
},
}报错就是说 在运行到main.js的时候无法找到temp.js ..
解决方案
src 下的 main.js require src 下的 temp.js 为何还要 src ？
直接 ./temp.js 啊，目录结构的基本知识啊
这篇关于vue.js - 关于webpack打包编译 找不到文件的问题。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
