zhu562002124的博客

问题：Nuxt 搭建的移动 web 项目，本地开发时 postcss-px-to-viewport 单位转换功能正常，发布到测试环境服务器时失效。环境：本地：node：14.7.0npm：6.14.7cnpm：6.1.1postcss：自动安装postcss-px-to-viewport：1.1.1（自动安装最新版）服务器：node：14.15.5npm：6.14.13cnpm：6.1.1postcss：自动安装postcss-px-to-viewport：1.1.1（自动安装最

需求：编译 sass，打包，压缩编译、打包、压缩ES6语法的 js处理其他资源，image 文件，字体文件等将模板转换成 html 文件html 文件自动引入静态资源，转换路径开发模式热更新开发模式接口代理...

虽然实际需求肯定不会只做这件事情，但是这篇文章只讲如何把模板文件转换为 html 文件，其他的内容，请移步：编译 sass，压缩，抽离为单独的文件编译、压缩 ES6 语法的 js，抽离公共文件处理其他资源，image 文件，字体文件等把模板转换成 html 需要两个东西，一个是模板加载器，一个是 html 生成器，我的项目里使用的是腾讯的 art-template 模板，用到的插件如下：插件版本用途art-template^4.13.2模板核心插件art-tem

需要处理的静态资源：图片字体json 文件视频音频图片处压缩图片压缩需要使用第三方插件，这里我使用 image-webpack-loader 来做图片的压缩处理，实现方式并不复杂，只需要在原来的 file-loader 或者 url-loader 下面加一个处理器即可，下面直接上配置代码：{ test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, use: [ { loader: 'url-loader',

构建目标：es6 转义代码合并抽离公共代码代码压缩需要用到的插件@babel/core 核心插件@babel/preset-env 转换高级语法/特性到es5或者以下的语法@babel/runtime 提取公共的包@babel/plugin-transform-runtime 自动引用公共函数babel-loader 模块加载器uglifyjs-webpack-plugin 代码压缩创建一个 babel 的配置文件 .babelrc，内容如下：{ "presets"

构建目标：编译 sass自动处理浏览器兼容抽离成独立文件代码去重压缩代码需要用到的插件：css-loader 样式加载器sass 编译 sass 需要的库，这个比 node-sass 安装似乎快一点sass-loader sass 加载器postcss-loader 样式处理器autoprefixer 自动前缀mini-css-extract-plugin 抽离样式为单独的文件optimize-css-assets-webpack-plugin 去重和压缩cssnano 去