Webpack2 完整踩坑教程(一)

来源：互联网发布：家居网络推广招聘编辑：程序博客网时间：2024/04/28 01:28

本文基于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查看打包后的源码，至此第一步成功实现。

0 0