webpack走在前端技术的前沿（深入浅出）_ES2015(es6)

上一篇: 针对还没搞懂javascript中this关... 下一篇:深入探析koa之异步回调处理篇

webpack走在前端技术的前沿（深入浅出）

发布时间：2019-08-12 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了webpack走在前端技术的前沿（深入浅出），脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

Webpack
网上有很多webpack的介绍，也有不少的视频，但是不少人看到应该还是不是很了解webpack里面到底是讲什么，而且报错了之后也是不知所措
那么这里我作为一个工具小白就阐述一下小白面前应该怎么学习webpack吧，当你看完之后，我相信对其他工具也会有更深的了解
概述
在我的文章里主要讲解：

webpack基本@H_777_15@介绍及安装

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输入

      
      
      @H_195_126@
      
      
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，加入下面内容

      
      
      PE="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="


    webpack


    

" title="" data-original-title="复制">
      
      
@H_367_406@<!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，安装完了之后，我们需要新建几个文件以及文件夹，如下面所示

然后在index.html输入

      
      
      button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="



    webpack demo


    

" title="" data-original-title="复制">
      
      
<!-- 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文件了。

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

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

      
      
      this is a layer
" title="" data-original-title="复制">

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

脚本宝典总结

以上是脚本宝典为你收集整理的webpack走在前端技术的前沿（深入浅出）全部内容，希望文章能够帮你解决webpack走在前端技术的前沿（深入浅出）所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：alert alert all all babel break break button button Class const const const default default div do es6 export export export function function function image image Import in in int java JSX layer name name new new node package package plugin plugin post-format-gallery React reset reset return return return select static static static text text this top top try undefined undefined var