第十章使用webpack（进阶篇）

webpack已经更新到了版本4，关于版本的问题，相信很多小伙伴们在学习的时候碰到好多坑，本篇文章是基于webpack2的教程进行学习的，但是尽可能的使用webpack4的语法学习，于是不免出现纰漏，或者出现混杂，如有问题，请及时解决。

10.1前端工程化与webpack

通常，前端自动化（半自动化）工程主要解决以下问题：

javaScript CSS代码的合并与压缩
CSS预处理：Less、Sass、Stylus的编译
生成雪碧图（CSS Sprite）
ES6转ES5
模块化
……
如果熟悉Gulp，我们知道经过Gulp合并压缩后的代码仍然是你写的代码，只是局部变量名被替换，一些语法做了转换而已，整体内容并没有发生变化。而我们要学习的webpack，打包后的代码已经不只是你写的代码了，其中夹杂了很多webpack自身的模块处理代码。因此，webpack最难的是理解“编译”这个概念。
在webpack的世界里，一张图片、一个css甚至一个字体，都成为模块（Module），彼此存在依赖关系，webpack就是来处理模块间的依赖关系的，并把它们进行打包。
webpack的主要适用场景是单页面富应用（SPA)。SPA通常是由一个html文件和一堆按需加载的.js组成，它的html结构可能会非常简单。
在进行webpack的学习之前，我们先来学习两个ES6中的语法：export和import。
export和import是用来导入和导出模块的，一个模块就是一个js文件，他拥有独立的作用域，里面定义的变量外部是无法访问的，因此需要使用export导出。
模板导出后，在需要使用模块的文件使用import导入。
export与import海洋其他的用法，这里不做详细介绍。

10.2 webpack基础配置

10.2.1 安装webpack、webpack-cli与webpack-dev-server

在安装webpack前，先确保已经安装了最新版的Node.js和NPM，并且了解NPM的一些基本用法。

首先，创建一个目录，比如demo，使用NPM初始化配置。

  npm init

执行后，会有一系列选项，可按回车键快速确认，完成后会在demo目录生成一个package.json的文件。之后在本地局部安装webpack：

npm install webpack --save-dev

--save-dev会作为开发依赖来安装webpack。安装成功后，在package.json中会多一项配置：

"dependencies": {
"webpack": "^4.17.2"

}

4.接着需要安装webpack-dev-server，它可以在开发环境中提供很多服务，比如启动一个服务器、热更新、接口代理等，配置起来也很简单。同样，在本地局部安装：

npm install webpack webpack-dev-server --save-dev

安装完成后，最终的package.json文件内容为：

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
  "webpack": "^4.17.2",
  "webpack-dev-server": "^3.1.7"
  }
}

10.2.2就是一个js文件而已

接下来需要了解webpack的一些核心概念。
归根到底，webpack就是一个.js文件，你的架构好或差都体现在这个配置上，随着需求的不断出现，工程配置也是逐渐完善。
1.首先，我们在目录DEMO下创建一个js文件：webpack.config.js，并初始化它的内容：

var config= {
  //这里的module.exports相当于export default config.由于目前还没安装支持ES6的编译插件，因此不能直接使用ES6的语法。
};
module.exports=config;

2.然后在package.json的scripts里增加一个快速启动webpack-dev-server服务的脚本：

{
 //……
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev":"webpack-dev-server --open --config webpack.config.js"
},
 //……

TIPS:由于我们这里安装的是webpack4，所有这里需要安装webpack-cli，才可以继续下一步，但是这里学习的是webpack2，所以我们不作为一个步骤，安装webpack4的小伙伴，继续在命令行中执行：npm install webpack-cli
3.当运行npm run dev命令时，就会执行webpack-dev-server --open --config webpack.config.js命令。其中，--config是指向webpack-dev-server读取的配置文件路径.
--open会在执行命令时自动在浏览器打开页面，默认地址是127.0.0.1：8080,不过IP和端口都是可以配置的，比如：

