webpack--入门篇

今天开始搞webpack,感觉上webpakc比gulp难上手多了....无比残念!

废话不多说,反正上手就是怼, 不怼怎么会

  1. 全局安装webpack

    npm install webpack -g

  2. 在文件下也安装一个开发依赖

    npm install webpack --save-dev

  3. 创建一个html文件, 一个js文件用于测试

    html:

    <!--index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
    <script src="./bundle.js"></script>
</html>

    javascript:

    // entry.js
document.write('helloWorld')

我们看到 html 里面的 script 标签引用了一个bundle.js文件,然后实际上创建的文件是entry.js

这么做的目的就是为了让 webpack 根据entry.js给我们生成一个bundle.js

打开cmd,进入到当前文件所在路径,执行命令

webpack entry.js bundle.js

看到如下图所示, 恭喜你!!已经成功了第一步...

webpack第一步成功

如果仅仅这是这样的话,那还真没什么卵用啊

我们接下来再让他加载一个css

首先我们还是需要安装一些包,因为webpack和gulp一样,说白了就是一个平台,很多功能还是需要第三方提供的包

npm install style-loader css-loader --save-dev

简单说下这两个包

  1. style-loader

    把原来的 CSS 代码插入页面中的一个 style 标签中

  2. css-loader

    遍历 CSS 文件，然后找到 url() 表达式然后处理他们

仅仅作为使用者,我们知道出来 css 需要这两个包就行了,顺便一提 sass 也一样需要这两个包

接下来创建一个 css 文件

css:

/* index.css */
body {
  background:cyan;
}

修改一下entry.js

javascript:

// entry.js
require('!style!css!./index.css')
document.write('helloWorld')

这里require就是CommonJs里面的导包, 简单理解成把css导入进来了.

这时候我们再进入cmd执行编译命令 webpack entry.js bundle.js 再次打开网页,发现背景色变了

奇怪的是我们的html只导入了一个js文件,webpack 直接把这些东西集成到 bundle.js 这个文件里面了

你打开这个文件发现里面会多出很多不认识的东西,其实就是webpack的处理. 比如刚刚导入css时候使用的 require 的处理

总结:

到这里我们已经完成了简单的入门

下一篇我们来看看如何来整webpack的配置文件

posted @ 2017-01-14 11:30  魔术师白  阅读(122)  评论(0)    收藏  举报