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

时间 2019-11-06

标签前端工程 webpack 入门使用繁體版

原文原文链接

前言

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

是构建工具，仍是打包工具？html

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

下面咱们简单说下webpack和gulp的区别，好加深下webpack的理解。git

本质上来讲，gulp是经过一系列的插件实现了本来复杂繁琐的任务自动化，好比拷贝啊，替换文件啥的，是一个纯粹的工具。它并不能将你的css，图片等非js资源模块化。可是webpack能够作到将非js资源模块化，好比图片等。github

总的来讲，gulp是一个自动化任务的工具，因此在项目的开发中，你也能够采用 gulp + webpack 组合大招更好的提高项目效率。web

Webpack的入门使用

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

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

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

1.首先建立一个空目录，执行命令进行初始化windows

> 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/...学习之路