一、Webpack安装
先在要使用Webpack的文件夹下初始化npm
执行npm init命令, 接下来是需要输入一系列项目资料,直接回车跳过就可以了。
安装Webpack
首先需要在全局安装webpack。
执行cnpm install webpack -g命令。
在工作目录执行npm install webpack –save-dev命令,安装Webpack。
安装loader
通过执行cnpm install css-loader style-loader –save-dev命令,安装所需的loader。
基本项目结构
先从一个基本项目结构来分析webpack的打包原理。
a. 首先一个页面通过引入hello.bundle.js文件来实现完整的功能。
b. hello.bundle.js是在webpack以一个入口的js文件,即hello.js来确定该页面需要引入的js文件(world.js)、css文件(style.css),确定了各模块之间的相互关系之后,将其整合生成的一个文件。
c. hello.bundle.js是一个实际被执行的文件,按照hello.js、world.js、style.css之间的相互关系执行,简单来说是机器执行的。
d. 而hello.js、world.js、style.css只是各个模块的代码,由开发人员定义和编写,并不实际被执行,简单来说是人看的。
打包并执行一个简单项目
a. 我们先编写index.html
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Webpack</title> <style></style> </head> <body> <div class="wrap"></div> <script type="text/javascript" src="hello.bundle.js"></script> </body> </html>
b. 接下来是入口文件hello.js
require('./world.js'); require('style-loader!css-loader!./style.css'); // webpack本身不能加载css文件,需要使用css-loader用来使webpack可处理css文件,style-loader用来将css的style转换为<style>标签中的样式,插入到HTML文件中。 function hello(str) { document.write(str); } hello(' Hello Everyone!');
c. 被引入的world.js
function world() { return { text: 'Hello World!' }; } var text = world().text; document.write(text);
d. 引入的页面样式style.css
html body { margin: 0; bottom: 0; background: #faa; }
执行webpack
执行命令webpack hello.js hello.bundle.js –watch
这行命令的含义是,以hello.js为入口打包,输出为hello.bundle.js,同时设置了–watch,让webpack实时监控文件的修改,在有修改时,自动进行打包。
查看运行结果
我们看到了最终的运行结果,hello.bundle.js加载了style.css文件,并将其编译成css代码,插入到了html文件中,而world.js被引入并执行,之后执行的是hello.js中的代码。
查看打包后的hello.bundle.js文件
hello.bundle.js文件内包含了各个模块以及其相互之间的关系,用浏览器可执行的代码封装并运行。
- 9.