我的webpack生成在输出包中有完整的C:/path/to/files。这导致在生产模式下加载文件时出现问题。你知道为什么会这样吗?
const ArcGISPlugin = require('@arcgis/webpack-plugin');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const path = require('path');
module.exports = {
entry: {
'main': './src/index.js',
},
output: {
filename: '[name].[hash].js',
publicPath: '',
},
plugins: [
new CleanWebpackPlugin(['dist', 'build']),
new ArcGISPlugin({
useDefaultAssetLoaders: false,
}),
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: './[name].[hash].css',
chunkFilename: './[id].[hash].css',
}),
new HtmlWebPackPlugin({
template: './src/index.html',
filename: './index.html',
chunksSortMode: 'none',
}),
new HtmlWebPackPlugin({
inject: false,
template: './src/oauth-callback.html',
filename: './oauth-callback.html',
chunksSortMode: 'none',
}),
],
module: {
rules: [{
test: /\.stache$/,
use: [{loader: 'raw-loader'}],
}, {
test: /\.layout$/,
use: [{loader: 'raw-loader'}],
}, {
test: /\.js$/,
exclude: /node_modules/,
use: [{
loader: 'babel-loader',
options: {
cacheDirectory: true,
sourceMap: true,
},
}],
}, {
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
{loader: 'css-loader', options: {sourceMap: true}}, {
loader: 'resolve-url-loader',
options: {includeRoot: true},
},
],
}, {
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'less-loader',
],
}, {
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
{loader: 'css-loader', options: {sourceMap: true}}, {
loader: 'resolve-url-loader',
options: {includeRoot: true, sourceMap: true},
}, {
loader: 'sass-loader',
options: {
sourceMap: true,
},
},
],
}, {
test: /\.(jpe?g|png|gif|webp)$/,
loader: 'url-loader',
options: {
// Inline files smaller than 10 kB (10240 bytes)
limit: 10 * 1024,
},
}, {
test: /\.(wsv|ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
use: [{
loader: 'file-loader',
options: {
name: 'build/[name].[ext]',
},
}],
}],
},
resolve: {
modules: [path.resolve(__dirname, 'src'), 'node_modules/'],
alias: {
'esri': 'arcgis-js-api',
'sweetalert2$': 'sweetalert2/dist/sweetalert2',
'moment': 'moment/moment',
},
},
node: {
process: false,
global: false,
fs: 'empty',
},
externals: [
(context, request, callback) => {
if (/pe-wasm$/.test(request)) {
return callback(null, 'amd ' + request);
}
callback();
},
],
};
我的生产网页包配置如下:
const merge = require('webpack-merge');
const common = require('./webpack.common');
const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer');
const {DefinePlugin} = require('webpack');
module.exports = merge(common, {
mode: 'production',
plugins: [
new DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production'),
},
}),
new BundleAnalyzerPlugin({
analyzerMode: 'static',
}),
],
})
;
我在输出包中看到了许多这样的路径:
"C:/Users/<username>/web/dl2-cia-wsb/node_modules/babel-loader/lib/index.js??ref--6-0!C:/Users/<username>/web/dl2-cia-wsb/src/components/cia-open-project/cia-open-project": 1667,
"C:/Users/<username>/web/dl2-cia-wsb/node_modules/babel-loader/lib/index.js??ref--6-0!C:/Users/<username>/web/dl2-cia-wsb/src/components/cia-open-project/cia-open-project.less": 1668,
"C:/Users/<username>/web/dl2-cia-wsb/node_modules/babel-loader/lib/index.js??ref--6-0!C:/Users/<username>/web/dl2-cia-wsb/src/components/cia-open-project/cia-open-project.stache": 1670,
"C:/Users/<username>/web/dl2-cia-wsb/node_modules/babel-loader/lib/index.js??ref--6-0!C:/Users/<username>/web/dl2-cia-wsb/src/components/cia-open-project/ViewModel": 1673,
"C:/Users/<username>/web/dl2-cia-wsb/node_modules/babel-loader/lib/index.js??ref--6-0!C:/Users/<username>/web/dl2-cia-wsb/src/config/map/view": 1692,
"esri/Map": 1695,
"esri/ground/navigationConstraints": 1696,
"esri/support/groundUtils": 1697,
"C:/Users/<username>/web/dl2-cia-wsb/node_modules/babel-loader/lib/index.js??ref--6-0!C:/Users/<username>/web/dl2-cia-wsb/src/styles/main.scss": 1698,
"C:/Users/<username>/web/dl2-cia-wsb/node_modules/babel-loader/lib/index.js??ref--6-0!C:/Users/<username>/web/dl2-cia-wsb/src/config/hooks/index": 1703,
"@wsb/dl-identify-hooks/identify/highlightIdentify": 1704,
"C:/Users/<username>/web/dl2-cia-wsb/node_modules/arcgis-js-api/layers/support/layerUtils": 1706,
"C:/Users/<username>/web/dl2-cia-wsb/node_modules/arcgis-js-api/tasks/support/IdentifyResult": 1707,
"C:/Users/<username>/web/dl2-cia-wsb/node_modules/babel-loader/lib/index.js??ref--6-0!C:/Users/<username>/web/dl2-cia-wsb/src/config/map/layers": 1708
这是我的包裹部:
"scripts": {
"start": "webpack-dev-server --mode=development --progress --host=lvh.me --config webpack.dev.js",
"build": "webpack --config webpack.prod.js --progress",
"deploy": "npm run build",
"postdeploy": "node ./scripts/deploy",
"license": "webpack --config licenses/webpack.licenses.js",
"postversion": "git push && git push --tags"
},
"main": "./src/index.js",
"dependencies": {
"@wsb/dl-app": "^1.0.3",
"@wsb/dl-auth-oauth": "^2.0.1",
"@wsb/dl-autocomplete": "^0.1.2",
"@wsb/dl-draw": "^1.1.4",
"@wsb/dl-edit": "^1.1.0",
"@wsb/dl-esri-widget-loader": "^1.0.0",
"@wsb/dl-feature-table": "^2.0.2",
"@wsb/dl-filter": "^0.1.0",
"@wsb/dl-identify-hooks": "^1.0.2",
"@wsb/dl-login": "^2.0.0",
"@wsb/dl-map": "^1.0.2",
"@wsb/dl-pdf-generator": "^1.0.1",
"@wsb/dl-toolbar": "^1.0.2",
"@wsb/dl-util": "^1.0.0",
"arcgis-js-api": "^4.8.1",
"can-arcgis": "^3.0.0",
"can-component": "^4.0.8",
"can-define": "^2.3.1",
"can-route": "^4.1.1",
"can-stache": "^4.4.0",
"can-stache-route-helpers": "<2.0.0",
"can-util": "^3.12.0",
"can-view-model": "^4.0.1",
"font-awesome": "^4.7.0",
"moment": "^2.22.1",
"papaparse": "^4.5.0",
"pdfmake": "^0.1.36",
"spectre-canjs": "^3.2.0",
"spectre.css": "^0.5.1",
"sweetalert2": "^7.26.9"
},
"devDependencies": {
"@arcgis/webpack-plugin": "^4.8.2",
"@babel/core": "^7.0.0-beta.47",
"@babel/plugin-proposal-class-properties": "^7.0.0-beta.54",
"@babel/plugin-syntax-dynamic-import": "^7.0.0-beta.47",
"@babel/plugin-transform-modules-amd": "^7.0.0-beta.47",
"@babel/preset-env": "^7.0.0-beta.47",
"axios": "^0.18.0",
"babel-eslint": "^8.2.3",
"babel-loader": "^8.0.0-beta.3",
"can-debug": "^1.2.2",
"can-stache-loader": "^2.0.0",
"can-view-import": "^4.2.0",
"clean-webpack-plugin": "^0.1.19",
"command-line-args": "^5.0.2",
"command-line-usage": "^5.0.5",
"css-loader": "^0.28.11",
"datauri": "^1.1.0",
"donejs-cli": "^2.1.0",
"eslint": "^4.19.1",
"eslint-config-google": "^0.9.1",
"file-loader": "^1.1.11",
"form-data": "^2.3.2",
"generator-donejs": "^2.1.0",
"html-webpack-plugin": "^3.2.0",
"less": "^3.0.4",
"less-loader": "^4.1.0",
"mini-css-extract-plugin": "^0.4.0",
"node-sass": "^4.5.3",
"npm-license-crawler": "^0.1.9",
"raw-loader": "^0.5.1",
"resolve-url-loader": "^2.3.0",
"sass-loader": "^7.0.1",
"style-loader": "^0.21.0",
"uglifyjs-webpack-plugin": "^1.2.5",
"url-loader": "^1.0.1",
"webpack": "^4.8.3",
"webpack-bundle-analyzer": "^2.13.1",
"webpack-cli": "^2.1.3",
"webpack-dev-server": "^3.1.4",
"webpack-merge": "^4.1.2",
"webpack-strip-block": "^0.2.0",
"zip-dir": "^1.0.2"
}
