Javascript 使用网页包添加目录
我决定给webpack一个机会,我正在为一个小项目使用初学者工具包。我不确定哪里出了问题,但我想添加一个新的文件目录,并像其他构建一样访问它们。在本例中,它是文件夹“particles.js master”。当我添加目录时,我似乎无法访问文件夹中的任何内容。我假设我必须添加一个输出或类似的网页配置?如有任何建议,将不胜感激,谢谢:) 这是我的项目结构 网页:Javascript 使用网页包添加目录,javascript,html,css,webpack,Javascript,Html,Css,Webpack,我决定给webpack一个机会,我正在为一个小项目使用初学者工具包。我不确定哪里出了问题,但我想添加一个新的文件目录,并像其他构建一样访问它们。在本例中,它是文件夹“particles.js master”。当我添加目录时,我似乎无法访问文件夹中的任何内容。我假设我必须添加一个输出或类似的网页配置?如有任何建议,将不胜感激,谢谢:) 这是我的项目结构 网页: const path = require('path'); const webpack = require('webpack'); co
const path = require('path');
const webpack = require('webpack');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const PreloadWebpackPlugin = require('preload-webpack-plugin');
const CssUrlRelativePlugin = require('css-url-relative-plugin');
const glob = require('glob');
const IS_DEV = process.env.NODE_ENV === 'dev';
const config = {
mode: IS_DEV ? 'development' : 'production',
devtool: IS_DEV ? 'eval' : 'source-map',
entry: './src/js/index.js',
output: {
filename: 'js/[name].[hash].js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
},
{
test: /\.scss$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
hmr: IS_DEV,
},
},
'css-loader',
'sass-loader',
],
},
{
test: /\.(gif|png|jpe?g|svg)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
name: '[name].[ext]',
fallback: 'file-loader',
outputPath: 'public/images',
},
},
{
loader: 'image-webpack-loader',
options: {
mozjpeg: {
progressive: true,
quality: 65,
},
pngquant: {
quality: '65-90',
speed: 4,
},
gifsicle: {
interlaced: false,
},
webp: {
quality: 75,
},
},
},
],
},
],
},
plugins: [
new CleanWebpackPlugin(),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'windows.jQuery': 'jquery',
}),
new CopyWebpackPlugin([
{
from: './src/public',
to: 'public',
},
]),
new MiniCssExtractPlugin({
filename: IS_DEV ? 'css/[name].css' : 'css/[name].[contenthash].css',
chunkFilename: 'css/[id].css',
}),
new webpack.HashedModuleIdsPlugin(),
new PreloadWebpackPlugin({
include: 'initial',
}),
new CssUrlRelativePlugin(),
],
devServer: {
contentBase: path.join(__dirname, 'src'),
},
optimization: {
runtimeChunk: 'single',
splitChunks: {
cacheGroups: {
vendor: {
test: /node_modules/,
chunks: 'initial',
name: 'vendor',
priority: 10,
enforce: true,
},
},
},
minimizer: [],
},
};
if (!IS_DEV) {
const TerserPlugin = require('terser-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
config.optimization.minimizer.push(
new TerserPlugin(),
new OptimizeCSSAssetsPlugin({})
);
}
const files = glob.sync('./src/*.html');
files.forEach(file => {
config.plugins.push(
new HtmlWebPackPlugin({
filename: path.basename(file),
template: file,
favicon: path.resolve(__dirname, './src/public/icon.ico'),
minify: !IS_DEV,
})
);
});
module.exports = config;
“particles.js master”文件夹中是什么?您确定要从“src/js/index.js”中的“particles.js master”导入文件吗?您所说的“像任何其他构建一样访问它们”是什么意思?就像从这个目录导入文件一样?确切地说,我已经习惯了非常简单的构建,所以这对我来说都是全新的。当我向项目中添加文件夹时。我需要执行哪些步骤才能访问它们并将它们导入到项目中,因此您希望将文件从
src/particles.js master
导入到另一个文件中?你想导入到哪个文件?我只是想访问那个文件夹,我一定想得太多了。我想访问particles.js以及该文件夹中的package.json