入门webpack手记(一)

2017-08-22  本文已影响0人  惶惶不安的青年

前言

入门webpack通过zhangwang同学的《入门Webpack,看这篇就够了》进行学习的。
地址:www.jianshu.com/p/42e11515c10f

准备工作

学习webpack前,安装node.js、npm、npm有点慢可以用淘宝镜像cnpm。这个网上都有教程。可自行百度

开始配置

首先安装webpack,个人觉得cnpm比较快。

全局安装
cnpm install -g webpack

安装完成后创建新文件夹(命名webpackTese 随意的)并(cd webpackTest)进入文件夹,再webpackTest中新建一个项目的package.json(不可随意命名)配置文件,使用npm init命令也可以自动创建这个package.json文件。输入这个命令后,会问你一系列诸如项目名称,项目描述,作者等信息,可自行填写。

完成后把webpack安装到你的项目
cnpm install --save-dev webpack

回到之前的webpackTese文件夹,并在里面创建两个文件夹,app文件夹和public文件夹,app文件夹用来存放原始数据和我们将写的JavaScript模块,public文件夹用来存放之后供浏览器读取的文件(包括使用webpack打包生成的js文件以及一个index.html文件)。接下来我们再创建三个文件:index.html--放在public文件夹中、Greeter.js-- 放在app文件夹中、main.js-- 放在app文件夹中。

我们在index.html文件中写入最基础的html代码,它在这里目的在于引入打包后的js文件(这里我们先把之后打包后的js文件命名为bundle.js)。

我们在Greeter.js中定义一个返回包含问候信息的html元素的函数,并依据CommonJS规范导出这个函数为一个模块:

// Greeter.js
module.exports = function() {
var greet = document.createElement('div');
greet.textContent = "Hi there and greetings!";
return greet;
};

(重做待完。。。。。。。)

上一篇下一篇

猜你喜欢

热点阅读