记录一次nodejs开发使用webpack打包发布项目

最新推荐文章于 2024-09-13 22:44:13 发布
最新推荐文章于 2024-09-13 22:44:13 发布
阅读量2k 收藏 6
点赞数 1
文章标签： javascript node.js html webpack es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42371913/article/details/118412597
版权

前提：nodejs环境

1. 初始化项目

npm init

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

我的文件目录结构如下：

.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（开发环境依赖）会多出相关包名版本信息

webpack配置

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

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

最简单的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")
}

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目录下生成：

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

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

到此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()
    ]
};

效果：

参考链接：webpack打包路径更改_webpack打包教程

参考链接：webpack 拷贝插件copy-webpack-plugin

参考链接：Webpack 入门教程

参考链接：webpack4配置之——19：引入第三方插件库

参考链接：webpack插件url-loader使用规范

参考链接：url-loader

参考链接：Webpack 插件: webpackbar & progress-bar-webpack-plugin 进度条插件分享

百年人生当疯狂
关注
打包发布自己的nodejs包
gfdfhjj的博客
11-09 7307
打包发布自己的nodejs包
webpack打包原理解析
木头房子的格子铺
04-29 3776
文章目录webpack打包是如何运行的webpack对CommonJS的模块化处理webpack对es6 Module模块化的处理webpack文件的按需加载按需加载输出代码分析总结 webpack打包是如何运行的 也可以称为，webpack是如何实现模块化的 CommonJS是同步加载模块，一般用于node。因为node应用程序运行在服务器上，程序通过文件系统可以直接读取到各个模块的文件，特点...
webpack打包发布~
m0_62626838的博客
08-02 618
并且webpack默认只能打包处理.js结尾的模块。所以正对非.js文件，比如css,less等文件需要安装对应的loader并配置loader规则。3、新建webpack.config.js文件，里面写配置编译模式，入口出口等（这里演示的是单入口打包）里面是打包好的js文件。2、安装成功之后，你会在package.json文件中看到这个。1、安装webpack（局部安装webpack）。4、在package.js中配置打包命令。，默认打包是生产环境，打包出来的代码会默认压缩）6.1打包处理css文件。
pkg：将Node.js项目打包成可执行文件完全指南
最新发布
gitblog_07634的博客
09-13 528
pkg：将Node.js项目打包成可执行文件完全指南 pkg 项目地址: https://gitcode.com/gh_mirrors/pkg/pkg 项目基础介绍与编程语...
使用 webpack 对项目进行打包发布
黑马程序员官方博客
12-29 1006
项目开发完成之后，需要使用 webpack对项目进行打包发布，主要原因有以下两点：① 开发环境下，打包生成的文件存放于内存中，无法获取到最终打包生成的文件② 开发环境下，打包生成的文件不会进行代码压缩和性能优化为了让项目能够在生产环境中高性能的运行，因此需要对项目进行打包发布。在文件的scripts节点下，新增 build 命令如下：--model是一个参数项，用来指定 webpack 的运行模式。production 代表生产环境，会对打包生成的文件进行代码压缩。
webpack的打包发布
qq_44442911的博客
05-23 415
为什么要打包发布 项目开发完成后，使用webpack进行打包发布的原因 开发环境下，打包生成的文件放于内存中，无法获取到最终打包生成的文件 开发环境下，打包生成的文件不会进行代码压缩和性能优化 配置webpack的打包发布 在package.json文件的script节点下，新增build命令 "build" ："webpack --mode production" //项目发布时，运行build命令 --mode 用来指定运行模式，production表示生产坏境，会对打包生成的文件进行代码压缩和性
构建NodeJS库--前端项目的打包发布
带着Bug看世界
04-23 2217
如何初始化配置，以及学习npm配置项；模块类型type配置、main入口文件的配置；webpack是一个用于现代 JavaScript 应用程序的 静态模块打包工具；JavaScript通常需要做语法转化和polyfills以便可以使用高级语法而不必担心浏览器兼容性问题，Babel的作用便在于此，而正好可以与webpack结合使用；eslint一个好的项目离不开代码格式规范；jest用于测试用例。
Nodejs项目包发布
天天向上
05-26 2079
选择authenticator application方式，可以下载Google Authenticator，扫码输入app里的验证码。登录npm账号（需要在Google Authenticator中接收验证码并最后输入）配置package.json，项目名称要避免重复，也避免不正式，否则可能被检测为垃圾。将npm的bin下的nrm等命令，加到环境变量。nrm是npm源管理器，可以切换不同源。查看node和npm版本。下载nodejs压缩包。解压nodejs压缩包。查看npm的bin目录。
NodeJS+Webpack入门：从安装到使用
依旧灬清风的博客
06-15 6683
目录 前言： 1.NodeJS 1.1 NodeJS安装 1.2 修改NodeJS安装模块路径： ​1.3 配置镜像源: 2.Webpack 2.1 Webpack安装 本地安装（推荐）： 全局安装： 2.2 Webpack打包 手动打包： 热部署： 前言： 这是一篇从后端开发人员的视角出发，编写的关于NodeJS和Webpack从零开始，从安装到使用的记录，基本上每一...
webpack静态模块打包器
qq_43944285的博客
05-02 803
webpack 概述 : 是一个现代的JavaScript应用程序的静态模块的打包器(module bundle) 静态:文件资源 模块:node环境,引入文件,遵守模块化语法. less/sass ->css 多个文件 -->webpack(打包 翻译(es6/7/8的翻译成es5(兼容浏览器)) 压缩(把文件压缩合并(删除空格和注释))) --> .js .css .jpg .png 操作: 1.环境基于node 2.项目准备
webpack之打包js、css、html、img
naansun的博客
07-14 750
初次接触webpack，还是在学习vue的时候，一直对wepack的打包机制不是很清楚 近来有时间，了解了一下webpack打包js、css、html以及img的步骤以及踩了一些坑 故此记录一下。 webpack详细配置内容可以参考官网(https://webpack.docschina.org/) 首先我们创建一个目录，这里我创建的目录为webpack，使用webpack进行打包 则需要安装webpack以及webpack-cli，使用npm安装（node自带npm安装） 如果你全局安装了node..
详解webpack打包nodejs项目(前端代码)
01-01
随着前端体积越来越大，功能越来越丰富，这时候就需要将前端工程化，而webpack就是用于将前端各种文件打包起来。一个简单的webpack应该包含以下几个概念 入口起点 输出 配置 组件 加载器 插件 模块 模块热替换 适用情况 首先说明，此情况不具备普遍性。若你的情况与笔者类似那么希望这篇文章能够帮到你。 我的项目情况是这样的：用node.js做后台，ejs做模板引擎（即整个页面是一个ejs文件）由node.js将数据渲染完成后，再将完整页面返回给用户。 那么这样做会遇到的问题： 1. 本项目没有html页面，ejs的作用也不是引入公共的组件，直接就是一个完整
webpack打包nodejs项目的方法
10-17
主要介绍了webpack打包nodejs项目,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
Node.js-利用webpack使传统html项目在node服务器运行并打包的小玩意
08-09
利用webpack使传统html项目在node服务器运行并打包的小玩意
用nodejs写的一个简单项目打包工具
12-04
项目的模块加载和定义部分代码是这样的： 代码如下:XX.define(‘ns’,[‘tool/cookie’],function(){});//或者XX.define(‘ns.ns2′,’tool/cookie,tool/abc’,function(){})//或者XX.define(‘ns’,function(){}) 所用到的js打包工具就是扫描文件，然后匹配出来需要加载的模块，然后先加载模块代码。主要的nodejs打包工具代码如下： 代码如下://通用模块var Util = require(‘util’),    FS = require(‘fs’),    getDeps = r
Nodejs 项目的线上服务器部署与发布
04-21
Node.js线上服务器部署与发布，阿里云部署Node.js+MongoDB的应用项目，跨越成功的最后一步。百度云盘下载地址。百度云盘下载地址。百度云盘下载地址。
【webpack 插件开发】如何调试 webpack 打包时候的代码？
wangs0622的博客
11-21 1127
介绍 在进行前端工程的开发时，一般情况需要使用 webpack 打包工程。本文简单记录一下如果调试 webpack 打包时候的代码，免得下次还需要再去搜索。 方法1 使用 vscode + npm 插件 在 vscode 中安装插件 egamma/npm 插件。该插件可以帮我们界面直接点击去运行 package.json 文件中 scripts 下面定义的脚本命令。安装完成之后，在 Explorer 界面中会出现 NPM SCRIPTS 的面板，其中就会解析 package.json 中定义的命令，这样只需
webpack的发布策略
m0_46621937的博客
06-16 195
webpack的发布策略 在实际开发中，一般会有两套项目方案： 一套是开发期间的项目，包含了测试文件、测试数据、开发工具、测试工具等相关配置，有利于项目的开发和测试，但是这些文件仅用于开发，发布项目时候需要剔除； 另一套是部署期间的项目，剔除了那些客户用不到的测试数据测试工具和文件，比较纯净，减少了项目发布后的体积，有利于安装和部署！ 为了满足我们的发布策略，需要新建一个配置文件，命名为webpack.publish.config.js，将webpack.config.js的配置拷贝过去，剔除一些
node js怎么进行打包发布linux,Node.js JXcore 打包
weixin_39851457的博客
05-25 601
Node.js JXcore 打包Node.js 是一个开放源代码、跨平台的、用于服务器端和网络应用的运行环境。JXcore 是一个支持多线程的 Node.js 发行版本，基本不需要对你现有的代码做任何改动就可以直接线程安全地以多线程运行。这篇文章主要是要向大家介绍 JXcore 的打包功能。JXcore 安装下载 JXcore 安装包，并解压，在解压的的目录下提供了 jx 二进制文件命令，接下来...
Vue-cli快速搭建与Webpack打包详解
与传统的Webpack配置相比，使用vue-cli可以更加方便地创建项目、定义路由、处理模块打包等，极大地简化了前端开发的工作流。 最后，文章可能会指导读者如何通过vue-cli初始化一个新的项目，配置基本的配置文件，如`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

百年人生当疯狂

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值