Webpack10分钟入门-创新互联
可以说现在但凡开发Single page application,webpack是一个不可或缺的工具。
WebPack可以看做是一个 模块加工器,如上图所示 。它做的事情是,接受一些输入,经过加工产生一些输出。
输入是我们web前端项目的模块文件,通常情况下这些文件都不能直接被浏览器的JavaScript执行引擎所执行。
输出是经过webpack加工后的能被浏览器使用的javascript和静态资源文件。比如ES6的js转成ES5的js,CSS预处理器文件转成CSS文件等等。
我们来动手做一个具体的例子。这个例子只花费10分钟时间,就能让我们熟悉webpack的基本用法。
1. 新建一个文件夹,首先用npm init命令创建一个package.json:
在下面使用命令行npm install --save-dev webpack,安装webpack并保存到项目的package.json的devDependencies下面。
花了一分钟才执行完毕。
执行完毕后,检查package.json, 发现webpack出现在devDependencies区域里。
此时项目文件夹层次结构如下图:
2. 新建一个index.html文件,输入以下内容: