webpack走在前端技术的前沿(深入浅出)

Webpack

网上有很多webpack的介绍,也有不少的视频,但是不少人看到应该还是不是很了解webpack里面到底是讲什么,而且报错了之后也是不知所措

那么这里我作为一个工具小白就阐述一下小白面前应该怎么学习webpack吧,当你看完之后,我相信对其他工具也会有更深的了解

概述

在我的文章里主要讲解:

  1. webpack基本介绍及安装
  2. webpack基本配置和配置文件
  3. webpack在项目中如何自动生成html文件
  4. 强大的loader加载器

还有更多的功能我也会在文中提及到

附:webpack官网地址[英文官网][中文官网]

1.webpack基本介绍及安装

1.1 webpac基本介绍

Webpack是时下最流行的模块打包器

它的主要任务就是将各种格式的JavaScript代码,甚至是静态文件进行分析、压缩、合并、打包,最后生成浏览器支持的代码

用一张图片简单表示一下

webpack走在前端技术的前沿(深入浅出)

特点:

  • 代码拆分方案:webpack可以将应用代码拆分成多个块,每个块包含一个或多个模块,块可以按需异步加载,极大提升大规模单页应用的初始加载速度
  • 智能的静态分析:webpack的智能解析器几乎可以处理任何第三方库
  • Loader加载器:webpack只能处理原生js模块,但是loader可以将各种资源转换为js模块
  • plugin插件:webpack有功能丰富的插件系统,满足各种开发需求
  • 快速运行:webpack 使用异步 I/O 和多级缓存提高运行效率,使得它能够快速增量编译

综合来说webpack综合了目前网络上的打包工具的优点,但是也要合理使用,不然也会适得其反

1.2 webpack的安装

  • 第一步,首先得安装好node.js和npm

npm是前端开发者必备的下载工具吧,如果你连这个也没有安装的话,那么你就得快点安装了,这里附一个gulp打包工具的教程,这里第一和第二步有node.js和npm的安装具体教程,如果你没有安装,那就得快点入门了。

  • 第二步,进入webpack世界
  1. 首先,新建一个webpack-test文件夹作为你的项目目录
  2. 然后,用npm初始化你的项目,进入cmd,切换到你的目录下,输入:
npm init

然后会出现一大堆输入的东西,这里我们全部选择默认输入enter就好了

webpack走在前端技术的前沿(深入浅出)

输入完了之后,它会提示你输入的信息给你核对,按下确认之后,就会在你的项目目录下生成了package.json

webpack走在前端技术的前沿(深入浅出)

下一步,我们在我们的文件夹里面安装一下webpack吧,在项目目录下的cmd输入

npm install webpack --save-dev

这就安装好了,这里就给大家来一个小Demo,让大家更加了解webpack的打包方式吧,如果已经有基础的同学可以跳过这里

1.3 webpack几个小Demo

在webpack-test下新建一个hello.js,输入下面的代码

//自定义一个函数
function hello (str) {
    alert(str);
}

然后在命令行输入

webpack hello.js hello.bundle.js

这里的意思是用webpack文件将hello.js打包成hello.bundle.js输出在根目录下,成功之后在根目录下就会出现hello.bundle.js文件

webpack走在前端技术的前沿(深入浅出)

然后介绍一下我们打包成功的各个东西的含义吧

webpack走在前端技术的前沿(深入浅出)

然后再在根目录下新建一个world.js,在文件里输入

//随便自定义一个函数
function world () {

}

再去修改hello.js成为

require('./world.js')   //连接到另外一个函数块

//自定义一个函数
function hello (str) {
    alert(str);
}

再输入一下

webpack hello.js hello.bundle.js

进行打包之后就会发现,打包成功里面hello.js的chunks序列号是0,world.js的chunks序列号是1,然后在hello.bundle.js看到他们的序列号也是这样。

那么如果我想也把css文件也打包进去应该怎么办呢?

我们再在根目录下新建一个style.css,在里面简单输入

html, body {
    padding: 0;
    margin: 0;
}

然后这里我们需要下载两个loaders加载器,为什么要下载loaders加载器呢,你也可以想一想,css文件和js文件毕竟不一样,如果在hello.js引入style.css那么肯定会报错,这个时候,我们需要一种东西帮忙加载我们的css成js

接下来我们下载两个loaders加载器,后面说一下这两个的作用,在命令行输入

npm install css-loader style-loader

然后把hello.js改成

