首页 > 程序开发 > web前端 > HTML/CSS >

Webpack2完整踩坑教程(一)

2017-03-27

Webpack2完整踩坑教程(一),本文基于NODEJS环境,nodejs的安装参考线上的流程:https: nodejs org en 。

Webpack2完整踩坑教程(一),本文基于NODEJS环境,nodejs的安装参考线上的流程:https://nodejs.org/en/ 。

Webpack的核心哲学思想
1.一切都是模块——就像JS文件可以视作“模块”一样,其他所有的一切(CSS,图片,HTML)都可以被视作模块,通过require加载。。
2.模块加载器会把所有的模块最终打包生成一个巨大的“bundle.js”文件,并且会一直不停进行加载!所以Webpack通过大量的特性去分割你的代码,生成多个“bundle”片段,并且异步地加载项目的不同部分。

一.起步(HELLO WORLD)
nodejs安装请参考官网。
先安装http-server服务器:npm install http-server -g(非必须)
1.建立node项目:npm init ,名字为webpack-test,得到package.json文件

{
"name": "webpack-test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": { }
}

2.创建index.html ,并新建一个id为app的div。
3.创建index.js

var app=document.getElementById('app');
app.innerHTML="hi";

4.安装webpack: npm install webpack –save-dev
5.输入./node_modules/webpack/bin/webpack.js index.js bundle.js 将index.js打包为bundle.js文件

这里写图片描述

6.在index.html引用bundle.js

<!DOCTYPE html> 
<head> 
<title></title> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></script> 
</head> 
<body> 
<div id="app"></div> 
<script src="bundle.js"></script> 
</body> 
</html>

7.此时可以输入http-server -p 3000 ,然后在浏览器打开localhost:3000,页面输出hi字样。打开bundle.js查看打包后的源码,至此第一步成功实现。

相关文章
最新文章
热点推荐