if (isProduction) {
// 9 配置cdn
config.externals = externals
// 配置cdn
plugins.push(
new UglifyJsP **《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】** lugin({
uglifyOptions: {
output: {
comments: false, // 去掉注释
},
warnings: false,
compress: {
drop_console: true,
drop_debugger: false,
pure_funcs: ['console.log'] //移除console
}
}
}),
// 14 对资源文件进行压缩引入进行配置：
new CompressionWebpackPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
// test: /.js$|.html$|.json$|.css/,
test: /.js$|.json$|.css/,
threshold: 10240, // 只有大小大于该值的资源会被处理
minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
// deleteOriginalAssets: true // 删除原文件
})
// 15 安装图片压缩 cnpm install image-webpack-loader --save-dev 容易安装不上
// 若安装过 image-webpack-loader 先卸载 !!!
// npm 安装的npm 则npm 移除
// npm uninstall image - webpack - loader
//如果yarn安装的，则yarn 移除
// yarn remove image - webpack - loader
),
// 17公共代码抽离
config.optimization = {
splitChunks: { // 分割代码块
cacheGroups: {
vendor: { //第三方库抽离
chunks: 'all',
test: /node_modules/,
name: 'vendor',
minChunks: 1, //在分割之前，这个代码块最小应该被引用的次数
maxInitialRequests: 5,
minSize: 0, //大于0个字节
priority: 100 //权重
},
common: { //公用模块抽离
chunks: 'all',
test: /[\/]src[\/]js[\/]/,
name: 'common',
minChunks: 2, // 在分割之前， 这个代码块最小应该被引用的次数
maxInitialRequests: 5,
minSize: 0, //大于0个字节
priority: 60
},
styles: { //样式抽离
name: 'styles',
test: /.(sa|sc|c)ss$/,
chunks: 'all',
enforce: true
},
runtimeChunk: {
name: 'manifest'
}
}
}
}
}
},
}
配置别名，静态图片不显示解决
在html中 需要在别名前面加上 ~ 符号
在js中，需要使用require(‘url’)
list: [
{
“type”: “image”,
“imgUrl”: require(‘assets/logo.png’),
“desc”: “动物园”
}
]
这样图片就可以成功引入了
-
以上是配置修改webpack默认配置源码,可以直接赋值,也可以按需求使用,重点都写
-
在代码段内,再次还要重申一遍,下载压缩图片,可能不会那么容易成功,多试几次,切记
-
下载不成功要使用代码命令卸载后,再次重新下载,可参考package.json /devDependencies:{}
打包
-
运行npm run build稍等会生成一个dist文件,打开后有index.html使用Open with Live Server打开,
-
alt+b不可以,因为Open with Live Server打开的是本地服务器,Alt+B是相对电脑盘符的,Open with Live Server可以在VSC编辑器下载
上线nginx服务器
- 下载nginx包 下载地址：nginx: downloadhttp://nginx.org/en/download.html （Nginx官网）
- 2、下载之后，解压到指定的目录，就可以看到以下的目录
- 在地址栏运行cmd,不要直接双击ngnix.exe ,
盘符或目录不能有中文路径,不能直接双击打开(慎用),不主动停止nginx就要等到缓存过期才会关闭,
- 可以使用命令关闭,和在任务管理器杀死进程
- cmd后出现黑窗口,输入命令 start ngnix 启动(一闪黑窗口,没任何提示,此时已经启动成功)
- 然后在浏览器页面输入localhost,默认80端口,
- 从vsc打开可以修改配置,root可以改为dist,不修改就是打包的文件的根目录是html,
- 修改为dist,就需要将打包文件dist复制到html下,而不是dist文件夹里的文件复制过来
nginx代码
#user nobody;
worker_processes 1;
#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;
#pid logs/nginx.pid;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
#log_format main '$remote_addr - r e m o t e u s e r [ remote_user [ remoteuser[time_local] “$request” ’
'$status b o d y b y t e s s e n t " body_bytes_sent " bodybytessent"http_referer" ’ ‘“ h t t p u s e r a g e n t " " http_user_agent" " httpuseragent""http_x_forwarded_for”’;#access_log logs/access.log main;
sendfile on;
#tcp_nopush on;
#keepalive_timeout 0;
keepalive_timeout 65;
#gzip on;
server {
listen 33324;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root html;
try_files $uri $uri/ /index.html last;
index index.html index.htm;
}
#error_page 404 /404.html;
redirect server error pages to the static page /50x.htmlerror_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
proxy the PHP scripts to Apache listening on 127.0.0.1:80#location ~ .php$ {
proxy_pass http://127.0.0.1;#}
pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000#location ~ .php$ {
root html; fastcgi_pass 127.0.0.1:9000; fastcgi_index index.php; fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name; include fastcgi_params;#}
deny access to .htaccess files, if Apache’s document root concurs with nginx’s one#location ~ /.ht {
deny all;#}
}
another virtual host using mix of IP-, name-, and port-based configuration#server {
listen 8000; listen somename:8080; server_name somename alias another.alias; location / { root html; index index.html index.htm; }#}
HTTPS server#server {
listen 443 ssl; server_name localhost; ssl_certificate cert.pem; ssl_certificate_key cert.key; ssl_session_cache shared:SSL:1m; ssl_session_timeout 5m; ssl_ciphers HIGH:!aNULL:!MD5; ssl_prefer_server_ciphers on; location / { root html; index index.html index.htm; }#}
index.htm;
}#}
HTTPS server#server {
listen 443 ssl; server_name localhost; ssl_certificate cert.pem; ssl_certificate_key cert.key; ssl_session_cache shared:SSL:1m; ssl_session_timeout 5m; ssl_ciphers HIGH:!aNULL:!MD5; ssl_prefer_server_ciphers on; location / { root html; index index.html index.htm; }#}
