Webpack2 入门踩坑教程(一)
来源:互联网 发布:企业网站中英文版源码 编辑:程序博客网 时间:2024/06/10 06:20
注:非原创,原文来自:http://blog.csdn.net/alanfancy/article/details/64444204
本人通过此链接博客学习,并在此基础上增加自己的想法。
- webpack所有操作必须基于node,网上自行百度教程
Webpack的核心思想
1.一切都是模块——就像js文件可以视作“模块”一样,其他所有的一切(CSS,图片,HTML)都可以被视作模块,通过require加载。。
2.模块加载器会把所有的模块最终打包生成一个巨大的“bundle.js”文件,并且会一直不停进行加载!所以Webpack通过大量的特性去分割你的代码,生成多个“bundle”片段,并且异步地加载项目的不同部分。
一.起步(HELLO WORLD)
- 安装http-server服务器:npm install http-server -g(全局安装,这一步若省略后面配置监听端口时会失败)。
- 在你的工作区间建立node项目,名字为webpack-test,在项目内的命令行中初始化npm,可得到
package.json
文件:
> npm init
package.json
是个工程文件( 包括了需要的以来描述,库描述,版本,作者等信息 )。
编辑器打开package.json
可以看到以下信息:
{ "name": "webpack-test", "version": "1.0.0", "description": "根据webpack2完整踩坑教程学习", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "repository": { "type": "git", "url": "git+https://github.com/EarlEcho/webpack-test.git" }, "author": "EarlEcho", "license": "ISC", "bugs": { "url": "https://github.com/EarlEcho/webpack-test/issues" }, "homepage": "https://github.com/EarlEcho/webpack-test#readme", "devDependencies": { "webpack": "^3.4.1" }}
- 项目根目录下创建index.html ,并创建一个id为app的div。
- 项目根目录下创建index.js,输入以下内容:
var app = document.getElementById('app');app.innerHTML = "helloWrold";
- 在该项目下打开命令行,安装webpack:
npm install webpack –save-dev
输入:
webpack. index.js bundle.js
将index.js打包为bundle.js文件
完成后可以发现项目下多了一个bundle.js的文件,这个是将index.js打包后的文件。
- 在index.html中引用bundle.js
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>webpack index</title> </head> <body> <div id="app"> <script src="bundle.js" type="text/javascript" charset="utf-8"></script> </div> </body></html>
- 此时可以在命令行输入
http-server -p 3000
,然后在浏览器打开localhost:3000
,页面打印出helloWorld。至此第一步成功实现。
阅读全文
0 0
- Webpack2 入门踩坑教程(一)
- Webpack2 入门踩坑教程(二)
- Webpack2 入门踩坑教程(三)
- Webpack2 入门踩坑教程(四)
- Webpack2 入门踩坑教程(五)
- Webpack2 完整踩坑教程(一)
- Webpack2 完整踩坑教程(一)
- Webpack2 完整踩坑教程(二)
- Webpack2 完整踩坑教程(三)
- Webpack2 完整踩坑教程(四)
- Webpack2 完整踩坑教程(五)
- Webpack2 完整踩坑教程(六)
- Webpack2 完整踩坑教程(七)
- Webpack2 完整踩坑教程(八)
- Webpack2 完整踩坑教程(九)
- Webpack2 完整踩坑教程(十)
- Webpack2 完整踩坑教程(十一)
- Webpack2 完整踩坑教程(十二)
- 万圣节派对
- 二叉排序树:POJ2418-Hardwood Species(外加字符串处理)
- Mybatis知识点整理
- unity切换窗口焦点后,程序依然运行
- 关于action向JSP传值
- Webpack2 入门踩坑教程(一)
- vim常用命令及操作
- react flux的坑之(二) 启动成功后,无法通过ip访问 webpack
- SED简明教程
- mysql临时表
- 端口分类
- ubuntu 添加当前目录到环境变量
- 【Python学习系列二十七】pearson相关系数计算
- js与date有关方法2(获取本周,本月,本季度,本年,上月,上周,上季度,去年)