{
 //……
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --host 192.168.199.102 --port 8888
             --open --config webpack.config.js"
},
 //……

webpack配置中组主要的也是必选的两项是入口（Entry）和出口（Output）。入口的作用是告诉webpack从哪里开始寻找依赖，并且编译，出口则是用来配置编译后的文件存储位置和文件名。
在demo目录下新建一个空的main.js作为入口的文件，然后再webpack.config.js中进行入口和输出的配置(webpack4的配置)：

const path=require('path'); //nodejs的语法，引入路径模块，为了输出的时候找绝对路径

module.exports={
entry:'./src/main.js',  //入口文件为main.js  
output:{    //输出
    path:path.resolve(__dirname,'dist'),    //path.resolve为nodejs的固定语法，用于找到当前文件的绝对路径
    filename:'bundle.js'    //输出的文件名
},
};

在终端里执行命令webpack后，不出意外的话终端里显示如下就表示成功了

success.jpg

同时看一下文件结构目录，多了一个dist文件夹，以及bundle.js文件。这两个就是webpack打包生成的文件，如下：

bundle.jpg

在index.html文件里引入bundle.js文件后，用浏览器打开index.html（或者执行完webpack后，执行npm run dev，然后打开IP地址），可以看到页面里有内容了。这就代表我们已经使用webpack打包了一个文件，它的基本用法已经跑了。

这里一定要注意引用的bundle.js一定要在div下面引用，如果在中引用，会报错！

10.2.3语法及步骤

语法

一.entry入口文件
只打包一个文件（单入口），写个字符串
把多个文件打包成一个文件，写个数组
把多个文件分别打包成多个文件，写成对象
webpack把打包后的文件叫Chunck
二.output出口文件
1.filename 输出文件的名称
①、输出一个文件，写个字符串
②、输出多个文件，文件名前面加个标识符（id/name/hash）
2.path输出文件的路径
①、路径必需为绝对路径
②、__dirname是nodejs里的一个模块，表示当前文件的绝对路径
③、path为nodejs的系统模块，直接引入后调用path.resolve(__dirname,'输出文件的路径');

步骤

当我们在终端里输入webpack命令的时候webpack会按以下的步骤开始工作

1.先打开根目录下的webpack.config.js
2.找entry（入口）属性的值
3.进入到main.js里，看到它又依赖show.js，再找到show.js
4.把main.js与show.js合并成一个js文件
5.在webpack.config.js里找到output（出口）属性
6.解析output里的path与filename属性的值
7.把第4步合并成的js文件放到dist文件夹里，并起个名字叫bundle.js

10.2.4 Plugin

下面就以这个html-webpack-plugin插件为例，给大家演示插件的用法。这个插件的作用是用来自动生成html页面，既可以生成单个页面又可以生成多个页面，并且在生成前你可以给它一堆的配置，它会按照你想要的生成方式去生成页面。
第一步：安装

 npm i html-webpack-plugin -D

第二步：在webpack.config.js里引入模块

const HtmlWebpackPlugin=require('html-webpack-plugin');

第三步：在plugins里new一个

plugins:[
new HtmlWebpackPlugin()

]
此时webpack.config.js的内容如下：

const path=require('path'); //nodejs的语法，引入路径模块，为了输出的时候找绝对路径
const HtmlWebpackPlugin=require('html-webpack-plugin');

module.exports={
    entry:'./src/main.js',  //入口文件为main.js  
    output:{    //输出
        path:path.resolve(__dirname,'dist'),    //path.resolve为nodejs的固定语法，用于找到当前文件的绝对路径
        filename:'bundle.js'    //输出的文件名
    },
    plugins:[
        new HtmlWebpackPlugin()
    ]
};

第四步：在终端里执行命令webpack，如果不出意外的话是下面这样：

index.jpg

未完待续，明天我们接着来webpack！

第十章 使用webpack（进阶篇）