Webpack基础知识总结

本文将从多个方面回顾下自己了解的Webpack知识，包括常见的配置项，前端搭建的一些方法和项目实际优化方法，有错误的地方还请指出并多多包涵。

一、关于Webpack

1.概念

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

 module.exports = {

	entry:'./main.js',

	output:{
		path:__dirname,
		filename:'bundle.js'
	},

	module:{
		rules:[
			{
				test:/.(png|jpg)$/,
				use:[
					{
						loader:'url-loader',
						options: {
			              	limit: 8192
			            }
					}
				]
			}
		]
	}
}

2.入口(entry)

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

 {
	    entry: {
	      app: './src/app.js',
	      search: './src/search.js'
	    },
	    output: {
	      filename: '[name].js',
	      path: __dirname + '/dist'
	    }
	}

3.出口(output)

output 属性告诉 webpack在哪里输出它所创建的bundles，以及如何命名这些文件，默认值为 ./dist。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。你可以通过在配置中指定一个output字段，来配置这些处理过程。在上面的示例中，我们通过output.filename 和 output.path 属性，来告诉 webpack bundle 的名称，以及我们想要 bundle 生成(emit)到哪里。当有多个入口起点的时候，可以使用如下对象的形式来写入口和出口：

4.模式(mode)

提供 mode 配置选项，告知 webpack 使用相应模式的内置优化。

mode :　'development' | 'production'

5.loader

loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS文件！

5.1.使用loader

Loaders需要单独安装并且需要在webpack.config.js中的modules关键字下进行配置，Loaders的配置包括以下几方面：

• test：一个用以匹配loaders所处理文件的拓展名的正则表达式 （必须）
• loader：loader的名称 （必须）
• include/exclude: 手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）；
• query：为loaders提供额外的设置选项 （可选）

    module.exports = {

	entry:'./main.jsx',

	output:{
		path:__dirname,
		filename:'bundle.js'
	},

	module:{

		rules:[

			{
				test:/.css$/,
				use:['style-loader','css-loader']
			},

			{
				test:/.jsx?$/,
				exclude:/node_modules/,
				use:{
					loader:'babel-loader',
					options:{
						presets:['es2015','react']
					}
				}
			}

		]

	}

}

5.2.loader特性

• loader 支持链式传递。能够对资源使用流水线(pipeline)。一组链式的 loader 将按照相反的顺序执行。loader 链中的第一个 loader 返回值给下一个 loader。在最后一个 loader，返回 webpack 所预期的 JavaScript。
• loader 可以是同步的，也可以是异步的。
• loader 运行在 Node.js 中，并且能够执行任何可能的操作。
• loader 接收查询参数。用于对 loader 传递配置。
• loader 也能够使用 options 对象进行配置。
• 除了使用 package.json 常见的 main 属性，还可以将普通的 npm 模块导出为 loader，做法是在 package.json 里定义一个 loader 字段。
• 插件(plugin)可以为 loader 带来更多特性。
• loader 能够产生额外的任意文件。
• include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）。

6.插件(plugins)

• 插件是 webpack 的支柱功能。webpack 自身也是构建于，你在 webpack 配置中用到的相同的插件系统之上！插件目的在于解决 loader 无法实现的其他事。
• webpack 插件是一个具有 apply 属性的 JavaScript 对象。apply 属性会被 webpack compiler 调用，并且 compiler 对象可在整个编译生命周期访问。
• 由于插件可以携带参数/选项，你必须在 webpack 配置中，向 plugins 属性传入 new 实例。

const HtmlWebpackPlugin = require('html-webpack-plugin'); //通过 npm 安装
	const webpack = require('webpack'); //访问内置的插件
	--
	--
	--
	plugins: [
		new webpack.optimize.UglifyJsPlugin(),
		new HtmlWebpackPlugin({template: './src/index.html'})
  	]

二、前端搭建

