如何使 webpack 公共路径与相对子文件夹一起使用

Question

>我有以下 webpack 配置文件：

const path = require('path'),
MiniCSSExtractPlugin = require('mini-css-extract-plugin'),
CleanWebpackPlugin = require('clean-webpack-plugin'),
postCssPresetEnv = require('postcss-preset-env'),
postCssScss = require('postcss-scss'),
glob = require('glob'),
autoprefixer = require('autoprefixer');
module.exports = {
entry: {
'material': glob.sync("./src/js/**/*.js"),
'material-light': './src/sass/material.scss'
},
output: {
path: path.resolve(__dirname, '/'),
filename: process.env.NODE_ENV === 'development' ? './dist/js/[name].js' : './docs/dist/js/[name].js',
publicPath: 'docs/dist/'
},
module: {
rules: [
{
test: /.js$/,
exclude: ['/node_modules/', './dist/', '/src/css', '/docs'],
use: [
'babel-loader',
{
loader: 'eslint-loader',
options: {
fix: true
}
}
]
},
{
test: /.(sa|sc|c)ss$/,
exclude: ['/node_modules', './dist', '/src/js', '/docs'],
use: [
MiniCSSExtractPlugin.loader,
{
loader: 'css-loader',
options: {
sourceMap: true,
minimize: process.env.NODE_ENV === 'production',
publicPath: 'docs/dist/'
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: true,
syntax: postCssScss,
plugins: () => [
autoprefixer,
postCssPresetEnv({
stage: 0
}),
],
},
},
{
loader: 'sass-loader',
options: {
sourceMap: true
}
}
]
}
]
},
devServer: {
overlay: true,
contentBase: path.join(__dirname, './docs/'),
publicPath: '/dist/',
watchContentBase: true,
open: true,
},
devtool: process.env.NODE_ENV === 'development' ? 'cheap-module-eval-source-map' : 'source-map',
plugins: [
new MiniCSSExtractPlugin({
filename: process.env.NODE_ENV === 'development' ? './dist/css/[name].css' : './docs/dist/css/[name].css',
}),
new CleanWebpackPlugin(['./dist/', './docs/dist']),
]
};

具有以下文件结构：

/
/docs/
All html files
/src/
/js/
All js files
/sass/
All sass files
webpack.config.js
packages.json

我正在尝试做的是以下内容。对于开发，我正在使用 webpack 开发服务器来提供来自/docs直接的内容。但是，我希望文档中的网址相对于/docs网址，以便我可以使用 GitHub 页面。在/docs/index.html中的含义，我想将material.js文件引用为：./dist/js.对于material-light.css：./dist/css.我想这样做是因为在运行生产时，js，css文件被保存到docs/dist/(css/js)目录中。

但我无法正确引用。在上面的配置中，我docs/dist/了公共路径，但docs/dist/js也不起作用。该问题与 js 和 css 文件都相关。

所以我的问题是我怎样才能使publicPath同时适用于 webpack 开发服务器和 github 页面？

相关但不起作用：

• https://github.com/webpack/webpack-dev-server/issues/995
• https://github.com/webpack/webpack-dev-server/issues/954
• Webpack：由于 publicPath 而导致的/src 和/dist 文件的问题
• https://www.reddit.com/r/reactjs/comments/6cv8dd/running_webpackdevserver_in_a_sub_directory_not/
• 子目录中的 webpack-dev-server - 不编译和无热重载

Answer 1

配置存在多个问题。在github上问了同样的问题后，我最终得到了以下配置：

const
autoprefixer = require('autoprefixer'),
CleanWebpackPlugin = require('clean-webpack-plugin'),
glob = require('glob'),
MiniCSSExtractPlugin = require('mini-css-extract-plugin'),
path = require('path'),
postCssPresetEnv = require('postcss-preset-env'),
postCssScss = require('postcss-scss');
const OUTPUT_DIR = path.resolve(__dirname, 'docs');
module.exports = {
entry: {
'material': glob.sync("./src/js/**/*.js"),
'material-light': './src/sass/material.scss'
},
output: {
path: OUTPUT_DIR,
filename: 'dist/js/[name].js',
},
module: {
rules: [
{
test: /.js$/,
exclude: ['/node_modules/', './dist/', '/src/css', '/docs'],
use: [
'babel-loader',
{
loader: 'eslint-loader',
options: {
fix: true
}
}
]
},
{
test: /.(sa|sc|c)ss$/,
exclude: ['/node_modules', './dist', '/src/js', '/docs'],
use: [
MiniCSSExtractPlugin.loader,
{
loader: 'css-loader',
options: {
sourceMap: true,
minimize: process.env.NODE_ENV === 'production',
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: true,
syntax: postCssScss,
plugins: () => [
autoprefixer,
postCssPresetEnv({
stage: 0
}),
],
},
},
{
loader: 'sass-loader',
options: {
sourceMap: true
}
}
]
}
]
},
devServer: {
overlay: true,
contentBase: OUTPUT_DIR,
watchContentBase: true,
},
devtool: process.env.NODE_ENV === 'development' ? 'cheap-module-eval-source-map' : 'source-map',
resolve: {
extensions: ['.js', '.css', '.styl', '.scss'],
alias: {
'js': path.resolve(__dirname, './src/js'),
'css': path.resolve(__dirname, './src/css')
}
},
plugins: [
new MiniCSSExtractPlugin({
filename: 'dist/css/[name].css',
}),
new CleanWebpackPlugin(['./dist/', './docs/dist']),
]
};