网站维护和推广方案,唐山长城网站建设,应用分发平台,申请网站建设费用的请示nodejs学习参考 node常用命令#xff1a; node xxx.js 执行js文件 npm init -y 初始化package.json npm i 软件包名 下载软件包到本地 npm i 软件包名 -g 下载软件包到全局 npm uni 软件包名 删除软件包
系统优化CDN使用
CDN for free
需求#xff1a;开发模式使用本地第三…nodejs学习参考 node常用命令 node xxx.js 执行js文件 npm init -y 初始化package.json npm i 软件包名 下载软件包到本地 npm i 软件包名 -g 下载软件包到全局 npm uni 软件包名 删除软件包
系统优化CDN使用
CDN for free
需求开发模式使用本地第三方库生产模式下使用CDN加载引用 步骤 1.在index.html文件中引入第三方CDN地址并用模板语法判断 index.html
...
% if(htmlWebpackPlugin.options.useCDN){ %
script srchttps://cdn.bootcdn.net/ajax/libs/axios/1.3.6/axios.min.js/script
% } %
...webpack.config.js
plugins: [new HtmlWebpackPlugin({template: ./public/index.html, // html模板文件filename: ./index.html, // html输出文件名useCDN: process.env.NODE_ENV production,favicon: ./public/favorite.png}),
],2.配置webpack.config.js中externals外部扩展选项防止某些import的包被打包
/*生产模式下排除掉 使用CDN引入加载的资源*/
if (process.env.NODE_ENV production) {config.externals {//key : import from 语句后面的字符串//value: 留在原地的全局变量最好和CDN在全局暴露的变量一致axios: axios}
}多页面打包
未成功加载
开发环境调错
问题代码被压缩和混淆无法正确定位源代码位置行数和列数 source map 可以准确追踪error和warning在原始代码中的位置 设置webpack.config.js配置devtool选项
/*开发模式下使用devtool inline-source-map便于查找错误*/
if (process.env.NODE_ENV development)config.devtool inline-source-mapinline-source-map选项把源码的位置信息一起打包在js文件内 注意source-map仅适用于开发环境不要在生产环境使用(防止被轻易查看源码位置)
打包模式
打包模式告知webpack使用响应的内置优化 开发模式development 调试代码实施加载模块热替换等适用于本地开发 生产模式production 压缩代码资源优化更轻量适用于打包上线
设置方式1 package.json
build: webpack --modeproduction,
dev: webpack serve --open --modedevelopment设置方式2 webpack.config.js
const config {
//mode: development,
mode: production,
}命令行设置的优先级高于配置文件中的推荐使用命令行设置
应用
需求在开发模式下用style-loader内嵌加载更快再生产模式下提取css代码 借助cross-env跨平台通用包命令设置参数区分环境 步骤
下载 cross-env软件包到当前项目 npm i cross-env --save-dev配置自定义命令传入参数名和值会绑定到process.env对象下
build: cross-env NODE_ENVproduction webpack --modeproduction,
dev: cross-env NODE_ENVdevelopment webpack serve --open --modedevelopment在webpack.config.js区分不同环境使用不同配置
const path require(path);
const HtmlWebpackPlugin require(html-webpack-plugin);
/*css 分别打包*/
const MiniCssExtractPlugin require(mini-css-extract-plugin);
/*css 代码压缩插件*/
const CssMinimizerPlugin require(css-minimizer-webpack-plugin);
const webpack require(webpack)const config {// mode: development,entry: {index: ./src/main.js,// print: ./src/print.js,},// devtool: inline-source-map,devServer: {/*默认以 public/index.html 可以将dist目录启动为服务*/// static: ./dist,//启动服务后自动弹出页面// open: true},module: {rules: [{test: /\.css$/i,// use: [MiniCssExtractPlugin.loader, css-loader],/*开发模式下 内嵌css样式让热替换更快生产模式下提取css代码让浏览器缓存 并行下载js和css文件*/use: [process.env.NODE_ENV development ? style-loader : MiniCssExtractPlugin.loader, css-loader],},{test: /\.less$/i,use: [// compiles Less to CSSprocess.env.NODE_ENV development ? style-loader : MiniCssExtractPlugin.loader,css-loader,less-loader,],},],},plugins: [new HtmlWebpackPlugin({template: ./public/index.html, // html模板文件filename: ./index.html, // html输出文件名useCDN: process.env.NODE_ENV production,favicon: ./public/favorite.png}),new MiniCssExtractPlugin({}),//允许在 编译时 将前端代码中的变量替换为其他值或表达式new webpack.DefinePlugin({// 定义...process.env.NODE_ENV: JSON.stringify(process.env.NODE_ENV),}),],output: {filename: [name].bundle.js,path: path.resolve(__dirname, dist),clean: true,},optimization: {runtimeChunk: single,minimizer: [// 在 webpack5 中你可以使用 ... 语法来扩展现有的 minimizer即 terser-webpack-plugin将下一行取消注释...,new CssMinimizerPlugin(),],},/*配置别名变量*/resolve: {alias: {: path.join(__dirname, src)}}
}/*开发模式下使用devtool inline-source-map便于查找错误*/
if (process.env.NODE_ENV development)config.devtool inline-source-map/*生产模式下排除掉 使用CDN引入加载的资源*/
if (process.env.NODE_ENV production) {config.externals {//key : import from 语句后面的字符串//value: 留在原地的全局变量最好和CDN在全局暴露的变量一致axios: axios}
}
module.exports config
