前提：nodejs环境

1. 初始化项目

npm init

初始项目后，项目目录下会多出一个package.json文件，之后配置都与此文件有关

我的文件目录结构如下：

java 集成nodejs 打包启动 nodejs项目打包部署_java 集成nodejs 打包启动

.babelrc文件配置后面会讲到

2.下载配置webpack包依赖

安装webpack，webpack4版本之后需要多安装一个webpack-cli，

--save-dev  //安装到开发环境
--save      //生产环境依赖使用
-g          //安装到全局环境

这里仅开发需要用到这个包故安装到开发环境

npm install --save-dev webpack

npm install --save-dev webpack-cli

安装完成后  package.json文件 devDependencies（开发环境依赖）会多出相关包名版本信息

java 集成nodejs 打包启动 nodejs项目打包部署_javascript_02

webpack配置

需要在项目目录中为webpack新建一个 webpack.config.js 文件，接下去会在该文件中添加许多的配置，包括引用 babel 等其他插件，该文件不是必须的，没有该文件也可以使用webpack来打包项目，但这里为了统一相关配置代码位置及方便打包考虑，新建使用该webpack.config.js文件来统一管理。

此时我的项目目录结构是这样的：

java 集成nodejs 打包启动 nodejs项目打包部署_webpack_03

最简单的webpack.config.js :

const path = require('path');

module.exports = {
    mode: 'production',//development、production   这里是说webpack打包的结果是哪种，选production会进行极致压缩获得低存储大小同时使代码失去可读性
    entry: path.resolve(__dirname, "./src/js/demo.js"),  //入口文件
    output: {  
        path: path.resolve(__dirname, './build'),  //出口路径
        filename: "js/demo.min.js"  //出口文件名
    }
};

webpack.config.js是一个js文件，语法和nodejs一样

module.exports暴露出的其他还有一些webpack的关键字请自行百度了解

此时已经可以使用webpack命令来打包文件了：

//  目录/src/js/demo.js

//require('../css/demo.css');
const $ = require('./jquery-3.3.1.min.js');

$(document).ready(function(){
    start();
});

function start() {
    console.log("hello world")
}

java 集成nodejs 打包启动 nodejs项目打包部署_webpack_04

nodejs本身是可以导入其他js插件的，但是css文件直接导入打包则不行，webpack识别不了

接下来介绍如何用js导入css，再用webpack打包

3. 下载配置 style-loader、css-loader 包依赖

loader 让 webpack 能够去处理那些非 JavaScript 文件(webpack 自身只理解 JavaScript)。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。

安装依赖

npm install style-loader css-loader --save-dev
"devDependencies": {
    "css-loader": "^5.2.6",
    "style-loader": "^3.0.0",
    "webpack": "^5.41.1",
    "webpack-cli": "^4.7.2"
  }

配置webpack.config.js

在webpack.config.js文件加入规则：

const path = require('path');

module.exports = {
    mode: 'production',//development、production
    entry: path.resolve(__dirname, "./src/js/demo.js"),
    output: {
        path: path.resolve(__dirname, './build'),
        filename: "js/demo.min.js"
    },
    module: {
        rules:[
            {
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader' ]
                // test 说明了当前 loader 能处理那些类型的文件
                // use 则指定了 loader 的类型。
                // 注意：数组中的loader不能省略扩展名
            }
        ]
    },
};

然后就可以在js文件里导入css文件一起打包了：

//  目录/src/js/demo.js

require('../css/demo.css');
const $ = require('./jquery-3.3.1.min.js');

$(document).ready(function(){
    start();
});

function start() {
    console.log("hello world")
}

4. 下载使用 babel 编译

目前，ES6(ES2015)这样的语法已经得到很大规模的应用，它具有更加简洁、功能更加强大的特点，实际项目中很可能会使用采用了ES6语法的模块，但浏览器对于ES6语法的支持并不完善。为了实现兼容，就需要使用转换工具对ES6语法转换为ES5语法，babel就是最常用的一个工具

安装依赖

npm install babel-loader @babel/core @babel/preset-env --save-dev
"devDependencies": {
    "@babel/core": "^7.14.6",
    "@babel/preset-env": "^7.14.7",
    "babel-loader": "^8.2.2",
    "css-loader": "^5.2.6",
    "style-loader": "^3.0.0",
    "webpack": "^5.41.1",
    "webpack-cli": "^4.7.2"
  }

在webpack.config.js文件里加入规则：

const path = require('path');

module.exports = {
    mode: 'production',//development、production
    entry: path.resolve(__dirname, "./src/js/demo.js"),
    output: {
        path: path.resolve(__dirname, './build'),
        filename: "js/demo.min.js"
    },
    module: {
        rules:[
            {
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader' ]
                // test 说明了当前 loader 能处理那些类型的文件
                // use 则指定了 loader 的类型。
                // 注意：数组中的loader不能省略扩展名
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: ['babel-loader']
            }
        ]
    },
};

然后新建一个 .babelrc 文件，也就是我之前创建好的那个文件，写入：

