webpack打包js文件.

最新推荐文章于 2023-05-12 17:00:51 发布
最新推荐文章于 2023-05-12 17:00:51 发布
阅读量463 收藏 1
点赞数
分类专栏： webpack 文章标签： webpack打包js文件.
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42205731/article/details/82991862
版权

webpack安装可查看此链接https://blog.csdn.net/qq_42205731/article/details/81905404

尝试打包

我们在根目录下创建如下文件夹及文件

index.js中

    var arr = [0,1,2,3,4,5,6,7,8,9];
		    var out = [];
		    var num = 5;
		while(out.length < num){
		     var temp = (Math.random()*arr.length) >> 0;
		     out.push(arr.splice(temp,1));
		 }
 alert(out)

在index.html中

<body>
    <h1>Hello</h1>
    <script src="./src/bundle.js"></script>
</body>

在根目录下运行

webpack src/js/index.js -o src/bundle.js

注意:有可能会出现类似于这样的错误信息,

     ERROR in multi ./src/js/index.js ./src/bundle.js Module not found: Error: Can't resolve './src/bundle.js' in 'C:\xampp\htdocs\webpack_One'  @ multi ./src/js/index.js ./src/bundle.js main[1]...

这是因为我们使用的webpack版本,不适用此命令, 可百度自行解决

如果没有出现错误信息

此时在src文件夹下面生成了一个bundle文件 
在浏览器中打开index.html文件，app.js中的内容被打包到bundle.js中了。

 

 

