webpack使用

一、为什么使用webpack

1.JavaScript和CSS的依赖问题：

在开发中，经常出现的另一个问题，就是JavaScript和CSS的依赖问题；简单的说就是JavaScript和CSS的在页面中的顺序问题。经常会造成CSS没起作用，JavaScript的某个变量和方法找不到。

有很多情况都是因为引入JavaScript或者CSS的顺序不对，虽然我们可以使用一些RequireJS之类的模块管理，但是依然在很多情况下需要引入不同的文件，尤其是CSS没有一个好的模块化管理的组件。

那么我们就需要有一个统一的地方来管理JavaScript和CSS的顺序问题，而构建工具可以大大减少此类问题。

2.性能优化

文件合并：浏览器需要下载多个JS文件，而浏览器是有并发限制，也就是同时并发只能下载几个文件,假如浏览器并发数是5，你有30个JS文件，而每5个需要2S, 那么你光下载JS文件都需要12S，那么网页的性能可想而知，所以我们需要合并多个文件以减少文件的数量

文件压缩：我们知道文件越大，下载越慢，而针对JavaScript和CSS，里面的空格，换行这些都是为了让我们读代码时更容易阅读，但是对机器来说，这些对它没有影响。所以为了减少文件大小，一般的情况我们都会用工具去掉空格和换行，有时候我们还会用比较短的变量名(记住这个要让工具最后压缩时做，而源代码一定要保证命名可读性) 来减少文件大小。而所有的前端构建工具都具有文件合并和压缩的功能

3.提高开发效率

Vendor前缀:在CSS3使用越来越多的时候，我们都知道一些CSS3的新特性，在不同的浏览器中，CSS有不同的前缀，如果我们手工添加将会很繁琐，而如果使用构建工具，很多构建工具可以自动给我添加CSS的Vendor前缀。.

单元测试：JavaScript的单元测试在使用MVC或者MVVM的框架后，变得越来越容易，而单元测试是质量保证的一个很重要的手段，所以在提交之前，使用构建工具自动跑一遍我们的单元测试是非常有必要的，能进一步检测你的项目的健壮性和容错能力。

代码分析：我们写的JavaScript很多时候会有一些潜在的bug, 比如忘了添加分号，某个变量没有等等，使用一些JavaScript的代码分析工具，可以很好的帮我们检查一些常见的问题。

版本升级：比如第一版本使用npm之类来引用前端JavaScript和CSS的第三方库，那么如果版本升级，添加移除等都用手工来修改HTML的话，一来耗时二来容易出错，尤其是开发版本和生产版本之间切换会有很多问题，那么使用前端构建工具可以很好的解决这些问题。

二、关于webpack

webpack, 基于Node.js 开发的前端项目构建工具。关于node.js，现在都能写区块链了，还能写物联网相关的东西，好牛啊。随着5G 的到来，前端相关的技术一定是大有可为。大有可为。

webpack中文：https://www.webpackjs.com/

它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。前端的所有资源文件（js/css/json/img/sass/less/...）都会作为模块来被处理，webpack会根据模块的依赖关系进行静态分析，生成对应的静态资源，最终打包部署上线。

WebPack、Grunt、Gulp：

Gulp/Grunt是一种能够优化前端的开发流程的工具，是基于 task 任务的。而WebPack是一种模块化的解决方案，是基于整个项目进行构建的。不过Webpack的优点使得Webpack在很多场景下可以替代Gulp/Grunt类的工具

Grunt和Gulp的工作方式：在一个配置文件中，指明对某些文件进行类似编译，组合，压缩等任务的具体步骤，工具之后可以自动替你完成这些任务。

Webpack的工作方式：

把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。

loader:

webpack本身只能加载js/json模块，如果要加载其它类型的文件/模块, 就需要使用对应的loader进行转化和加载。
loader 可以将所有类型的文件转换为webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。
loader自身也是运行在node.js环境中的JavaScript模块，其本身是一个函数，接收源文件作为参数，返回转化的结果。
loader一般以 xxx-loader 的方式命名，xxx代表了这个loader要做的转化功能，比如：css-loader，json-loader等。

插件：loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。

插件和loader的区别：可以完成一些loader不能实现的功能；使用插件一般在webpack的配置信息plugins选项中指定。举例：UglifyJSPlugin: 压缩js文件、HtmlWebpackPlugin: 自动生成HTML文件、CleanWebpackPlugin: 自动清除指定文件夹资源

三、use

1.install and quick start

安装：

运行npm i webpack -g全局安装webpack，这样就能在全局使用webpack的命令
在项目根目录中运行npm i webpack --save-dev安装到项目依赖中

官方文档建议使用局部安装，这样可以避免不同项目因为webpack版本导致的问题。

cd webpack-demo
npm init -y
npm i webpack --save-dev
npm i webpack-cli  --save-dev

创建目录结构，src/ ........

安装jquery：npm i jquery --save

main.js:

// 1. 引入jQuery
import $ from 'jquery'  // 这句ES6不会识别的

$(function () {
    $('li:odd').css('backgroundColor','yellow');
    $('li:even').css('backgroundColor','green');
})

访问页面看一下：