当前开发构建项目过程，不管是Vue还是React，他们的脚手架Vue-cli和Create React App工具都会自动把Webpack添加到项目中，下面介绍的是自己手动搭建的一些基本配置和过程。

1.安装

    npm install webpack webpack-cli -g 
    或者 
    yarn global add webpack webpack-cli

2.配置

新建一个webpack的文件夹，在其下新建一个try-webpack(防止init时项目名和安装包同名)并初始化和配置webpack。

	npm init -y  //-y 默认所有的配置
    yarn add webpack webpack-cli -D  //-D webpack安装在devDependencies环境中

三、部署webpack

在package.json里配置scripts

  "scripts": {
    "build": "webpack --mode production" //我们在这里配置，就可以使用npm run build 启动我们的webpack
  },
  "devDependencies": {
    "webpack": "^4.16.0",
    "webpack-cli": "^3.0.8"
  }

四、配置

1.html

打包html使用 html-webpack-plugin

plugins: [  //插进的引用, 压缩，分离美化
        new HtmlWebpackPlugin({  //将模板的头部和尾部添加css和js模板,dist 目录发布到服务器上，项目包。可以直接上线
            file: 'index.html', //打造单页面运用 最后运行的不是这个
            template: 'src/index.html'  //vue-cli放在跟目录下
        }),
    ],

2.live-server

安装完成后进入根目录 可直接启动node服务

3.js

babel。在.babelrc配置文件中，主要是对预设（presets）和插件（plugins）进行配置，因此不同的转译器作用不同的配置项，大致可分为以下三项

• 语法转义器
• 补丁转义器
• jsx和flow插件

创建预设(presets)

"presets": [
    [
      "@babel/preset-env",
      {     //options配置介绍:targets可以制定兼容浏览器版本
        "targets": {
          "chrome": 52,
          "browsers": [
            "last 2 versions",
            "safari 7"
          ]
        }
      }
    ],
    "@babel/preset-react",
    "@babel/preset-flow"
  ]

插件（plugins）

 "plugins": [
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ],
    [
      "@babel/plugin-proposal-class-properties",
      {
        "loose": true
      }
    ],"react-hot-loader/babel",[
    "@babel/plugin-transform-runtime",
    {
      // "regenerator": true
    }
  ]]

五、项目优化

在实际的开发项目中，我遇到了打包后文件过大导致的页面首次打开速度特别慢的情况，在查过好多资料和博客后，总结了一些简单的优化方法。

1.打包可视化插件

name: webpack-bundle-analyzer -> BundleAnalyzerPlugin
简介: 该插件可以将打包的项目以可视化的形式展现到浏览器上，并展示打包项目的名称大小等，更加方便针对优化

    // install
    sudo npm i -D webpack-bundle-analyzer
    
    // code
    const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

    baseConfig.plugins.push(
       new BundleAnalyzerPlugin({ analyzerPort: 8082 })
    )

2.JS代码压缩

name: webpack-parallel-uglify-plugin
简介: 使用 ParallelUglifyPlugin 并行压缩输出的 JS 代码，并对具体压缩内容做具体配置

    // install
    sudo npm i -D webpack-parallel-uglify-plugin
    
    // code 
    const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');

    new ParallelUglifyPlugin({
      // 传递给 UglifyJS 的参数
      uglifyJS: {
        output: {
          // 最紧凑的输出
          beautify: false,
          // 删除所有的注释
          comments: false,
        },
        compress: {
          // 删除所有的 `console` 语句，可以兼容ie浏览器
          drop_console: true,
          // 内嵌定义了但是只用到一次的变量
          collapse_vars: true,
          // 提取出出现多次但是没有定义成变量去引用的静态值
          reduce_vars: true,
        }
      },
    })

3.动态导入文件插件

name: dynamic-import-webpack
简介: 用来支持React懒加载,否则会报错

    // install
    npm i -D dynamic-import-webpack
    
    //code 配置在 .babelrc文件  plugins中
    {
        "plugins": "dynamic-import-webpack",

    }