webpack打包nodejs项目（前端代码）

PS.若本文没有帮到你能够看看个人进阶版点此前往

适用状况

首先说明，此状况不具有广泛性。若你的状况与笔者相似那么但愿这篇文章可以帮到你。

个人项目状况是这样的：用node.js作后台，ejs作模板引擎（即整个页面是一个ejs文件）由node.js将数据渲染完成后，再将完整页面返回给用户。

那么这样作会遇到的问题：

1. 本项目没有html页面，ejs的做用也不是引入公共的组件，直接就是一个完整的页面，用webpack中处理ejs文件的loader返回的是一个函数，故会产生问题

2.因为node.js配置了静态资源目录public，而视图目录与之同级，webpack在处理图像等静态资源目录的路径的时候会产生问题

3.若是使用publicpath 那么nodejs在运行的时候就会找不到资源，由于设置了静态资源的目录

 

若是你也遇到了相似的问题，但愿你能在本文中找到解决方法。

这里多说一句：不要以为个人项目很奇怪，由于我当时写的时候，知识储备不足，等到后面发现不妥的时候，为时已晚。

改起来太麻烦，因此将错就错了。。。。。。

 

解决方案

1.处理ejs

我在各个论坛，官网搜寻良久，始终没能找到，能处理我这种状况的loader。

没有办法之下，只能换一个思路，将ejs文件先转为html

 

首先要修改文件，那么就要修改服务器的模板引擎（这里是个人app.js）

那么要修改为什么呢？我要让nodejs使用ejs模板引擎，可是使用html文件来渲染

这里咱们要用的是express中的app.engine 来注册一个引擎

代码以下：

app.set('views',path.join(__dirname,'views'));//设置模板引擎的目录
app.engine('html', require('ejs').renderFile);
app.set('view engine','html');

这样咱们就能够将本来views视图目录中的ejs文件的后缀修改成.html了

2.webpack处理html文件

首先引入我眼帘的是webpack插件:HtmlWebpackPlugin

我找了许多文章，文章中对html文件的处理无一列外都用到了这个插件

既然那么多人用，那么它的强大是毋庸置疑的。

可是配置好后运行webpack，报了一个locals未定义的错误

报错代码：

因为locals是由express中的res.render（）传回页面的数据，而在此时webpack处理的时候，理所固然的会报未定义的错误了。

那么这个问题怎么解决呢？

我如今须要让webpack帮我处理html中的资源，又要让webpack不要理会ejs的语法，帮我继续压缩代码，就陷入了一个十分难受的境地。

在搜寻良久无果后，一篇误打误撞的文章启发了我

 

这篇文章的博主是但愿，webpack可以把ejs引入的模板打包到一个页面中，而我偏偏相反，我就是须要webpack不理会个人ejs代码。

因而解决办法氤氲而生。

首先我将本来html中的js代码抽离到test.js中

而后以这个js文件为入口文件，再以本来的html文件为模板

用HtmlWebpackPlugin来生成我所须要的压缩事后的html

解决代码

webpack.config.js

'use strict';
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');


//打包ejs

module.exports = {
  entry: {
    test: './test.js',//入口文件 即通常来讲app.js
  },
  mode:"production",//生产环境
  output: {
    path: path.resolve(__dirname,'build'),//输出路径
    filename: 'js/[name]/[name].js'//输出后的文件名
  },
  externals: {
    jquery:'window.jQuery'
  },//外部加载的资源 这些都是不须要进行打包的
  module: {
    rules: [//设置处理js文件的loader
      {test:/\.js$/,use:'babel-loader',exclude:/node_modules/},
      {test:/\.css$/,use:["style-loader","css-loader"]},
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'images/[name].[ext]'
            }
          }
        ]
      },
      {
        test: /\.(html)$/,
        use: {
          loader: 'html-loader',
          options: {
            attrs: [':data-src']
          }
        }
      }
    ]
  },
  plugins:[
    new HtmlWebpackPlugin({
      name:'test',
      template:'./public/init.html',//模板文件
      filename:'views/test.html',//目标文件
      minify:{
        collapseWhitespace:true,
        collapseInlineTagWhitespace:true,
        conservativeCollapse:true,
        minifyCSS:true,
        minifyJS: true,
        removeComments:true,
        trimCustomFragments:true
      }
    })
  ],
  optimization: {
    minimize: true//是否压缩代码
  }
};

上面的minify参数主要是配置html压缩的

入口文件test.js

这里面没有任何有关webpack的代码，全是项目的业务代码，故在这里就不粘了

 

运行webpack 大功告成

咱们来看看打包先后的html

 

打包前：

 

打包后

 

大小对比

 

 启动nodejs服务器

 

 问题解决 睡觉咯~~