报错了，用webpac打包看一下。一开始安装局部依赖的时候，直接执行命令不识别，后来全局安装了 webpack后才好的。

webpack src/js/main.js --output dist/js/bundle.js --mode development

然后把 index.html 复制到dist 下，直接引入 bundle.js ，页面运行正常

2. 打包多个内容

新建 util.js , source/data.json 两个文件

util.js

exports.showData = ()=>{
    let dateTag = document.createElement('input');
    dateTag.type= 'date';
    document.body.appendChild(dateTag);
};

exports.showColor=()=>{
    let colorTag = document.createElement('input');
    colorTag.type = 'color';
    document.body.appendChild(colorTag);
};

source/data.json

{
  "name": "网易一千零一夜",
  "intro": "疲惫生活的英雄梦想"
}

在main.js 中引入 util

这里用的都是ES6的语法

// 1. 引入jQuery
import $ from 'jquery';
import {showData,showColor} from './util';
import str from './../source/data'
$(function () {
    $('li:odd').css('backgroundColor','yellow');
    $('li:even').css('backgroundColor','green');

    showData();
    showColor();

    document.body.append(JSON.stringify(str))
})

然后webpack一下，

webpack src/js/main.js --output dist/js/bundle.js --mode development

因为在main.js 中，把需要打包的文件都引入了，所以在打包的时候，会把main.js 里引入的文件都找到然后一起打包进去。

把刚刚那个index.html 的文件复制到 dist下，把引入的js文件改为 bundle.js ，在访问index.html 就可以了。

3.设置 webpack.config.js ，简化打包命令

在 webpack-demo 下创建webpack.config.js 文件,这个文件有固定模式，下面这个是手写的

const path = require('path');

module.exports = {
    mode:'production',
    // 入口文件配置
    entry:'./src/js/main.js',
    // 输出配置
    output:{
        // 出口文件
        filename:'bundel.js',
        // 设置全路径（）
        path: path.resolve(__dirname,'dist')
    }
};

设置完毕后，再打包的时候直接输入 webpack 即可。

4.打包 css 和图片文件

webpack 4的版本，对于打包css等文件需要用loader, webpack 5的版本可能直接打包的类型更多。

安装并添加 style-loader 和 css-loader 模块

npm install css-loader style-loader --save-dev

因为只在开发环境中使用，所以安装为开发依赖即可。

图片也可以打包，这里把打包图片的loader也加载一下

npm install file-loader --save-dev

把上面这些安装完后，以下是相关文件内容：

文件结构：

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/main.css">
    <script src="js/main.js"></script>
</head>
<body>
<ul>
    <li>where there is will,there is a way.</li>
    <li>where there is will,there is a way.</li>
    <li>where there is will,there is a way.</li>
    <li>where there is will,there is a way.</li>
    <li>where there is will,there is a way.</li>
</ul>
<div class="box1">box1</div>
<div class="box2">box2</div>
</body>
</html>

main.css

body{
    background-color: darkcyan;
}
div{
     300px;
    height: 200px;
}

.box1{
    background: url("../img/Koala.jpg");
}
.box2{
    background: url("../img/Penguins.jpg");
}

webpack.config.js

const path = require('path');

module.exports = {
    mode:'production',
    // 入口文件配置
    entry:'./src/js/main.js',
    // 输出配置
    output:{
        // 出口文件
        filename:'bundle.js',
        // 设置全路径（）
        path: path.resolve(__dirname,'dist')
    },
    module:{
        // 规则数组，里面的每个对象都是在描述一个loader
        rules:[
            {
                test:/.css$/, //正则表达式,匹配css文件
                use:[
                    'style-loader','css-loader'
                ]
            },
            {
                test: /.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'file-loader',
                        query: {
                            name: 'img/[name]-[hash:5].[ext]'
                        }
                    },
                ],
            }
        ]
    }
};

main.js

// 1. 引入jQuery
import $ from 'jquery';
import {showData,showColor} from './util';
import str from './../source/data';
import '../css/main.css'

$(function () {
    $('li:odd').css('backgroundColor','yellow');
    $('li:even').css('backgroundColor','green');

    showData();
    showColor();

    document.body.append(JSON.stringify(str))
})

执行webpack 后：

四、自动编译打包

webpack-dev-server 提供了一个简单的 web 服务器，并且能够实时重新加载(live reloading)。

安装：npm install --save-dev webpack-dev-server

配置webpack.config.js ：

package.json 中配置命令：

编译打包、运行： npm start

访问 http://localhost:8080/index.html 即可。

当功能开发完毕后，关掉服务器，执行webpack打包成本地文件即可。

五、webpack 插件使用

HtmlWebpackPlugin

地址：https://github.com/jantimon/html-webpack-plugin

该插件将为你生成一个 HTML5 文件，其中包括使用 script 标签的 body 中的所有 webpack 包。

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

The plugin will generate an HTML5 file for you that includes all your webpack bundles in the body using script tags. Just add the plugin to your webpack config as follows:

配置webpack.config.js：

然后执行 webpack, 会自动打包生产dist文件，然后会自动生成 index.html 文件，index.html 里会自动把 bundle.js 引入。