前端工程化——Webpack入门使用

城南

前言

webpack 是什么?来自一位小白的疑问。

是构建工具,还是打包工具?

webpack是一个模块加载器兼打包工具,它能够让你非常清晰的把编写模块化的代码,什么编译都交给webpack就好了,当它也能实现简单的打包,比如合并js,压缩等。

下面我们简单说下webpackgulp的区别,好加深下webpack的理解。

本质上来说,gulp是通过一系列的插件实现了原本复杂繁琐的任务自动化,比如拷贝啊,替换文件啥的,是一个纯粹的工具。它并不能将你的css,图片等非js资源模块化。但是webpack可以做到将非js资源模块化,比如图片等。

总的来说,gulp是一个自动化任务的工具,所以在项目的开发中,你也可以采用 gulp + webpack 组合大招更好的提升项目效率。

Webpack的入门使用

说那么多概念还不如写个小demo来的实在,相比各位看官也是这么想得。

其实,我们记住webpack的核心功能是将静态资源模块化,js,css,图片啊等等,都能通过require的方式进行加载。当然你也可以利用ES6语法improt来引入,这个后面说。

下面我们开始进行咱们的项目吧。

1.首先创建一个空目录,执行命令进行初始化

 > npm init

这样,咱们就有package.json了,下面我们先把文件目录搭建一下哈。

目录结构如下:

图片描述

好。文件我们建完了,该干活写代码了。

第一个是 index.html 首页,这里我们的很简单外部只是引入了一个 bundle.js,相信大家现在也找不到这个bundle.js,因为这个文件是后面webpack编译打包生成的。他会将style.css,index.js打包成一个js,这样能加快浏览器的加载效率。

//index.html

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>demo1</title>
    </head>
    <body>
        <div>Hello,world</div>
        <img src="./demo.png" alt="">
        <script src="../dist/bundle.js"></script>
    </body>
    </html>

再看看 style.css,很简单,就一句话。

// style.css

body{
    background:red;
}

再下一下步,我们看看 index.js,它也很简单,而且它的目的是webpack的入口文件,webpack打包就是通过入口文件将里面require的资源一个个加载编译打包。你可以把index.js看成一个向导,指引着webpack去寻找那些需要被解救编译打包的文件。

//index.js

require('./style.css');

The Next,我们看看编写 webpack.config.js ,特别声明,这个文件是webpack的默认配置,一般你没啥需求也别改它的名字了,但是你要修改的话,自己百度去吧。

修改webpack配置文件命令如下:

> webpack --config XXX.js

具体webpack.config.js配置如下:

// webpack.config.js

var path = require('path')
var webpack = require('webpack');

module.exports = {
  entry: ['./src/index'],  // 指定编译打包入口文件
  output: {   // 编译完了,输出到这个目录,这个文件名
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  plugins: [  // 这个是插件配置噢
    new webpack.optimize.UglifyJsPlugin({
      compressor: {
        warnings: false,
      },
    })
  ],
  module: {  // 这个是引入的模块,可以用来做一些其他的事儿
    loaders: [{  //比如这个loaders模块,可以给每种类型文件指定加载器
      test: /\.css$/,
      loaders: ['style', 'css']
    },
    ]
  }
}

好了,到现在我们的业务代码都写完了,该安装所需的插件了。

这里一下安装了多个插件,可能会比较慢,可以先换成国内的淘宝npm镜像:

> npm --registry https://registry.npm.taobao.org info underscore 

安装插件命令如下:

> npm install style-loader css-loader webpack --save

--save 是将依赖写入到package.json里,后面代码给其他人用,直接npm install就能自动安装所有的依赖了。

安装完成后,咱们开始打包!!!

在项目目录执行以下命令:别傻乎乎的把 > 也拷贝进去啊,就是只有一个 webpack!!!

> webpack

执行完上面的webpack命令,会出现以下令人欣喜的画面,啥?没出现?自己上去找找看看哪里步骤漏了。
这里顺便推荐一个好用的windows下面的命令行工具: cmder

图片描述

然后你再打开你项目目录的 index.html ,直接双击用浏览器打开噢。

就能看的如下画面。相信你的require('./style.css')也就生效了。

clipboard.png

写在最后

一个入门级的使用就到这儿了,webpack还有很多黑魔法,本文也只是一个入门使用,后续的我用完再继续跟大家分享一下,对了,还请大神看到有误的地方多多指点哈,提点提点小弟。

如果对你有点点帮助,嘿嘿,回复一下点个赞就是我最大的动力,感激不尽。

参考文献

http://www.cnblogs.com/pqjwyn...
https://github.com/wangning0/...学习之路

阅读 10.1k

JS那些事儿
一个刚入行的前端的进击小专栏
5.5k 声望
875 粉丝
0 条评论
5.5k 声望
875 粉丝
文章目录
宣传栏