具体字段含义请自行百度

{
    // "presets":[
    //     "@babel/preset-env"
    // ],
    "presets": [
        ["@babel/preset-env", {
          "targets": {
            "browsers": [ "ie >= 8", "chrome >= 62" ]
          }      
        }]
    ],
    "plugins":[]
}

此时再使用webpack命令打包就会自动兼容es5语法环境了

5. 下载安装 url-loader 减少http请求数量

将图片文件转换为base64编码并载入浏览器能够减少http请求数，但是增大了js或html文件的体积，如果图片在项目中的重用度较高，那么每处引用都会生成base64编码，造成了代码的冗余。通过http请求载入到浏览器的文件可以缓存到本地，当图片在项目中的重用度较高时，会为图片的访问增加缓存的便利性，下次访问更快。因此要平衡考虑。

安装 url-loader ，包含了url-file

npm install --save-dev url-loader
"devDependencies": {
    "@babel/core": "^7.14.6",
    "@babel/preset-env": "^7.14.7",
    "babel-loader": "^8.2.2",
    "css-loader": "^5.2.6",
    "style-loader": "^3.0.0",
    "url-loader": "^4.1.1",
    "webpack": "^5.41.1",
    "webpack-cli": "^4.7.2"
  }

配置webpack.config.js文件  加入规则：

const path = require('path');

module.exports = {
    mode: 'production',//development、production
    entry: path.resolve(__dirname, "./src/js/demo.js"),
    output: {
        path: path.resolve(__dirname, './build'),
        filename: "js/demo.min.js"
    },
    module: {
        rules:[
            {
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader' ]
                // test 说明了当前 loader 能处理那些类型的文件
                // use 则指定了 loader 的类型。
                // 注意：数组中的loader不能省略扩展名
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: ['babel-loader']
            },
            {// 实现 url 资源打包
                // 图片文件使用 url-loader 来处理
                test: /\.(png|jpg|gif|ttf|eot|woff|woff2|svg)$/,
                use: [
                    {
                        loader: 'url-loader',
                        // options 为可以配置的选项
                        options: {
                            limit: 8192
                            // limit=8192表示将所有小于8kb的图片都转为base64形式
                            // （其实应该说超过8kb的才使用 url-loader 来映射到文件，否则转为data url形式）
                        }
                    }
                ]
            }
        ]
    },
};

6. 下载安装 html-webpack-plugin 自动生成一个HTML文件

HtmlWebpackPlugin会自动为你生成一个HTML文件，根据指定的index.html模板生成对应的 html 文件。

安装依赖

npm install html-webpack-plugin --save-dev
"devDependencies": {
    "@babel/core": "^7.14.6",
    "@babel/preset-env": "^7.14.7",
    "babel-loader": "^8.2.2",
    "css-loader": "^5.2.6",
    "html-webpack-plugin": "^5.3.2",
    "style-loader": "^3.0.0",
    "url-loader": "^4.1.1",
    "webpack": "^5.41.1",
    "webpack-cli": "^4.7.2"
  }

配置webpack.config.js文件  加入规则：

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

