JavaScript自定义Webpack配置实现流程介绍

目录
  • 1 初始化并创建要被打包的文件
  • 2 命令行配置
  • 3 配置文件配置

1 初始化并创建要被打包的文件

首先创建文件夹webpack-demo（随便起一个），用来演示打包过程。在该文件夹下终端运行命令，对项目进行初始化操作，对包进行管理：

npm init # 输入命令后一直敲回车即可
npm init -y # -y是yes的意思，在初始化时省去敲回车的步骤

命令成功运行之后，该文件夹下出现了package.json文件，文件内容具体如下：

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

然后在本地安装webpack和webpack-cli，执行以下命令：

npm install webpack webpack-cli --save-dev

该命令执行完成之后，在当前目录下出现了node_modules文件夹和package-lock.json文件，目录结构如下：

在webpack-demo文件夹下创建文件夹src，在src下创建两个文件，index.js和hello.js，目录结构如下：

在hello.js文件中编写如下代码：

function hello() {
    console.log("hello");
}
export default hello;

在index.js文件中编写如下代码：

import hello from "./hello";
hello();

到这一步我们的准备工作就完成了，接下来在该示例上操作。

2 命令行配置

webpack-cli给我们提供了丰富的终端命令行指令，可以通过以下命令查看：

npx webpack --help

我们看到有很多命令可以帮助我们进行配置，接下来我们演示几个。

# --entry 指定了入口文件为index.js
# --mode 指定模式为production生产环境
npx webpack --entry ./src/index.js --mode production

运行该命令之后，我们可以看到目录新出现了dist文件夹，文件夹中有main.js文件，该文件就是我们打包之后的文件。

那么dist文件夹的名字和main.js文件的名字可以自己定义吗？答案是可以，但是我们需要在命令行中输入其他的参数。

到这里我们发现，命令行不方便也不直观，而且不能保存我们的一些配置，因此webpack为我们提供了通过自定义配置文件的方式帮助我们自定义配置参数。

3 配置文件配置

我们在webpack-demo文件夹中新建文件webpack.config.js文件，这个文件名不能随意起，因为webpack会自动读取文件，在该文件中配置entry和output制定输入和输出的文件：

module.exports = {
    entry: "./src/index.js", // 设置入口文件
    output: {
        filename: "bundle.js", // 指定输出的文件
        path: "./dist", // 指定输出的路径
    }
}

配置完成之后我们在终端运行命令来打包文件：

npx webpack

结果我们可以看到，终端为我们报了错，提示我们输出路径必须是一个绝对路径。那么我们可以通过node中的path模块来获得当前文件的路径，通过该路径来设置输出路径：

const path = require("path");
module.exports = {
    entry: "./src/index.js", // 设置入口文件
    output: {
        filename: "bundle.js", // 指定输出的文件
        // path.resolve()把一个路径或路径片段的序列解析为一个绝对路径
        // __dirname是当前文件所在的目录
        path: path.resolve(__dirname, "./dist"), // 指定输出的路径
    }
}

我们再执行npx webpack，我们发现打包成功了，不过终端提示我们还应该设置一下mode，我们在配置文件后添加上mode即可。

const path = require("path");
module.exports = {
    entry: "./src/index.js", // 设置入口文件
    output: {
        filename: "bundle.js", // 指定输出的文件
        // path.resolve()把一个路径或路径片段的序列解析为一个绝对路径
        // __dirname是当前文件所在的目录
        path: path.resolve(__dirname, "./dist"), // 指定输出的路径
    },
    mode: "production" // 模式：生产环境
}

打包之后，我们可以看到dist文件夹下面出现了bundle.js文件，该文件就是我们打包之后的文件。

