我试图理解javascript中的模块，但是当我尝试编写一个非常简单的模块时，出现CORS错误。我使用方括号作为我的文本编辑器，奇怪的是当我在方括号中使用实时预览时，代码有效，但是当我正常时打开.js文件我得到错误。
index.html
<!DOCTYPE html>
<html>
<head>
<title> JS </title>
</head>
<body>
<script type="module">
import {add} from './libA.js';
console.log(add(10,20));
</script>
</body>
</html>
libA.js
export function add(a,b) {
return a+b ;
}
*我收到此错误-> CORS策略已阻止从源“ null”访问“ file：/// F：/WEB%20DEV/JavaScript/libA.js”处的脚本：无效响应。因此，不允许访问原始“空”。（我也尝试了最新版的chrome）
我有一个 .html 页面（index.html）和一个入口点（index.js），我希望 dist 文件夹保留我的源文件的文件夹结构。
./webpack.config.js
./src/index/index.html
./src/index/index.js
./src/index/script1.js
./src/index/style1.scss
./src/assets/imgs/bg.jpg
我设法编写了一个按我想要的方式工作的 webpack 配置文件，但只有当我使用 'npm run build' 并且 webpack 给我一个最终的构建版本时。如果我使用'npm run dev'，那么开发服务器会打开一个显示目录列表的页面。我该如何解决我的问题？这是我的 webpack.config.js
const webpack = require("webpack");
const path = require("path");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
module.exports = {
mode: 'development',
optimization: {
minimize: false
},
entry: {'index': './src/index/index.js'},
output: {
filename: '[name]/[name].js',
path: path.resolve(__dirname, './dist')
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader"
},
{
test: /\.css$/,
use: …我想在我的页面中有一个水平布局......每当用户滚动页面而不是从上到下的布局我想要从左到右的布局......我的代码在大屏幕上之后有空白空间最后一部分和小屏幕上的最后一部分不会出现。
calcBodyHeight();
function calcBodyHeight() {
const sections = document.querySelectorAll('.section');
let height = null;
sections.forEach(section => {
height += section.offsetWidth;
})
document.body.style.height = `${height}px`;
}
const container = document.querySelector('.container');
window.addEventListener('scroll', e => {
const scroll = window.scrollY;
container.style.left = `-${scroll}px`;
});html,
body {
height: 100%;
}
body {
overflow-x: hidden;
overflow-y: auto;
}
.container {
width: fit-content;
height: 100vh;
display: flex;
position: fixed;
left: 0;
top: 0;
}
.container .section {
width: 100vw;
height: 100%;
display: flex;
justify-content: center;
align-items: …