module.exports = {
    mode: 'production',//development、production
    entry: path.resolve(__dirname, "./src/js/demo.js"),
    output: {
        path: path.resolve(__dirname, './build'),
        filename: "js/demo.min.js"
    },
    module: {
        rules:[
            {
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader' ]
                // test 说明了当前 loader 能处理那些类型的文件
                // use 则指定了 loader 的类型。
                // 注意：数组中的loader不能省略扩展名
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: ['babel-loader']
            },
            {// 实现 url 资源打包
                // 图片文件使用 url-loader 来处理
                test: /\.(png|jpg|gif|ttf|eot|woff|woff2|svg)$/,
                use: [
                    {
                        loader: 'url-loader',
                        // options 为可以配置的选项
                        options: {
                            limit: 8192
                            // limit=8192表示将所有小于8kb的图片都转为base64形式
                            // （其实应该说超过8kb的才使用 url-loader 来映射到文件，否则转为data url形式）
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/index.html",
            filename: "webpack.html",  //将src目录下的index.html为模板生成打包后的webpack.html到 build目录下
            minify: {
                minimize: true, //是否打包为最小值
                removeAttributeQuotes: false,  //去除引号
                removeComments: true,  //去除注释
                collapseWhitespace: true,  //去除空格
                minifyCSS: true,  //压缩html内的样式
                minifyJS: true, //压缩html内的js
                removeEmptyElements: false //清理内容为空的元素
            },
            hash: true  //引入产出资源的时候加上哈希避免缓存
        })
    ]
};

此时使用 webpack 命令将在 build目录下生成：

java 集成nodejs 打包启动 nodejs项目打包部署_javascript_05

7. 下载安装 copy-webpack-plugin 包拷贝其他没有被webpack打包的文件到指定目录

可由此来保证打包后的html与打包前的html文件相对整个工程文件的引用关系（原静态文件夹拷贝到自动生成的html文件夹里面去，层级关系与原来保持一致）

安装包依赖

npm install --save-dev copy-webpack-plugin
"devDependencies": {
    "@babel/core": "^7.14.6",
    "@babel/preset-env": "^7.14.7",
    "babel-loader": "^8.2.2",
    "copy-webpack-plugin": "^9.0.1",
    "css-loader": "^5.2.6",
    "html-webpack-plugin": "^5.3.2",
    "style-loader": "^3.0.0",
    "url-loader": "^4.1.1",
    "webpack": "^5.41.1",
    "webpack-cli": "^4.7.2"
  }

配置webpack.config.js文件  加入规则：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
    mode: 'production',//development、production
    entry: path.resolve(__dirname, "./src/js/demo.js"),
    output: {
        path: path.resolve(__dirname, './build'),
        filename: "js/demo.min.js"
    },
    module: {
        rules:[
            {
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader' ]
                // test 说明了当前 loader 能处理那些类型的文件
                // use 则指定了 loader 的类型。
                // 注意：数组中的loader不能省略扩展名
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: ['babel-loader']
            },
            {// 实现 url 资源打包
                // 图片文件使用 url-loader 来处理
                test: /\.(png|jpg|gif|ttf|eot|woff|woff2|svg)$/,
                use: [
                    {
                        loader: 'url-loader',
                        // options 为可以配置的选项
                        options: {
                            limit: 8192
                            // limit=8192表示将所有小于8kb的图片都转为base64形式
                            // （其实应该说超过8kb的才使用 url-loader 来映射到文件，否则转为data url形式）
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/index.html",
            filename: "webpack.html",  //将src目录下的index.html为模板生成打包后的webpack.html到 build目录下
            minify: {
                minimize: true, //是否打包为最小值
                removeAttributeQuotes: false,  //去除引号
                removeComments: true,  //去除注释
                collapseWhitespace: true,  //去除空格
                minifyCSS: true,  //压缩html内的样式
                minifyJS: true, //压缩html内的js
                removeEmptyElements: false //清理内容为空的元素
            },
            hash: true  //引入产出资源的时候加上哈希避免缓存
        }),
        new CopyWebpackPlugin({
            patterns: [
                { from: __dirname+'/src/assets', to: __dirname+'/dist/assets' },
            ],        
        })
    ]
};
此时使用 webpack

java 集成nodejs 打包启动 nodejs项目打包部署_html_06

会将静态资源目录一并拷贝到最终的发布产品目录

到此index.html   demo.js以及在demo.js导入的文件都将被打包压缩，而其他静态项目文件也将被拷贝到发布目录，使打包发布后的html引入的静态资源文件url不会出错，最终只要将build目录发布出去即可，发布后的文件不需要nodejs环境支持。

扩展

8. 安装 progress-bar-webpack-plugin 进度条显示 webpack 打包进度

大项目如果没有进度条打包半天都不知道到哪了，什么时候卡死都不知道

安装 progress-bar-webpack-plugin

npm install progress-bar-webpack-plugin --save-dev

配置webpack.config.js文件  加入规则：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ProgressBarWebpackPlugin = require('progress-bar-webpack-plugin')

module.exports = {
    mode: 'production',//development、production
    entry: path.resolve(__dirname, "./src/js/demo.js"),
    output: {
        path: path.resolve(__dirname, './build'),
        filename: "js/demo.min.js"
    },
    module: {
        rules:[
            {
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader' ]
                // test 说明了当前 loader 能处理那些类型的文件
                // use 则指定了 loader 的类型。
                // 注意：数组中的loader不能省略扩展名
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: ['babel-loader']
            },
            {// 实现 url 资源打包
                // 图片文件使用 url-loader 来处理
                test: /\.(png|jpg|gif|ttf|eot|woff|woff2|svg)$/,
                use: [
                    {
                        loader: 'url-loader',
                        // options 为可以配置的选项
                        options: {
                            limit: 8192
                            // limit=8192表示将所有小于8kb的图片都转为base64形式
                            // （其实应该说超过8kb的才使用 url-loader 来映射到文件，否则转为data url形式）
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/index.html",
            filename: "webpack.html",  //将src目录下的index.html为模板生成打包后的webpack.html到 build目录下
            minify: {
                minimize: true, //是否打包为最小值
                removeAttributeQuotes: false,  //去除引号
                removeComments: true,  //去除注释
                collapseWhitespace: true,  //去除空格
                minifyCSS: true,  //压缩html内的样式
                minifyJS: true, //压缩html内的js
                removeEmptyElements: false //清理内容为空的元素
            },
            hash: true  //引入产出资源的时候加上哈希避免缓存
        }),
        new CopyWebpackPlugin({
            patterns: [
                { from: __dirname+'/src/assets', to: __dirname+'/dist/assets' },
            ],        
        }),
        new ProgressBarWebpackPlugin()
    ]
};

效果：

java 集成nodejs 打包启动 nodejs项目打包部署_node.js_07


参考链接：Webpack 入门教程

参考链接：url-loader