有人可以帮助我解决我的问题。在其中一个源文件中,我使用代码分割技术
const Home = resolve => require(['./views/Home.vue'], m => resolve(m.default))
,问题是除非我将publicPath输出选项设置为'/ js',否则代码拆分省略/和加载时生成的块请求为jsfb5715f933a55e481dbe.2.js,入口点正常工作并请求正确在'/ js /'或'/ css /'没有任何问题。只有代码拆分生成的块才能在公共路径和文件名之间添加“/”。这是我的配置
const webpack = require('webpack')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const path = require('path')
const extractScss = new ExtractTextPlugin({
filename: 'css/[name].css'
})
const sassOpt = {
sourceMap: true,
includePaths: [
path.resolve(__dirname, 'vendor/zurb/foundation/scss'),
path.resolve(__dirname, 'node_modules/motion-ui/src'),
path.resolve(__dirname, 'resources/assets/sass'),
path.resolve(__dirname, 'resources/assets/sass/libs/animate.scss')
]
}
module.exports = {
context: path.resolve(__dirname, 'resources/assets'),
entry: {
main: [
'babel-polyfill',
'webpack/hot/dev-server',
// ?reload=true enables full page reload on hmr failure
'webpack-hot-middleware/client?reload=true',
'./js/app'
],
elastic: [
'./js/lib/elasticsearch-plugin'
]
},
output: {
path: path.resolve(__dirname, 'public'),
filename: '[name].chunk.js',
chunkFilename: '[chunkhash].[id].js',
publicPath: '/',
pathinfo: true
},
devtool: 'eval',
module: {
rules: [
{
enforce: 'pre',
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules|vue\/src/,
options: {
appendTsSuffixTo: [/\.vue$/]
}
},
{
enforce: 'pre',
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015'],
plugins: ['lodash']
}
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
esModule: true,
loaders: {
scss: 'vue-style-loader!css-loader?sourceMap=true!sass-loader?' + JSON.stringify(sassOpt)
}
}
},
{
test: /\.s[a|c]ss$/,
use: extractScss.extract(['css-loader?sourceMap=true', 'sass-loader?' + JSON.stringify(sassOpt)])
}
]
},
resolve: {
extensions: ['.ts', '.js', '.vue']
},
plugins: [
extractScss,
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin()
]
}