专栏首页前端博客:https://alili.tech前端工程化——Webpack入门使用

抱歉,你查看的文章已删除

前端工程化——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')也就生效了。

写在最后

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

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

参考文献

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

版权声明

本文资源来源互联网,仅供学习研究使用,版权归该资源的合法拥有者所有,

本文仅用于学习、研究和交流目的。转载请注明出处、完整链接以及原作者。

原作者若认为本站侵犯了您的版权,请联系我们,我们会立即删除!

原文标题

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

原文链接

https://segmentfault.com/a/1190000007238519

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Webpack(一):安装和基础配置

    之前急着搭建博客,所以 Nodejs 安装好后就没管了,今天 webpack -v 命令死活用不了(提示“webpack 不是内部命令”),才发现是因为当时忘记...

    Chor
  • npm 及vue,router,webpack安装 快速起步

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    多凡
  • webpack实战——打包第一个应用

    作为前端开发者,我们以前在浏览器中运行 JavaScript ,会引用一些脚本来存放每个功能;此解决方案很难扩展,因为加载太多脚本会导致网络瓶颈;亦或使用一个包...

    流眸
  • 构建打包工具Rollup.js入门指南

    最近在看Vue源码的时候发现一个新的打包工具Rollup.js,之前没有听说过这个工具,也不了解Rollup.js相比于常用的打包工具webpack有什么异同和...

    用户1462769
  • 走近webpack(0)--正文之前的故事

      在前端工作的过程中,只要你接触过vue,angular,react,gulp就一定知道webpack或者听说过或者使用过webpack,但是或许你对webp...

    zaking

扫码关注云+社区

领取腾讯云代金券