资讯专栏INFORMATION COLUMN

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

_ang / 2869人阅读

摘要:我们也可以不用在命令行里面输入,因为我们可能以后会查询更多东西,因此我们可以,在的里面加入这里的和只是为了输出进度条和,没有实际意义,然后在命令行输入就可以默认使用进行打包了。更具体的就请查看一下官方文档了,毕竟篇幅不能太长。

Webpack

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

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

概述

在我的文章里主要讲解:

webpack基本介绍及安装

webpack基本配置和配置文件

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

强大的loader加载器

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

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

1.webpack基本介绍及安装 1.1 webpac基本介绍

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

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

用一张图片简单表示一下

特点:

代码拆分方案: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世界

首先,新建一个webpack-test文件夹作为你的项目目录

然后,用npm初始化你的项目,进入cmd,切换到你的目录下,输入:

npm init

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

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

下一步,我们在我们的文件夹里面安装一下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文件

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

然后再在根目录下新建一个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,加入下面内容




    webpack


    

再把我们的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,安装完了之后,我们需要新建几个文件以及文件夹,如下面所示

然后在index.html输入





    webpack demo


    

在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文件了。

这就是我们的配置文件的最简单的用法,以后我们还可以在里面配置很多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文件了

但是如果你细心就可以发现这个时候的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,然后构建好下面的这些目录

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

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

修改我们的index.html成




    Document


    

layer.html

this is a layer

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官网进行查询,这里我就不进行多解释了

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/51051.html

相关文章

  • webpack走在前端技术前沿深入浅出

    摘要:我们也可以不用在命令行里面输入,因为我们可能以后会查询更多东西,因此我们可以,在的里面加入这里的和只是为了输出进度条和,没有实际意义,然后在命令行输入就可以默认使用进行打包了。更具体的就请查看一下官方文档了,毕竟篇幅不能太长。 Webpack 网上有很多webpack的介绍,也有不少的视频,但是不少人看到应该还是不是很了解webpack里面到底是讲什么,而且报错了之后也是不知所措 那么...

    jayce 评论0 收藏0
  • 双十二大前端工程师读书清单

    摘要:本文最早为双十一而作,原标题双大前端工程师读书清单,以付费的形式发布在上。发布完本次预告后,捕捉到了一个友善的吐槽读书清单也要收费。这本书便从的异步编程讲起,帮助我们设计快速响应的网络应用,而非简单的页面。 本文最早为双十一而作,原标题双 11 大前端工程师读书清单,以付费的形式发布在 GitChat 上。发布之后在读者圈群聊中和读者进行了深入的交流,现免费分享到这里,不足之处欢迎指教...

    happen 评论0 收藏0
  • 双十二大前端工程师读书清单

    摘要:本文最早为双十一而作,原标题双大前端工程师读书清单,以付费的形式发布在上。发布完本次预告后,捕捉到了一个友善的吐槽读书清单也要收费。这本书便从的异步编程讲起,帮助我们设计快速响应的网络应用,而非简单的页面。 本文最早为双十一而作,原标题双 11 大前端工程师读书清单,以付费的形式发布在 GitChat 上。发布之后在读者圈群聊中和读者进行了深入的交流,现免费分享到这里,不足之处欢迎指教...

    余学文 评论0 收藏0
  • 双十二大前端工程师读书清单

    摘要:本文最早为双十一而作,原标题双大前端工程师读书清单,以付费的形式发布在上。发布完本次预告后,捕捉到了一个友善的吐槽读书清单也要收费。这本书便从的异步编程讲起,帮助我们设计快速响应的网络应用,而非简单的页面。 本文最早为双十一而作,原标题双 11 大前端工程师读书清单,以付费的形式发布在 GitChat 上。发布之后在读者圈群聊中和读者进行了深入的交流,现免费分享到这里,不足之处欢迎指教...

    Anleb 评论0 收藏0
  • 双十二大前端工程师读书清单

    摘要:本文最早为双十一而作,原标题双大前端工程师读书清单,以付费的形式发布在上。发布完本次预告后,捕捉到了一个友善的吐槽读书清单也要收费。这本书便从的异步编程讲起,帮助我们设计快速响应的网络应用,而非简单的页面。 本文最早为双十一而作,原标题双 11 大前端工程师读书清单,以付费的形式发布在 GitChat 上。发布之后在读者圈群聊中和读者进行了深入的交流,现免费分享到这里,不足之处欢迎指教...

    Jochen 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<