Javascript 未找到网页包模块问题
我是Webpack的新手(在使用Gulp之前),现在我想将现有的应用程序从Gulp移动到Webpack 但我遇到了诸如模块未找到:错误:无法解析“/var/www/project”中的“/src/app/index.js”或“/var/www/project”中的“/code>模块未找到:错误:无法解析“/src/styles/main.scss”以及我在enty链上使用的每个文件 以下是我的文件结构:Javascript 未找到网页包模块问题,javascript,webpack,Javascript,Webpack,我是Webpack的新手(在使用Gulp之前),现在我想将现有的应用程序从Gulp移动到Webpack 但我遇到了诸如模块未找到:错误:无法解析“/var/www/project”中的“/src/app/index.js”或“/var/www/project”中的“/code>模块未找到:错误:无法解析“/src/styles/main.scss”以及我在enty链上使用的每个文件 以下是我的文件结构: package.json 环境署署长 环境署署长 webpack.conf.js src/
- package.json
- 环境署署长
- 环境署署长
- webpack.conf.js
- src/
- 应用程序/
- index.js
- 其他js/vue相关文件
- 风格/
- main.scss和所有相关样式
- 公开的/
- index.html
- favicon.ico
- 图像/
- 所有图像
- 应用程序/
webpack.conf.js
:
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const Dotenv = require('dotenv-webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const path = require('path');
const webpack = require('webpack');
const ENV = process.env.APP_ENV;
const isDev = ENV === 'dev'
const isProd = ENV === 'prod';
function setDevTool() {
if (isDev) {
return 'inline-source-map';
} else if (isProd) {
return 'source-map';
} else {
return 'eval-source-map';
}
}
const config = {
entry: {
'bundle.min.css': [
path.resolve(__dirname, '/src/styles/main.scss'),
],
'bundle.js': [
path.resolve(__dirname, '/src/app/index.js')
]
},
output: {
filename: '[name]',
path: path.resolve(__dirname, 'dist'),
},
devtool: setDevTool(),
module: {
rules: [
// fonts loader
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts/'
}
},
// babel loader
{
test: /\.js$/,
use: 'babel-loader',
exclude: [
/node_modules/
]
},
// raw html loader
{
test: /\.html/,
loader: 'raw-loader'
},
// css loader
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
})
},
// sass loader
{
test: /\.(sass|scss)$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['style-loader', 'css-loader', 'sass-loader']
})
},
// vue loader
{
test: /\.vue$/,
loader: 'vue-loader'
},
// image url inliner
{
test: /\.(jpe?g|png|gif)$/,
loader: 'url-loader',
options: {
limit: 50 * 1024
}
},
// svg url inliner
{
test: /\.svg$/,
loader: 'svg-url-loader',
options: {
limit: 50 * 1024,
noquotes: true,
}
},
// image loader
{
test: /\.(jpg|png|gif|svg)$/,
loader: 'image-webpack-loader',
enforce: 'pre'
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: __dirname + "/src/public/index.html",
inject: 'body'
}),
new Dotenv({safe: true}),
new ExtractTextPlugin("bundle.min.css"),
new VueLoaderPlugin()
],
devServer: {
contentBase: './src',
port: 7700,
}
}
if (isProd) {
config.plugins.push(
new UglifyJSPlugin(),
new CopyWebpackPlugin([{
from: __dirname + '/src/public'
}])
);
};
module.exports = config;
我不明白为什么它找不到这些文件,例如它在错误中提到的“/var/www/project//src/styles/main.scss”是正确的路径?尝试从
path.resolve()
中删除初始斜杠。例如:
path.resolve(uu dirname,'/src/styles/main.scss')
应该是:
path.resolve(uu dirname,'src/styles/main.scss')
是否尝试删除初始斜杠?i、 e./src/styles/main.scss
!你说得对,看起来很有帮助,谢谢!我用作参考的配置示例也有后面的斜杠。现在我有其他的错误,但这是另一个故事。创造答案,我会接受的很高兴听到这个。祝你好运