到此这篇关于JavaScript自定义Webpack配置实现流程介绍的文章就介绍到这了,更多相关JavaScript自定义Webpack 内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • webpack 5.68.0版本教程示例详解

    webpack 5.68.0版本教程示例详解

    目录 起步 1. 基本安装 2. 配置出入口 plugin 1. html-webpack-plugin 2. progress-bar-webpack-plugin loader 1. css-loader与style-loader 2. url-loader与file-loader 3. sass-loader 4. postcss-loader 5. babel-loader 搭建环境 1. 开发环境与生产环境 2. 配置别名 代码分离 1. webpack-bundle-analyzer

  • webpack4升级到webpack5的实战经验总结

    webpack4升级到webpack5的实战经验总结

    目录 前言 terser-webpack-plugin语法报错 fork-ts-checker-webpack-plugin语法报错 IgnorePlugin报错 devtool报错 webpack-dev-server publicPath报错 webpack-dev-server disableHostCheck报错 移除 node.js polyfill 导入json文件语法改变 打包报错unknown option ‘-p’ node版本过低 图片编译问题 打包文件命名问题 废弃了Mod

  • JavaScript webpack5配置及使用基本介绍

    JavaScript webpack5配置及使用基本介绍

    目录 一.webpack 1.1 简介 1.2 五大核心概念 entry (入口) output (出口) loader plugin (插件) mode (模式) 二.配置及使用 项目结构 使用html-webpack-plugin 三.写在最后 一.webpack 1.1 简介 在最原始的前端开发中,我们引入js和css等文件都是通过手动地在html中插入script和link标签来达到引用的目的,不仅繁琐,每个文件都需要单独发一次请求,而且容易发生变量冲突的问题. 于是提出了JavaScr

  • JavaScript webpack模块打包器如何优化前端性能

    目录 一.webpack的使用背景 二.webpack如何优化 1. JS代码压缩 2.CSS代码压缩 3. HTML文件压缩 4. 文件大小压缩 5. 图片压缩 6. Tree Shaking 7. 代码分离 8. 内联chunk 9. 利用CDN加速以及提取公共第三方库 三.总结 一.webpack的使用背景 随着前端的项目逐渐扩大,必然会导致性能问题.尤其大大型复杂的项目中,前端业务可能因为一个小小的数据依赖,导致整个页面的卡顿甚至崩溃. 一般项目在完成后,会通过webpack进行打包,利

  • vue.config.js中configureWebpack与chainWebpack区别及说明

    vue.config.js中configureWebpack与chainWebpack区别及说明

    目录 configureWebpack与chainWebpack区别 1.configureWebpack 2.chainWebpack vue-cli中chainWebpack和configureWebpack vue.config.js configureWebpack与chainWebpack区别 configureWebpack与chainWebpack的作用相同,唯一的区别就是他们修改webpack配置方式不同: https://cli.vuejs.org/zh/config/#con

  • webpack打包的3种hash值详解

    webpack打包的3种hash值详解

    目录 前言 当年的校招 哪三种? 实践讲解 事先准备 打包环境搭建 hash chunkhash contenthash 前言 大家好,我是林三心,用最通俗易懂的话讲最难的知识点是我的座右铭,基础是进阶的前提是我的初心 当年的校招 依稀记得,当年我参加了大厂的校招,面试的是网易雷火工作室,当时有一道题,我记得很清楚,就是:说说webpack中三种hash配置的区别 哈哈,我当时连webpack都不太会配置,所以也答不出来,然后也...没有然后了.. 哪三种? webpack中的三种hash分别是

  • JavaScript自定义Webpack配置实现流程介绍

    JavaScript自定义Webpack配置实现流程介绍

    目录 1 初始化并创建要被打包的文件 2 命令行配置 3 配置文件配置 1 初始化并创建要被打包的文件 首先创建文件夹webpack-demo(随便起一个),用来演示打包过程.在该文件夹下终端运行命令,对项目进行初始化操作,对包进行管理: npm init # 输入命令后一直敲回车即可 npm init -y # -y是yes的意思,在初始化时省去敲回车的步骤 命令成功运行之后,该文件夹下出现了package.json文件,文件内容具体如下: { "name": "webpa

  • JavaScript中使用Callback控制流程介绍

    javascript中随处可见的callback对于流程控制来说是一场灾难,缺点显而易见: 1.没有显式的return,容易产生多余流程,以及由此引发的bug. 2.造成代码无限嵌套,难以阅读. 下面就来说说怎么解决避免上述的问题. 第一个问题是一个习惯问题,在使用callback的时候往往会让人忘了使用return,这种情况在使用coffee-script的时候尤甚(虽然它在编译成javascript时会自行收集最后的数据作为返回值,但是这个返回值并不一定代表你的初衷).看看下面的例子. 复制

  • 如何创建 JavaScript 自定义事件

    目录 怎么创建自定义事件 事件定制 冒泡 bubbles 可取消 cancelable 组合 composed 给事件传递自定义数据 命名约定 双击事件 总结 前言: 相信大家肯定处理过很多的事件监听,比如点击事件或者表单提交.事件监听对许多用例来说很有帮助,但是有时我们需要创建自己的自定义事件来处理复杂的交互. 怎么创建自定义事件 创建自定义事件听起来很困难,但是只需要下面简单的一行代码即可. const myEvent = new Event("myCustomEvent") 我们

  • JavaScript自定义事件介绍

    JavaScript自定义事件介绍

    很多DOM对象都有原生的事件支持,向div就有click.mouseover等事件,事件机制可以为类的设计带来很大的灵活性,相信.net程序员深有体会.随着web技术发展,使用JavaScript自定义对象愈发频繁,让自己创建的对象也有事件机制,通过事件对外通信,能够极大提高开发效率. 简单的事件需求 事件并不是可有可无,在某些需求下是必需的.以一个很简单的需求为例,在web开发中Dialog很常见,每个Dialog都有一个关闭按钮,按钮对应Dialog的关闭方法,代码看起来大概是这样 复制代码

  • JavaScript中Webpack的使用教程

    JavaScript中Webpack的使用教程

    目录 0.什么是Webpack 1.Webpack的使用 2.Webpack 的核心概念 2.1 entry 2.1.1 单入口 2.1.2 多入口 2.2 output 2.2.1 单入口时的输出 2.2.2 多入口时的输出 2.3 loader 2.4 plugins 3.Webpack处理css文件 3.1 < style>标签形式嵌入html 3.2 < link>标签形式引入html 4.Webpack处理css中的图片 4.1 使用file-loader处理css中的图

  • Java Spring-Cache key配置注意事项介绍

    为了提升项目的并发性能,考虑引入本地内存Cache,对:外部数据源访问.Restful API调用.可重用的复杂计算 等3种类型的函数处理结果进行缓存.目前采用的是spring Cache的@Cacheable注解方式,缓存具体实现选取的是Guava Cache. 具体缓存的配置此处不再介绍,重点对于key的配置进行说明: 1.基本形式 @Cacheable(value="cacheName", key"#id") public ResultDTO method(i

  • 详解node.js中的npm和webpack配置方法

    详解node.js中的npm和webpack配置方法

    概述 Node.js用c++语言编写而成的,是一个基于chrome V8引擎的javascript运行环境,让javaScript的运行脱离浏览器服务端,可以使用javaScript语言书写服务器端代码 1.使用node来实现一个http服务器 下面创建了一个端口为8787的服务器.他与php,java等不同,像php本地还要基于阿帕奇服务器,node.js能用代码快速搭建一个服务器. // 引入http模块 var http = require("http"); // 调用http的

  • vue-cli基础配置及webpack配置修改的完整步骤

    vue-cli基础配置及webpack配置修改的完整步骤

    脚手架 脚手架帮我们帮我们把 webpack 等相关的配置都处理好,我们只需要基于脚手架快速构建一个项目即可(项目中一定包含webpack的相关配置) vue脚手架  vue-cli 我们使用任何东西第一步都是安装 1.安装脚手架(一般安装在全局) //=>用npm安装 $npm install @vue/cli -g //=>用yarn安装 $yarn global add @vue/cli 安装成功后,全局环境会生成 $vue 的可执行命令,我们可以基于 $vue --version 来查

  • SpringCloud Feign配置应用详细介绍

    SpringCloud Feign配置应用详细介绍

    目录 前言 1.Feign简介 2.Feign配置应用 前言 服务消费者调用服务提供者的时候使用RestTemplate技术 存在不便之处: 拼接url restTmplate.getForObJect 这两处代码都比较模板化,能不能不让我我们来写这种模板化的东西,另外来说,拼接url非常的low,拼接字符串,拼接参数,很low还容易出错 1.Feign简介 Feign是Netflix开发的一个轻量级RESTful的HTTP服务客户端(用它来发起请求,远程调用的),是以Java接口注解的方式调用

  • Vue数据增删改查与表单验证的实现流程介绍

    Vue数据增删改查与表单验证的实现流程介绍

    目录 1. 准备工作 2. 弹出窗口 3. 新增更新功能 4. 删除功能 5. 表单验证 6. 接口文档 1. 准备工作 后台服务接口,对书本的增删改查操作 2. 弹出窗口 进入ElementUi官网, 找到Dialog对话框,可以参考“嵌套表单的dialog”实现. 该步骤先实现弹出窗口的前端逻辑,并不会调用后台接口服务进行实际的业务操作. BookList.vue <!-- 弹出窗口:增加和修改书本信息共用一个弹出窗口,需要根据用户的选择动态的设置弹出窗口的标题 :tile 通过绑定值的方式

随机推荐