一、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文件内包含了各个模块以及其相互之间的关系，用浏览器可执行的代码封装并运行。

Webpack入门之一：从一个简单例子入门

一、Webpack安装

猜你喜欢