陨石猎人
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
webpack怎样打包js
10-10 891
首先要在自己电脑安装webpack和webpack-cli然后才可以接着下面的操作。 安装之后 新建一个js文件，和一个webpack.config.js 接下来我们就打包这个新建的js文件（我这里是a.js） webpack.config.js是webpack的配置文件，当执行webpack命令的时候会去读取这个文件里面的配置信息 a.js内容很简单，就是一个输出而已 we...
webpack + typescript + babel打包*.min.js文件的环境配置
weixin_30625691的博客
06-20 530
将多个*.ts文件打包成一个*.min.js文件的开发配置 1、初始化 npm init 新建以下文件目录： 2、安装依赖： "devDependencies": { "@babel/core": "^7.4.5", "@babel/preset-env": "^7.4.5", "babel-loader": "^8.0.6", ...
使用Webpack打包自己的js工具库代码
y121500062的博客
07-05 8752
1、webpack环境的安装    （1）下载并安装node.js            检查系统是否安装node.js环境            在命令行终端环境中，输入：node -v 检查版本号，有则正确安装，没有则重新安装。    （2）检查npm            在命令行终端环境中，输入：npm -v 检查版本号，有则正确安装，没有则安装。    （3）安装webpack   ...
使用webpack打包js（详细）
JAY203916的博客
03-09 900
webpack打包js文件
使用webpack5打包js文件
river106的博客
03-21 1153
1、设置npm包安装路径 npm config set prefix="D:\environment\nodejs\node_modules\npm\node_global_modules" npm config set cache=" D:\environment\nodejs\node_modules\npm\node_cache" 2、安装webpack npm install webpack -g npm install webpack-cli -g 安装成功后会有如下2个文件夹：
webpack打包html资源.zip
09-09
2. **入口配置(entry)**: 在Webpack配置文件中，我们需要指定至少一个入口点，这通常是应用程序的主JavaScript文件。在处理HTML资源时，我们可以设置一个特殊的入口点，比如`index.html`，这样HtmlWebpackPlugin就会...
webpack教程之webpack.config.js配置文件
10-19
Webpack 是一个模块打包工具，它将 JavaScript 模块转换成静态资源，以便在浏览器中运行。`webpack.config.js` 文件是 Webpack 的核心配置文件，它定义了项目的输入、输出、加载器、插件等设置。这篇教程将带你了解...
webpack将js打包后的map文件详解
11-26
类似于这样的map文件 由webpack自动生成 参数： devtool: ‘#eval-source-map’,//...以上这篇webpack将js打包后的map文件详解是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
webpack打包js文件及部署的实现方法
10-18
本篇文章将详细介绍如何使用Webpack来打包JavaScript文件以及打包后的文件如何进行部署。 ### 1. Webpack配置文件 Webpack 的核心在于它的配置文件 `webpack.config.js`。这个文件定义了项目的入口(entry)、出口...
Webpack 打包 JavaScript 应用程序的具体步骤
mi_lao_tou的博客
05-12 510
打包完成后，可以在 HTML 文件中引用打包后的 JavaScript 文件。Webpack 需要一个配置文件来指定要打包的入口文件、输出文件等信息。可以在项目根目录下创建一个名为。运行 Webpack 命令来打包应用程序。这将在浏览器中加载打包后的 JavaScript 文件，从而启动应用程序。这将使用指定的配置文件进行打包，并将输出文件保存在指定的输出目录中。的文件，并在其中编写配置信息。上面的配置文件指定了入口文件为。文件中编写应用程序代码。
webpack 单独打包指定JS文件的方法
11-29
背景 最近接到一个需求，因为不确定打出的前端包所访问的后端IP，需要对项目中IP配置文件单独拿出来，方便运维部署的时候对IP做修改。因此，需要用webpack单独打包指定文件。 CommonsChunkPlugin module.exports = { entry: { app: APP_FILE // 入口文件 }, output: { publicPath: './dist/', //输出目录，index.html寻找资源的地址 path: BUILD_PATH, // 打包目录 filename: '[name].[chunkhash].js', // 输出文件名 ch
webpack打包非模块化js的方法
12-04
本文主要记录了非模块化js如何使用webpack打包 模块化打包实现方式 webpack是模块打包工具，通过入口文件递归遍历其依赖图谱，绝对是打包神器。 bar.js export default function bar() { // } foo.js import bar from './bar'; bar(); 通过如下，webpack配置很快实现打包。通过插件我们还可以实现文件压缩，开发态我们还可以配置sourceMap进行代码调试(chrome浏览器支持sourcemap调试)。 module.exports = { entry: './foo.js', outpu
使用webpack打包JS依赖库
暖暖2333的专栏
12-15 756
这里的依赖库是指给第三方平台使用的JS库文件。与普通的web应用代码不同，依赖库要正确设置导出的内容 配置项 主要有三个配置项 library 生成库的名称（非文件名） libraryTarget 配置以哪种方式暴露library var / assign: 暴露为一个变量 this / window / global / commonjs：在对象上赋值暴露 commonjs2 / amd / umd：指定兼容特定的模块系统 libraryExport 配置哪个模块将被暴露，可以是字符串或字符串数组。默
Webpack打包工具的使用---打包引用JS和CSS文件
热门推荐
等，你的到来。
01-26 1万+
1、webpack概述：webpack是一款加载兼打包工具，它能把各种资源，例如J(含JX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理。2、全局安装：在安装Webpack之前，我们的本地环境需要支持node.js。安装node.js可以参考node官方文档。使用如下命令在全局安装webpacknpm install webpack -g3、webpack的使用步骤A...
基于node.js使用webpack打包工具启动的一个小项目
u014183772的专栏
08-07 571
在自己的桌面新建一个文件夹 例如my-demo 打开cmd控制台，进入 查看node的版本 node-v 查看npm的版本 npm -v 让该文件基于npm 管理 npm init 一路回车，生成一个package.json 文件 局部安装webpack npm i webpack webpack-cli -D 生成node_modules 新建如下三个测试文件（es6的模块化浏览器不支持，可以借助webpack来识别） index.html <!DOCTYPE html>
webpack打包js文件
Leon_Jinhai_Sun的博客
08-01 284
Webpack安装 全局安装 npm install -g webpack webpack-cli 安装后查看版本号 webpack -v 初始化项目 创建webpack文件夹 进入webpack目录，执行命令 npm init -y 创建src文件夹 src下创建common.js exports.info = function (str) { document.write(str); } src下创建utils.js exports.add = functio
使用Webpack打包JS与CSS教程
匿名攻城狮
04-10 420
使用Webpack打包JS与CSS教程
Webpack打包工具
weixin_34409703的博客
01-21 155
Webpack是一个打包模块化javascript的工具，在webpack里一切文件皆模块，通过loader转换文件，通过plugin注入钩子，最后输出由多个模块组合成的文件，webpack专注于构建模块化项目。 本质上，webpack是javascript应用程序的静态模块打包器。当webpack处理应用程序时，它会递归地构建一个依赖图，其中包含应用程序所需的每个模块，然后将所有这些模块打包成...
Webpack4基本打包(一)-----------webapck4打包js，html,css,image
铭小小
03-06 1012
要实现wepack打包，首先安装一以下内容 npm install webpack -g 指定版本npm install webpack@1.15.0 -g npm install webpack-cli -g npm install webpack-dev-server -g 安装webpack-cli是webpack4独有的。 打包步骤 1.首先创建3个文件夹 mkdir dis...
webpack打包之后index.html页面暴露ip号
最新发布
07-28
如果在 Webpack 打包后的 `index.html` 页面中暴露了 IP 地址，可能是因为在项目配置中使用了错误的配置或插件。为了修复这个问题，你可以尝试以下几个方法： 1. 使用 HtmlWebpackPlugin 插件：在 Webpack 配置文件中，确保你使用了 HtmlWebpackPlugin 插件，并配置了正确的选项。在 `plugins` 部分中添加以下代码： ```javascript const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { // ... plugins: [ new HtmlWebpackPlugin({ // 设置生成的 HTML 文件中的标题、模板和文件名等选项 }), ], // ... }; ``` 请确保正确设置了 `title`、`template` 和 `filename` 等选项，以避免暴露 IP 地址。 2. 检查 publicPath 配置：在 Webpack 配置文件中，检查 `output` 部分的 `publicPath` 配置。确保将其设置为合适的值，以避免暴露 IP 地址。例如，将其设置为 `/` 或相对路径。 ```javascript module.exports = { output: { // ... publicPath: '/', }, // ... }; ``` 3. 使用 devServer 配置：如果你正在使用 Webpack Dev Server 进行开发，确保在配置文件中正确设置了 `devServer` 部分。检查是否使用了 `public` 或 `host` 等选项，并将其设置为适当的值。 ```javascript module.exports = { // ... devServer: { // ... public: 'your-domain.com', // or // host: 'your-domain.com', // ... }, // ... }; ``` 确保将 `your-domain.com` 替换为你正确的域名或 IP 地址。 4. 检查其他配置项：检查 Webpack 配置文件中的其他可能影响 `index.html` 页面的配置项，例如 `mode`、`optimization` 等。确保这些配置项不会暴露 IP 地址。 如果尝试了以上方法后问题仍未解决，建议仔细检查你的 Webpack 配置文件和相关依赖，确保没有其他错误导致 IP 地址暴露在生成的 `index.html` 页面中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

陨石猎人

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

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

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

打赏作者

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

抵扣说明：

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

余额充值