webpack配置文件_webpackconfig.js详解
前言
上一篇文章我们使用webpack
打包成功了,但是每次都要自己手动输入打包的文件地址和打包到哪里去的地址,非常麻烦,所以这里介绍使用配置文件进行打包
webpack.config.js
首先我们创建一个js文件webpack.config
,当期我们配置最简单的导入导出,代码如下:
const path = require('path')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
}
}
现在我们使用打包命令时,不用再跟上打包文件地址等等参数,只需输入如下命令
webpack --mode development
这样我们就会将文件打包到dist
文件夹下
package.json
一般开发前端项目,我们都会使用npm init
进行初始化项目,会生成一个package.json
文件
为什么要使用npm init初始化项目
在node
开发中使用npm init
会生成一个pakeage.json
文件,这个文件主要是用来记录这个项目的详细信息的,它会将我们在项目开发中所要用到的包,以及项目的详细信息等记录在这个项目中。方便在以后的版本迭代和项目移植的时候会更加的方便。也是防止在后期的项目维护中误删除了一个包导致的项目不能够正常运行。使用npm init
初始化项目还有一个好处就是在进行项目传递的时候不需要将项目依赖包一起发送给对方,对方在接受到你的项目之后再执行npm install
就可以将项目依赖全部下载到项目里。
npm init -y
接着我们在项目的根目录输入npm init -y
就会生成一个package.json
文件,内容如下:
{
"name": "webpackTest2", // 项目名字
"version": "1.0.0", // 项目版本
"description": "", // 项目描述
"main": "webpack.config.js", // 项目入口
"scripts": { // 项目脚本
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [], // 项目关键字
"author": "", // 作者
"license": "ISC" // 项目证书
}
本地安装webpack
一般我们开发阶段,安装项目需要依赖的环境都使用--save -dev
--save
:本地安装-dev
:开发时依赖,也就是开发阶段使用的依赖包
接着使用命令本地安装webpack
npm install webpack --save-dev
安装成功后,重新打开package.json
,会多出如下代码
"devDependencies": {
"webpack": "^5.44.0"
}
这就是开发时依赖,开发环境中依赖webpack5.44.0
的版本
通过npm来打包webpack
最后我们不希望在命令行输入webpack
来打包,我们希望使用npm
来打包,我们只需要在package.json
中的script
中,添加如下命令
"scripts": {
"build": "webpack --mode development"
},
之后我们打包,只需要在终端输入npm run build
就可以自动打包了
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/164850.html原文链接:https://javaforall.cn
相关文章
- 兄台:JS闭包了解一下
- js对象(2)「建议收藏」
- JS跳转代码_js中跳转页面路径
- 用JS获取地址栏url参数的方法_js的url是啥
- JS面试题-js新增基本数据类型BigInt
- js定时器与延时器_JS做定时器倒计时
- JS逆向之webpack 通用扣取思路
- js二叉树层序遍历
- JS模块化编程以及AMD、CMD规范、Webpack
- webpack原理(2):ES6 module在Webpack中如何Tree-shaking构建
- 如何使用jscythe并通过Node.js的Inspector机制执行任意JS代码
- JS动态引入js、CSS动态创建script/link/style标签详解编程语言
- JS事件处理函数
- 使用JS技术实现Oracle数据库链接(js 链接 oracle)
- 使用JS在网页中连接Oracle数据库(js网页链接oracle)
- 数据JS技术实现实时获取Oracle数据(js实时获取oracle)
- JS实时链接Oracle让数据库访问更便捷(js实时连接oracle)
- JS将文件传输至MySQL数据库(.js传文件至mysql)
- ajax.js里面有内容显示效果,根据ID
- Javascript入门学习第二篇js类型
- JS字符串连接[性能比较]
- js对象之JS入门之Array对象操作小结
- js延迟加载改变JS的位置加快网页加载速度
- 用js代码改变单选框选中状态的简单实例
- js清除input中type等于file的值域(示例代码)
- js给页面加style无效果的解决方法
- 倒记时60刷新网页的js代码
- setinterval()与clearInterval()JS函数的调用方法
- 点击button获取text内容并改变样式的js实现