webpack demo 讲解
来源:互联网 发布:算法如何入门 编辑:程序博客网 时间:2024/04/30 22:02
在学习webpack时,笔者假设你已经对nodeJS有一定熟悉程度。并且你在你的机器上已经安装了nodeJS
webpack Demo01
我们新建一个文件夹叫demo01
mkdir demo01
在demo01中,建立webpack.config.js ,它是webpack项目的入口文件。
/**webpack 配置文件,告诉webpack 它需要做什么*/// module.exports 是node JS 的入口 module.exports = { // 页面入口文件配置 entry: './main.js', // 页面文件输出配置 output: { filename: 'bundle.js' }};
入口要执行的js文件main.js
document.write('<h1>Hello World</h1>');
执行Html:index.html
<html> <body> <script type="text/javascript" src="bundle.js"></script> </body></html>
index.html 引入了webpack自动打包成的bundle.js
执行nodeJS命令:
$ webpack entry.js bundle.js
会自动生成bundle.js 文件
用浏览器打开index.js 页面,会显示出hello world出来。这就是我们学习webpack的第一个程序。
Webpack 在执行的时候,除了在命令行传入参数,还可以通过指定的配置文件来执行。默认情况下,会搜索当前目录的 webpack.config.js 文件,这个文件是一个 node.js 模块,返回一个 json 格式的配置信息对象,或者通过 –config 选项来指定配置文件。
此外,我个人建议用 nodeJS 安装一个 http-server 到本地全局中。
npm install - g http-server
安装完成后,在demo01 目录下 命令输入 http-server 就会起一个本地服务,我们访问localhost:8080 就能访问。具体可以通过 http-server -h 查看详细使用。
参考资料
http://webpackdoc.com/configuration.html
http://webpack.github.io/docs/
0 0
- webpack demo 讲解
- Webpack讲解
- webpack教程、实用demo
- 【webpack】入门Demo
- webpack 安装与测试demo
- Angular2 + Webpack项目搭建Demo
- webpack打包vue项目demo
- webpack-config.js 内容讲解
- TLV----Demo讲解
- Vuex Demo 讲解
- (三)webpack入门——webpack功能集合的demo
- 【demo】react+webpack音乐播放器
- npm和webpack下的angular-demo
- vue + webpack + node 开发一个小demo
- SDL系列讲解(四) demo讲解
- TBB parallel_while 使用 demo讲解
- cocos2d-x box2d Demo讲解
- 开始 vue-cli webpack 打包工具的demo
- leetcode 98 Validate Binary Search Tree java 算法
- [BZOJ4522] [CQOI2016] 密钥破解 - Pollard-Rho - exgcd
- C#学习总结(第一周)
- 第一个servlet程序
- 大数据IMF传奇行动绝密课程第12课:HA下的Spark集群工作原理解密
- webpack demo 讲解
- java List与Array 转换
- mysql错误:Lock wait timeout exceeded; try restarting transaction解决方案
- php_curl "Call to undefined function curl_init()"的解决方法
- BRIDGE桥接设计模式(结构型)
- 解决搭建好LNMP环境之后,出现了Access Denied错误
- android面试 (基础篇 11)
- [CodeForces]-675B-Restoring Painting
- Unity中的WWW网络请求