Webpack 入门教程4

Webpack 配置与打包实战
本文介绍如何创建Webpack配置文件webpack.config.js,并通过具体步骤演示如何设置入口文件、输出路径及处理CSS加载器,最后完成项目的打包流程。

21.创建webpack.config.js配置文件

echo ... > webpack.config.js

wKiom1inxgax7uAIAAAEPHEPewo699.png-wh_50

22.将webpack.config.js内容修改为如下内容

module.exports = {
	entry: "./runoob1.js",
	output:{
		path:__dirname,
		filename:"bundle.js"
	},
	module:{
		loaders:[{
			test:/\.css$/,
			loader:"style-loader!css-loader"
		}]
	}
}

23.使用webpack命令进行打包

webpack

wKioL1inxojCjMgTAAAem4QOUb8082.png-wh_50

24.使用浏览器打开index.html页面,输出内容如下

wKioL1in3cHD6R9_AAAbWfwaZ-w926.png-wh_50


本文转自 素颜猪 51CTO博客,原文链接:http://blog.51cto.com/suyanzhu/1899012


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值