Webpack安装及其使用方式

一、什么是Webpack

​ webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler) ， 当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

​ 这样做的好处是，在浏览器加载页面时，不用频繁多次的向服务器请求资源，只需要请求已经打包好的bundle即可，减少了浏览器和服务器的交互次数，节省了资源并且提高了性能。

二、Webpack安装

​ 使用npm进行全局安装：

npm install -g webpack webpack-cli

​ 检查是否安装成功：

webpack -v

三、Webpack使用

1、项目准备

1.1、初始化项目

​ 创建webpackdemo文件夹，并使用npm初始化项目

	npm init -y

1.2、创建src文件夹

​ 创建三个js文件：

​ commin.js：

exports.info = function (str) {
    document.write(str);
}

​ utils.js：

exports.add = function (a, b) {
    return a + b;
}

​ main.js：

const common = require('./common');
const utils = require('./utils');

common.info('Hello world!' + utils.add(100, 200));

​ main.js依赖了commin.js和utils.js，后面测试时使用它作为webpack打包的入口。

2、打包

2.1 创建配置文件webpack.config.js

​ 从 webpack v4.0.0 开始，可以不用引入一个配置文件。然而，webpack 仍然还是高度可配置的，可以在项目根路径下创建名为webpack.config.js的配置文件，内容模板如下：

const path = require("path"); //path为Node.js内置模块,用来操作路径

// 此文件本质上是一个js文件，使用exports来暴露成员供外界调用
module.exports = {
    //配置入口文件，本项目中使用src下的main.js
    entry: './src/main.js', 
    // 配置bundle文件的输出路径和文件名
    output: {
        //输出路径，__dirname：当前配置文件所在路径
        // ./dist表示__dirname下的dist文件夹(会自动创建)
        path: path.resolve(__dirname, './dist'), 
        // 输出文件的文件名
        filename: 'bundle.js' //输出文件
    }
}

​ 在webpack的配置文件中有四个核心概念：

​ 入口：

​ entry指示 webpack 应该使用哪个模块来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。每个依赖项随即被处理，最后输出到称之为 bundles 的文件中，

​ 出口：

​ output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。你可以通过在配置中指定一个 output 字段，来配置这些处理过程。

​ 加载器：

​ loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。使用对应的loader， webpack就可以将所有类型的文件，转换为应用程序的依赖图（和最终的 bundle）可以直接引用的模块。

​ 例如：

const path = require("path");

module.exports = {
    entry: './src/main.js', 
    output: {
        path: path.resolve(__dirname, './dist'), 
        filename: 'bundle.js'
    }
    module: {
        rules: [  
            {  
            	// 正则表达式，用于匹配出应该被对应的loader进行转换的某个或某些文件。
                test: /\.css$/, //打包规则应用到以css结尾的文件上
                // 匹配之后，使用下面的loader进行加载
                use: ['style-loader', 'css-loader']
            }  
        ]  
    }
}

​ 插件：

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

​ 想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建它的一个实例。

​ 例如：

const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装

module.exports = {
    entry: './src/main.js', 
    output: {
        path: path.resolve(__dirname, './dist'), 
        filename: 'bundle.js'
    }，
    module: {
        rules: [  
            {  
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }  
        ]  
    }，
    plugins: [
   		new HtmlWebpackPlugin({template: './src/index.html'})
  	]
}

2.2 执行打包操作

​ webpack的打包操作有两种：

webpack #有黄色警告
webpack --mode=development #没有警告

​ 原则上来讲，应该使用第二种方式进行打包，mode的取值有两种：development和production，前者打包好的bundle文件为多行显示，未压缩，可读性好，适合开发人员查看，后者打包好的bundle文件为单行显示，压缩，可读性差，但是适合计算机解析。

​ 当使用第一种方式进行打包时，webpack会默认采用production模式进行打包。并且会在控制台给出警告：

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

​ 警告我们在打包时应该指明打包方式。

​ 打包完成后，会在output文件夹下生成bundle.js文件，使用bundle.js等同于同时使用main.js+commin.js+utils.js。

3、测试

​ 在项目根目录下创建一个index.html文件，并引入bundle.js文件。

<script src="./dist/bundle.js"></script>

​ 页面访问得到下面的效果：

Hello world!300

​ 测试成功！！！

4、其他类型静态资源打包

​ 上面的例子说明的是多个js文件进行打包的方式，如果我们需要打包除js文件以外的静态资源该怎么做呢？答案是安装一定的loader，将其他类型的文件装换成js类型的文件，再进行打包操作，谁让webpack只认识js文件呢！

​ 以css文件为例介绍其他类型文件的打包方式：

​ 第一步：

​ 还是上面的项目，这次在src文件夹下新建一个style.css文件，如下：

body{
    background-color: pink;
}

​ 第二步：

​ 安装 Loader插件，css文件对应 css-loader 和 style-loader，其他类型的资源有其他的loader。 css-loader用来加载css文件；style-loader用来将css文件转化成js文件，让webpack认识它。

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

​ 第三步：修改webpack.config.js

const path = require("path");

module.exports = {
    entry: './src/main.js', 
    output: {
        path: path.resolve(__dirname, './dist'), 
        filename: 'bundle.js'
    }
    module: {
        rules: [  
            {  
            	// 正则表达式，用于匹配出应该被对应的loader进行转换的某个或某些文件。
                test: /\.css$/, //打包规则应用到以css结尾的文件上
                // 匹配之后，使用下面的loader进行加载
                use: ['style-loader', 'css-loader']
            }  
        ]  
    }
}

​ 第四步：修改main.js

​ 将style.css引入到main.js中，即将css文件引入的入口文件中。当然也可以引入到其他的js文件中，最终的目的是能够被webpack递归找到。

require('./style.css');

​ 第五步：重新打包

​ 第六步：测试

​ 页面重新访问index.html，背景变为粉色。