require('./world.js')   //连接到另外一个函数块
require('css-loader!./style.css')   //利用css-loader加载器解析css文件使之可读

//自定义一个函数
function hello (str) {
    alert(str);
}

再在输入一下指令,打包好了后了可以观察hello.bundle.js里面就多了css文件里面的内容

这时候,你也许会觉得,我说了那么多,那么,怎么把这些东西用到我们的页面中吗?下面就会说到

在我们的跟目录下新建一个index.html,加入下面内容

<!DOCTYPE html>
<html lang="en">
<head>
    <title>webpack</title>
</head>
<body>
    <script src="./hello.bundle.js"></script>
</body>
</html>

再把我们的style.css改成

html, body {
    padding: 0;
    margin: 0;
}

body {
    color: red;
}

再把我们的hello.js改成

require('./world.js')   //连接到另外一个函数块
require('style-loader!css-loader!./style.css')   
//利用css-loader加载器解析再用style-loader解析css文件使之可读

//自定义一个函数
function hello (str) {
    alert(str);
}

hello('hello webpack');

然后我们再打包运行一下,就可以在页面看到我们的结果,这时候如果你细心,就会发现我们在css-loader前面加了个style-loader,如果你不加的话,你就会发现你的页面打开后不是红色的,因为还没经过style-loader的解析,当然这只是一种方法,还有其他方法可以自寻在官网看看文档。

如果你觉得每次修改之后打包也很麻烦,这时候我们的watch就有作用了,你可以在打包后面加入,例如输入

webpack hello.js hello.bundle.js --watch

然后下次修改就不用在进行输入打包代码了,这上面也就是简单的介绍了一下我们的webpack是怎么从一个文件链接到很多文件的。

2.webpack基本配置和配置文件

这里就是我们最重要的一个部分了,如果你看过很多webpack打包后的开源项目之后,你就会发现,有些时候你不知道从哪里看起,那就从配置文件开始看起来吧

相信你应该也在不少的文章中看到有关于配置文件的说法的吧,毕竟配置文件也算是最重要的一部分了,这里也可以推荐你看一篇我觉得还不错的webpack入门

不过我如果你没有基础的话,建议继续看下我的再去看那一篇,收获会更大

首先,我们新建一个项目webpack-demo,按照我上面教程文章里面下载安装好webpack,安装完了之后,我们需要新建几个文件以及文件夹,如下面所示

webpack走在前端技术的前沿(深入浅出)

然后在index.html输入

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <title>webpack demo</title>
</head>
<body>
    <script src="./dist/js/bundle.js"></script>
</body>
</html>

在webpack.config.js也就是webpack的配置文件里面输入

// webpack.config.js
module.exports = {
  entry:'./src/script/main.js', //我们的入口文件,相当于前面一节webpack-test中的hello.js
  output:{
    path: __dirname + "/dist/js", 
    /*打包完了之后,把内容输出到这个文件夹上,也可以写成"./dist/js",
    但是这样放在服务器上路径可能会出错,所以加上__dirname*/
    filename: 'bundle.js' //输入到上面path文件夹里面的bundle.js,没有则自动新建
  }
}

再在main.js里面输入

//main.js
function helloworld () {
    alert('hello world');
}

helloworld();

在命令行输入webpack,就将我们的入口文件及其链接文件(这里还没有)打包输出在dist/js目录下面的bundle.js文件了。

webpack走在前端技术的前沿(深入浅出)

这就是我们的配置文件的最简单的用法,以后我们还可以在里面配置很多loaders,甚至更复杂的打包,下面一步步说明吧。

我们也可以不用在命令行里面输入webpack,因为我们可能以后会查询更多东西,因此我们可以,在package.json的script里面加入:

"webpack":"webpack --config webpack.config.js --progress --color"

这里的--progress和--color只是为了输出进度条和color,没有实际意义,然后在命令行输入npm run webpack就可以默认使用webpack进行打包了。

还有更多关于我们入口文件和输出文件的介绍,我建议看一下慕课网的这个视频会更加了解webpack配置文件

3.webpack在项目中如何自动生成html文件

在说这个之前,我们为什么要自动生成html页面?我们直接用index.html不就可以了?但是实际项目往往是有多个页面的,不过这里我们就简单介绍一个页面怎么自动生成,多个也是同样的原理,我们先来安装一个插件html-webpack-plugin,我们在命令行输入:

npm install html-webpack-plugin --save-dev

然后把我们的webpack.config.js里面修改成

