我正在从一个目录链接到我的源文件
workingDirectory
- webpack.config.js
src (sylmink to ../myproject/src
因此,当我向devtoolModuleFilenameTemplate提供[absolute-resource-path]
时,源映射将包含已解析的路径
/path/to/myproject/src/File.vue
或者如果我提供[resource-path]
(如果前缀为webpack://
webpack:///./src/File.vue
如何使用符号链接路径?
/path/to/workingDirectory/src/File.vue
webpack.config.js 注意,我有一个自定义的resolveWorkspace函数,它为文件提供正确的路径。
'use strict'
const path = require('path');
const nodeExternals = require('webpack-node-externals');
function resolveWorkspace(dir) {
//This will resolve the symlink paths
// return path.join(__dirname, '..', dir)
//Instead, use the PWD which contains the symlink paths
return process.env.PWD +'/'+ dir;
}
module.exports = {
context: path.resolve(__dirname, '.'),
devtool: 'source-map',
entry: {
app: resolveWorkspace('resources/assets/js/app.js')
},
output: {
path: resolveWorkspace('public/js/'),
filename: '[name].js',
devtoolModuleFilenameTemplate: '[absolute-resource-path]',
devtoolFallbackModuleFilenameTemplate: '[absolute-resource-path]?[hash]'
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolveWorkspace('resources'),
}
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolveWorkspace('resources')]
}
]
},
target: 'node',
externals: [nodeExternals()],
node: {
// prevent webpack from injecting useless setImmediate polyfill because Vue
// source contains it (although only uses it if it's native).
setImmediate: false,
// prevent webpack from injecting mocks to Node native modules
// that does not make sense for the client
dgram: 'empty',
fs: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty'
}
}
if (process.env.NODE_ENV === 'test') {
//Inline the source map for testing.
module.exports.devtool = 'inline-source-map';
}