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

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

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

<!-- 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

<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

概述

1.webpack基本介绍及安装

1.1 webpac基本介绍

1.2 webpack的安装

1.3 webpack几个小Demo

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

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

4.强大的loader加载器

利用babel-loader转换ES6

广工小成

引用和评论

useEffect引起的React Hooks深入了解

网页设计的垂直居中

CSS团队协作规范

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合