剑客
关注科技互联网

JS那些事儿——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 了,下面我们先把文件目录搭建一下哈。

目录结构如下:

JS那些事儿——Webpack入门使用

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

第一个是 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

JS那些事儿——Webpack入门使用

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

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

JS那些事儿——Webpack入门使用

写在最后

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

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

参考文献

http://www.cnblogs.com/pqjwyn…

https://github.com/wangning0/… 学习之路

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址