webpack-起步

前言

从今天开始, 我要学习前端, 我觉得webpack应该是必经之路, 所以做一下笔记。

转自入门Webpack, 看这篇就够了

webpack

先来简单的介绍一下webpack, 把项目当作整体, 通过一个给定的文件找到项目的所有依赖文件, 使用loaders处理他们, 最后打包为一个(或多个)浏览器可识别的JavaScript文件。

一个简单的demo

通过这个demo来学习webpack

安装

使用npm安装webpack

1
2
3
4
# 全局安装
npm install -g webpack
# 安装到特定的项目目录
npm install --save-dev webpack

准备

使用npm init来创建package.json文件, 这个文件说明了当前项目的依赖模块, 还包括自定义的脚本任务等等。

接下来终端会根据一系列的问题来创建相关的package.json文件, 当然如果不准备在npm中发布模块的话, 答案并不重要。

接下来在当前项目的根目录下创建两个文件夹:app和public, 接下来创建三个文件:index.html, 放在public文件夹中, Greeter.js和main.js, 放在app文件夹中。

在index.html文件中写入html代码, 用来引入打包后的js文件。

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Webpack Sample Project</title>
    </head>
    <body>
        <div id='root'>
        </div>
        <script src="bundle.js"></script>
    </body>
</html>

接下来在Greeter.js文件中编写代码, 定义一个返回问候信息的html元素的函数, 并依据CommonJS规范到处这个函数为一个模块:

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

使用

最后再使用webpack命令来对js代码进行编译:

1
2
3
4
5
webpack app/main.js /public/bundle.js

# 如果非全局安装则需要指定其在`node_modules`中的地址:

node_modules/.bin/webpack app/main.js /public/bundle.js
前端技巧/经验 > webpack
#webpack
webpack-起步
http://icecreamzhao.github.io/front_skill_experience/webpack/webpack-first-step.html
作者
littleboyDK
发布于
2018年12月12日
许可协议