webpack 项目访问静态资源
使用 webpack dev serve 启动 react 项目后，发现无法使用 http://localhost:8080/1.png 访问到项目的 /static 目录下的 1.png 文件。我的 webpack-dev.js 配置如下：
const webpack = require('webpack')
const webpackMerge = require('webpack-merge')
const SpeedMeasurePlugin = require('speed-measure-webpack-plugin')
const baseWebpackConfig = require('./webpack.config.base')
const proxy = require('../proxy/index.js')
const path = require('path')
const smp = new SpeedMeasurePlugin()const config = webpackMerge.merge(baseWebpackConfig, {mode: 'development', // 模式 默认两种 production developmentdevtool: 'cheap-module-eval-source-map',plugins: [new webpack.HotModuleReplacementPlugin() // 热更新插件],devServer: { // 开发服务器配置hot: true,port: 8080,open: false,quiet: false,inline: true,stats: 'errors-only',overlay: false,clientLogLevel: 'silent',compress: true,// contentBase: path.join(__dirname, 'dist'),contentBase: path.join(__dirname, '../static'), // 设置开发服务器根目录proxy: {'/': {bypass: function (req, res, proxyOptions) {return `/index.html`}},...proxy}}
})module.exports = config
发现是 proxy 的配置下 把 访问 / 的路径全部拦截到 /index.html 下了，所以访问不到 /static 目录下的静态资源。
解决方案
改一下 proxy 的逻辑即可，修改后的 webpack-dev.js 配置：
const webpack = require('webpack')
const webpackMerge = require('webpack-merge')
const SpeedMeasurePlugin = require('speed-measure-webpack-plugin')
const baseWebpackConfig = require('./webpack.config.base')
const proxy = require('../proxy/index.js')
const path = require('path')
const smp = new SpeedMeasurePlugin()const config = webpackMerge.merge(baseWebpackConfig, {mode: 'development', // 模式 默认两种 production developmentdevtool: 'cheap-module-eval-source-map',plugins: [new webpack.HotModuleReplacementPlugin() // 热更新插件],devServer: { // 开发服务器配置hot: true,port: 8080,open: false,quiet: false,inline: true,stats: 'errors-only',overlay: false,clientLogLevel: 'silent',compress: true,// contentBase: path.join(__dirname, 'dist'),contentBase: path.join(__dirname, '../static'), // 设置开发服务器根目录proxy: {'/': {bypass: function (req, res, proxyOptions) {// 如果请求的是以 /static/resources 开头的路径，不做重定向，直接返回 nullif (req.url.startsWith('/resources')) {return null; // 不重定向，继续处理静态资源}return `/index.html`}},...proxy}}
})module.exports = config相关文档可以参考 webpack 官网 - proxy
继续展开
我发现我执行 npm run build 无法将 我的react项目跟目录下的 /static/resources/pdf/ 资源打包到 dist 目录中。
解决办法：
安装 copy-webpack-plugin@6.0.0 插件， 这个版本适配 webpack@4.41.5 这个版本，已经测试可用。
npm install copy-webpack-plugin@6.0.0
然后再 webpack.base.js 配置：
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
plugins: [new CopyWebpackPlugin({patterns: [{ from: 'static/resources/pdf', to: 'static/resources/pdf' }]})]
}
手动指定要复制的资源，这样执行 npm run build 之后就能将 /static/resources/pdf下的文件打包到 /dist/static/resources/pdf 目录下了。
继续展开
我有一个需求就是要将文档放在项目目录中，然后用户点击下载按钮，就找到项目中的对应文件下载。
代码如下：
function createAndRemove(url, fileName) {// 创建 a 标签var link= document.createElement('a');// 下载内容转变成blob地址link.href = process.env.INTERFACE_DOCUMENT + "a.pdf";link.download = fileName;// 触发点击document.body.appendChild(link);eleLink.click();// 然后移除document.body.removeChild(link);}
为什么要用 process.env.INTERFACE_DOCUMENT 这个变量？
因为项目部署在本地(通过 npm start 启动) 和 部署到线上路径可能会不一样。
a.pdf 文件在项目的根目录下的 /static/resources/pdf/ ， 访问路径为 http://localhost:8080/resources/pdf/a.pdf
项目打包后， a.pdf 会被打包到 /dist/static/resources/pdf/ ， 部署到线上后，使用的 nginx 部署项目， nginx 的配置指定 dist 为根目录，
nginx.conf 配置如下
user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;include /usr/share/nginx/modules/*.conf;events {worker_connections 1024;
}http {log_format main '$remote_addr - $remote_user [$time_local] "$request" ''$status $body_bytes_sent "$http_referer" ''"$http_user_agent" "$http_x_forwarded_for"';access_log /var/log/nginx/access.log main;sendfile on;tcp_nopush on;tcp_nodelay on;keepalive_timeout 65;types_hash_max_size 4096;include /etc/nginx/mime.types;default_type application/octet-stream;include /etc/nginx/conf.d/*.conf;server {listen 80;listen [::]:80;server_name _;#root /usr/share/nginx/html;root /project;location / {root /dist;index index.html index.htm;try_files $uri $uri/ /index.html; # 解决页面路由问题，刷新页面返回 404}# Load configuration files for the default server block.include /etc/nginx/default.d/*.conf;error_page 404 /404.html;location = /404.html {}error_page 500 502 503 504 /50x.html;location = /50x.html {}}
}dist 目录结构为
|- dist
|-----static
|---------- img
|---------- css
|---------- js
|---------- resources
|-----------------pdf
此时线上访问 a.pdf 的路径为 http://ip:port/static/resources/pdf/a.pdf
所以才会有根据环境变量来获取 URL的这段代码 process.env.INTERFACE_DOCUMENT。
.env.development 文件
INTERFACE_DOCUMENT=/resources/pdf/
.env.production 文件
INTERFACE_DOCUMENT=/static/resources/pdf/
这样配置完后，在本地和在线上就都能够正常下载了。
注意：如果你的文件名为中文，部署到 linux 中，中文可能会乱码，会导致找不到文件，所以最好使用英文文件名。