// webpack.config.js
var htmlWebpackPlugin  = require('html-webpack-plugin')//引入我们的插件

module.exports = {
  entry: {
      main: './src/script/main.js',
  }, //我们的入口文件,相当于前面一节webpack-test中的hello.js
  output:{
    path: __dirname + "/dist/js", 
    /*打包完了之后,把内容输出到这个文件夹上,也可以写成"./dist/js",
    但是这样放在服务器上路径可能会出错,所以加上__dirname*/
    filename: '[name]-[hash].js' //输入到上面path文件夹里面的bundle.js,没有则自动新建
  },
  plugins:[
      new htmlWebpackPlugin()  //对插件进行实例化
  ]
}

然后,在我们的dist下面就有了一个项目自动生成的inex.html文件了

webpack走在前端技术的前沿(深入浅出)

但是如果你细心就可以发现这个时候的index.html和我们原来的index.html没有任何的联系,这时候我们需要修改我们配置文件中的插件实例化那里修改成

plugins:[
      new htmlWebpackPlugin({
          template: 'index.html'
      })  //对插件进行实例化
  ]

再打包一次之后,就会发现生成的dist目录下面的index.html文件就会绑定了其他js文件。更具体的就请查看一下官方文档了,毕竟篇幅不能太长。

4.强大的loader加载器

前面我们也有所提到我们的loader加载器,但是实际中是怎么样的呢,这里我围绕我们项目经常利用babel-loader转换ES6

Loaders需要单独安装并且需要在webpack.config.js下的modules关键字下进行配置,Loaders的配置选项包括以下几方面:

  • test:一个匹配loaders所处理的文件的拓展名的正则表达式(必须)
  • loader:loader的名称(必须)
  • include/exclude:手动添加必须处理的文件(文件夹)或屏蔽不需要处理的文件(文件夹)(可选);
  • query:为loaders提供额外的设置选项(可选)

首先,新建一个工程webpack-loader吧,然后将项目用npm初始化后,再在项目下下载webpack,然后构建好下面的这些目录

webpack走在前端技术的前沿(深入浅出)

用npm下载一下html-webpack-plugin插件

npm install html-webpack-plugin --save-dev

修改我们的index.html成

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    
</body>
</html>

layer.html

<div class="layer">
    <div>this is a layer</div>
</div>

layer.js

// import tpl from './layer.html'

function layer () {
    return {
        name: 'layer',
        tpl: tpl
    }
}

export default layer;

app.js

//app.js
import layer from './component/layer/layer.js';
//导入layer

//使用ES6语法
const App = function () {
    console.log(layer);
}

new App()

利用babel-loader转换ES6

Babel其实是一个编译JavaScript的平台,它的强大之处表现在可以通过编译帮你达到以下目的:

  • 下一代的JavaScript标准(ES6,ES7),这些标准目前并未被当前的浏览器完全的支持;
  • 使用基于JavaScript进行了拓展的语言,比如React的JSX

首先,我们先安装Babel在命令行输入

npm install --save-dev babel-loader babel-core

再安装一下babel中的latest这里我们需要用到

npm install --save-dev babel-preset-latest

修改我们的配置文件webpack.config.js

var htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
      main: './src/app.js',
  }, //我们的入口文件,相当于前面一节webpack-test中的hello.js
  output:{
    path: __dirname + "/dist/js", 
    /*打包完了之后,把内容输出到这个文件夹上,也可以写成"./dist/js",
    但是这样放在服务器上路径可能会出错,所以加上__dirname*/
    filename: 'bundle.js' //输入到上面path文件夹里面的bundle.js,没有则自动新建
  },
  module: {
    loaders: [
        {
            test: /\.js$/, //匹配所有的js文件
            loader: 'babel-loader', //引用lbabel插件           
        }

    ]
  },
  plugins: [
      new htmlWebpackPlugin({
          filename:'index.html',
          template:'index.html',
          inject:'body' //将script标签加载进body
      })
  ]
}

再在我们的package.json下加入

{
    //...
    "babel": {
        "presets": ["latest"]
    },
    //...
}

在命令行输入webpack,就可以在我们的dist目录下面的js里面看到我们的配置文件已经有了这些文件

其他加载器css,less,sass等的原理也是一样,这里就不一一介绍了

有兴趣的话,可以继续看看慕课网的视频,在下也是受人启发。

还有更多的加载器可以在我们的webpack官网进行查询,这里我就不进行多解释了

相关推荐