node项目打包如何隐藏html后缀,node做为前台的项目如何打包静态js和css并生成版本号，loader插件的使用...

一.使用场景：

1.node建立的前台项目须要输入地址展现页面css

2.有设置缓存或者cdn的须要在静态文件更改时能使用新的而不是缓存的，须要版本号这里html

3.可能须要压缩静态文件的vue

二.一些参考地址，须要安装的插件

须要先全局安装: npm install loader-builder -gexpress

而后本地项目安装loader: npm install loadernpm

三.使用步骤

1..在package.json里面加上一个打包的指令 loader,后面运行项目须要先运行这个指令打包后再启动项目json

具体内容以下：api

//在scripts下面加上loader的指令

.......

"scripts": {

"start": "set NODE_ENV=production && nodemon --inspect main.js",

"dev": "set NODE_ENV=development && nodemon --inspect main.js",

"makes": "mingw32-make",

"loader":"loader ./static/views/mobile ./" //这个指令，用loader-builder来打包个人mobile下面的view的ejs模板的文件 打包后在根目录生成一个assets.json的指向文件和和生成对应的js和css压缩打包的文件在指定的目录下

},

....

2.在启动js里面加上loader和assetsMap的引用的挂在在全局变量上，个人是main,js上

具体代码以下：

// main.js

......

const Loader = require('loader') ；

.....

app.locals.Loader = Loader // 插件loader

app.locals.assetsMap = require('./assets.json') //运行指令后的指向文件

3.根据开发环境和生产环境来区分是否须要展现原静态文件仍是压缩后的文件，生产环境展现压缩的

在main.js里面把参数挂在全局，后面页面使用loader的时候根据这个值是不是true来决定是否使用压缩文件，具体代码以下

//main.js

let mydev = process.env.NODE_ENV.trim()

app.locals.myDebug = (mydev && mydev=='production') ? true : false //在loader中根据环境来决定是否要用压缩的静态文件

4.在某个引用了js和css的ejs页面使用loader

具体代码以下：

// index.ejs

.......

// css的引用myDebug是挂在node的全局渲染变量，这里决定是否使用压缩后的文件，cdn的配置见loader的github上的介绍

.css("/static/public/mobile/css/orderDetails.css")

.css("/static/public/mobile/css/index.css")

.done(assetsMap，'',myDebug)%>

.......

//js的引用

.js("/static/public/mobile/js/apiUrlConfig.js")

.done(assetsMap，'',myDebug)%>

......

5.由于打包后的地址设置的static....这里要把这个地址设置成可访问的静态文件

在main.js中根据本身设置的打包后的地址来配置，具体代码以下(个人是用的/static/public/mobile/min/。。。这个地址，因此这里设置static的时候路由是这个文件夹)

app.use('/static', express.static(path.join(__dirname+'/static')));

6.执行命令打包和启动 ：

npm run loader

(会生成assets.json里面的内容，和生成对应的js和css在指定的目录下)

7.到这里就能够直接启动项目了，能够设置开发环境和生产环境