webpack打包工具使用手册

---

示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。

1 webpack概述

    webpack网站 ：https://webpack.docschina.org
    webpack文档 ：https://webpack.docschina.org/concepts/
    webpack 是一个前端资源构建工具，用于现代 JavaScript 应用程序的静态模块打包工具。当webpack 处理应用程序时，它会在内部构建一个 依赖图(dependency graph)，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle。
    webpack步骤：
      (1)全局下载包   cnpm install -g webpack webpack-cli
      (2)初始化项目 npm init -y
      (3)下载webpack包
            cnpm i --save-dev webpack webpack-cli
            或者cnpm i -D webpack webpack-cli
   对于webpack可以分为五大模块来学习。
      入口(entry)、输出(output)、loader加载器 (module)、插件(plugin)、模式(mode)

1.1 入口

    入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图(dependency graph) 的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。入口的默认值是 ‘./src/index.js’，但你可以通过在 webpack configuration中配置 entry 属性，来指定一个（或多个）不同的入口起点。例如：

   在webpack.config.js文件中配置：
    module.exports = {
        //单入口 （项目的入口文件）
        entry: './path/to/my/entry/file.js',
        //多入口
        entry: {
            app: './src/app.js',
            adminApp: './src/adminApp.js'
        }
    };

1.2 输出(output)

       output 属性告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。主要输出文件的默认值是 ./dist/main.js，其他生成文件默认放置在 ./dist 文件夹中。你可以通过在配置中指定一个 output 字段，来配置这些处理过程：

	在webpack.config.js文件中配置：
	 const path = require('path');
	 module.exports = {
	     entry: './path/to/my/entry/file.js',
	     output: {
	      	 //path是一个Node.js核心模块，用于操作文件路径。resolve()用来拼接路径
	       	 //第一个参数是当前项目所在的绝对路径 用__dirname来表示，
	         //第二个参数是新创建一个文件夹，用来存放打包后的东西.
	         filename: './js/my-first-webpack.bundle.js',
	         path: path.resolve(__dirname, 'dist'),
	     }
	 };

1.3 loader(加载)

   在 webpack 的配置中，loader 有两个属性：
        test: 识别出哪些文件会被转换。
        use: 定义出在进行转换时，应该使用哪个 loader。

	在webpack.config.js文件中配置：
	const path = require('path');
	module.exports = {
	    output: {
	        filename: 'my-first-webpack.bundle.js'
	    },
	    module: {
	        rules: [
	            { 
	          		test: /\.html$/, 
	          		use: 'html-loader' 
	        	}
	        ]
	    }
	};

对于CSS和JS的加载，推荐使用style-loader和css-loader加载器
安装命令： cnpm i -D style-loader css-loader
对于html的加载，推荐使用html加载器
安装命令： cnpm i -D style-loader css-loader
对于文件的加载，推荐使用fileloader文件加载器
安装命令： cnpm i -D fileloader

1.3.1 css文件加载

	安装style-loader和css-loader
    安装命令：cnpm i -D style-loader css-loader
    配置项
      {
        // 检测  匹配哪些文件 值为正则表达式
        test: /\.css$/,
        // 使用哪些loader对文件进行处理
        use: [
          // use数组中的执行顺序：从右到左，从下到上
          // 创建一个style标签，将js中的css样式资源插入进去，添加到页面head中生效
          "style-loader",
          // 将css文件变成commonJS的模块，加载到js中，里面内容是样式字符串
          "css-loader",
        ]
      }

1.3.2 less和css中的图片使用，不处理html中的img

  1.url-loader(url-loader依赖file-loader)
     安装: cnpm i -D url-loader file-loader
     配置
       {
           test: /\.(JPG|jpg|png|gif)$/,
           // 下载url-loader和file-loader   url-loader依赖file-loader
           use: 'url-loader',
           options: {
               //设置输出文件目录路路径
               outputPath: 'images',
           	   // 图片大小小于8kb,就会被base64处理， 8-12kb以下图片base64处理
               // base64优点：减少请求数量（减轻服务器压力）
               // base64缺点：图片体积会更大（文件请求速度会更慢）
               limit: 8 * 1024,
               // 给图片进行重命名  
               // [hash:10]  取图片的hash的前10位
               // [ext]取图片原来扩展名
               name: '[hash:10].[ext]',
           }
      }
   2.或者file-loader（file-loader不会使用base64处理小文件，原文件会保留）
      安装： cnpm i -D url-loader file-loader
      配置
        {
            test: /\.(JPG|jpg|png|gif)$/,
            use: [
               {
                  loader: 'file-loader',
                  options: {
                      // 设置图片输出文件路径
                      outputPath: 'images'
                   }
                }
            ],
        }

1.4 插件(plugin)

       打包优化，资源管理，注入环境变量。想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建一个插件实例。
       在下面的示例中，html-webpack-plugin为应用程序生成HTML一个文件，并自动注入所有生成的 bundle。

	在webpack.config.js文件中配置：
	const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
	const webpack = require('webpack'); // 用于访问内置插件
	module.exports = {
	    module: {
	        rules: [
	            { test: /\.txt$/, use: 'raw-loader' }
	        ]
	    },
	    plugins: [
	         new HtmlWebpackPlugin({template: './src/index.html'})
	    ]
	  };

1.5 模式(mode)

       通过选择 development、production 或 none 之中的一个，来设置 mode 参数，你可以启用 webpack 内置在相应环境下的优化。其默认值为 production。

	在webpack.config.js文件中配置：
	module.exports = {
	    // 模式配置  开发模式
	    mode: 'development',
	    // 模式配置  生产模式  压缩代码
	    // mode: 'production',
	}

2 webpack-dev-server 开发服务器

       webpack-dev-server是一个简单的web服务器，在代码修改后能重新构建代码并且刷新浏览器。
   特点：只会在内存中编译打包，不会有任何实体文件输出
   启动devServer指令： webpack-dev-server，本地下载的话需要npx webpack-dev-server查找包并运行，可以将该命令配置到package.json中。
   安装：cnpm i -D webpack-dev-server
    配置：

	在webpack.config.js文件中：
	module.exports = {
	    devServer: {
	       // 运行的构建后的目录
	       static: './build',
	       // 启动gzip压缩
	       compress: true,
	       // 端口号，默认是8080
	       port: 3000,
	       // 是否自动打开浏览器
	       open: true
	   }
	}