webpack基本操作

 安装

// 为防止全局安装webpack导致版本冲突,真实项目中以本地安装为主

$ npm init -y

$ npm install webpack webpack-cli --save-dev

 零配置使用

* 默认会打包SRC目录中的JS文件(入口默认index.js)

* 打包完成的目录默认是DIST/MAIN.JS

* webpack默认支持CommonJS和ES6 Module的模块规范,依此进行依赖打包

$ npx webpack

自定义基础配置 

/*
 * 编写自定义的webpack配置项,以后webpack打包编译的时候是按照自己配置的内容进行打包编译处理的(这个文件放置在项目的根目录下)
 *     文件名:webpack.config.js / webpackfile.js
 * 
 * 1. webpack本身是基于Node开发的,所以配置项的模块处理规则参考CommonJS规范来完成
 */
const path = require('path'); // path为nodejs里的模块

module.exports = {
	// 设置编译的模式 development/production(默认)
	mode: 'production',
	// 设置编译的入口文件(真实项目中一般开发的代码都要放置到SRC下)
	entry: './src/main.js',
	// 设置编译的出口文件
	output: {
		// 编译后的文件名  [hash]编译的时候会随机在名字中生成唯一的哈希值,以此保证每一次编译出来的文件是不一样的
		filename: 'bundle.[hash].min.js',
		// 输出的目录(需要是绝对路径)
		path: path.resolve(__dirname, 'build')
	}
};

自定义配置文件名

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值