首页 > Web开发 > 详细

webpack 入门

时间:2019-10-30 18:46:31      阅读:84      评论:0      收藏:0      [点我收藏+]

webpack是一个打包压缩工具,首先通过简单的实例来介绍webpack的使用。

webpack的安装

webpack通过npm包管理器安装的

npm install webpack webpack-cli --save-dev

首先创建一个文件夹:webapckdemo1

文件夹内输入命令

npm init -y

执行webpack的安装命令:

npm install webpack webpack-cli --save-dev

创建如下的目录结构

技术分享图片

 

 index..html的内容如下:

技术分享图片

 

 ./src/index.js的内容是alert("hello world!")

webpack.config.js的内容是:

module.exports = {
	entry: "./src/index.js",
	output: {
		filename: "./index.js"
	}
}

 在当前目录内执行npx webpack命令,index.js被打包到了dist文件夹

技术分享图片

 

查看dist目录下的index.js内容如下:

技术分享图片

 

 自定义的js脚本进行了包装

 

 打开index.html弹出了hello world的对话框

技术分享图片

 

webpack 入门

原文:https://www.cnblogs.com/whyd/p/11766230.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!