webpack概念概览及其基本用法

作为一名前端菜鸟，日常工作中或多或少会接触到webpack，尤其是现在前后端分离，前端项目的管理日益要求严格，打包作为最后一步，在我们的开发前后显得日益重要，webpack 是一个现代 JavaScript 应用程序的静态模块打包器，日常工作过程中断断续续对他进行了了解，看多了之后渐渐有些心得，以前打开webpack官网看到那么一大坨，顿感好高大上，看久了觉得分功能模块来看也就这样，无非就是一个配置文件，不同属性决定项目不同表现，基于这种思想来学习，就比较清晰易懂了，话不多说先来简单介绍webpack属性的各大模块。

基本前提

要使用webpack，首先的安装，写着文章时webpack5已经发布，但我们目前都是以4为主，
1.前提条件，请确保安装了 Node.js 的最新版本，
2.如果使用webpack4+ 那就必须先安装两个包。因为webpack的高度可配置性，所以不建议全局安装，安装在对应项目下就行

npm install --save-dev webpack webpack-cli

模块基本属性值

webpack的配置说白了就是导出一个对象，对象的值指导了我们项目打包或者开发时的表现，每个对象值包含若干属性，但是大前提对象的值负责的功能是固定的；

1.entry：就是最基本的入口文件，你的项目的入口文件，它的值可以是字符串，代表单入口，

module.exports = {
  entry: './src/app.js'
};

但是有时候我们的项目会有多个入口，那他的值可以是对象形式，数组形式，用法大同小异，具体可参考entry配置：

entry: {
  home: "./home.js",
  about: "./about.js",
  contact: "./contact.js"
}

2.output：出口文件，就是当你把一个项目打包后打包出来的文件相关配置，出口文件只有一个，这里你可以配置出口路径，文件名等等

output:{
   // filename:'bundle.js',// 单个入口时写死
   filename: "[name].bundle.js",// 多个入口name代表entry里面的key值
   path:path.resolve(__dirname,'dist')
  },

另外他还有几个比较有用的属性值，当我们打包完成之后在我们的index.html文件后，我们想使用打包文件里面的一个方法时：

//  打包后的文件映入
<script src="bundle.js"></script>
<script>
//在这里想要调用内部bundle.js某个方法，就会报错
</script>

这时我们就可以通过配置以下两个联合属性
library：'webpackMethods’某个名字来指定方法，
libraryTarget:‘xx环境名字’，可能的值有：
1.1 libraryTarget: ‘var’ - （默认值）当 library 加载完成，入口起点的返回值将分配给library这个变量：

// 实际上内部类似于做了这样赋值
var webpackMethods= _entry_return_;
//  全局变量，然后我们就可以直接调用
webpackMethods()

1.2 libraryTarget: ‘this’ ,绑定在当前环境this的指向上；

this.webpackMethods();
// 如果当前this指向widow
webpackMethods()

1.3 libraryTarget: ‘window’ ,绑定在当前环境this的指向上；

// window 对象中的属性
    window.webpackMethods()

1.4 libraryTarget: ‘umd’：在amd或comonjs中通过require 之后可以访问；

// CommonJS 模块引入
var webpackMethods= require('webpack-numbers');
// ES2015 和 CommonJS 模块调用
webpackMethods()
// ...
// AMD 模块引入
require(['webpackMethods'], function ( webpackMethods) {
  // ...
  // AMD 模块调用
  webpackMethods('Two');
  // ...
});

1.4 libraryTarget: ‘global’：在node环境全局变量global里面使用；

3.module： 定义项目中各文件模块该是用什么来解析，即解析规则，每一个非js文件都对应了loaders，是一个对象，包含各种规则；

常使用的属性就是rules，因为wabpack只认识js语言，而我们打包出来的文件中包含各种css，图片等等各种非js的东西通过这里来配置解析规则，具体规则参考如下：rules相关规则

4. resolve：决定项目各模块该如何被解析，如一些路径，哪些可以被解析等等筛选规则；

5.plugins： 插件一些功能性插件，来自定义构建过程，辅助我们的打包过程；

常用的一些plugins有压缩文件。清理压缩包，

const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin'); 
module.exports = {
	plugins:[
		// 清理上一次打包的遗留文件文件
        new CleanWebpackPlugin(),
        // 配置我们的出口模块
        new HtmlWebpackPlugin({
            title: 'webpack-test',
            template:'./src/index.html'
        }),
       //webpack.HotModuleReplacementPlugin()配合webpack-dev-server热更新
       new webpack.HotModuleReplacementPlugin()
    ]
}

6. devserver：这里配置一些开发过程中热更新相关的配置，要先安装webpack-dev-server，主要影响命令行webpack-dev-server的表现，类似于webpack自带的watch模式；

devServer: {
   contentBase: './public', // 告诉devServer可访问文件路径
   hot: true, // 开启热替换
   // 还可配置热更新port host proxy接口代理相关
  },

7.devtool：此选项控制是否生成，以及如何生成 source map。这个一般用于开发环境，主要用打包过程中映射错误代码位置等等；

我么们可以使用SourceMapDevToolPlugin 进行更细粒度的配置。

8. target：webpack能够为多种环境或 target 构建编译，如node环境或者web环境，默认为web环境；

module.exports = {
  target: 'node' // web默认值
};

9. watch：是否监听项目文件变化，为布尔值；

10.watchoption：定义如何监听文件，对wtach进行更细的控制；

11.externals：外部引入的资源，防止将某些 import 的包(package)打包到 bundle 中，减少包的大小，不经过打包而是直接通过script冲外部获取；

如jquery从cdn获取，这个属性的基本功能实描述这些外部资源的在项目中的可用方式：

externals: {
  jquery: 'jQuery'
}

12.performance：这些选项可以控制 webpack 如何通知「资源(asset)和入口起点超过指定文件限制」。

13.Node： 这些选项可以配置是否 polyfill 或 mock 某些 Node.js 全局变量和模块。这可以使最初为 Node.js 环境编写的代码，在其他环境（如浏览器）中运行；

14.mode： 供 mode 配置选项，告知 webpack 使用相应模式的内置优化。如开发环境、生产环境，

可选值有production与development；

通过简易的描述webpack基本属性功能有大致的了解了，当然webpack最终导出的是一个对象，所以我们可以往里面添加一些自己项目自定义的属性，目的一条自己用得着看得懂就行这些自定义属性；
接下来下一篇的文章会介绍一些常见的插件的使用，敬请期待；