Webpack安装配置及打包详细过程

Webpack 是一个前端资源加载/打包工具

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

其中包含四个核心概念:

入口(entry)：指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的
输出(output)：告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist
loader：让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）
插件(plugins)：插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。

安装步骤：（前提要有node.js环境，没有的可以参考我之前的博客）

全局安装webpack
运行CMD，安装命令如下所示，其中， -g是全局安装，并移除安装了 webpack和webpack-cli

#安装方式一块安装，分开安装都可以

npm install webpack webpack-cli –g

npm install webpack -g
npm install webpack-cli -g

测试：

webpack -v		#查看版本
webpack-cli -v

若出现版本号，说明安装成功。

使用webpack:

1.创建项目（在随意目录下）
2.使用idea打开创建文件modules

hello.js

//暴露一个方法
exports.fanlan=function () {
    document.write("<h1>我是泛滥</h1>")
}

main.js

//引入一个包(主入口)
var req = require("./hello");
req.fanlan();

在根目录下创建配置文件webpack.config.js

module.exports={
    //程序入口
    entry:'./modules/main.js',
    //输出到哪里
    output:{
        filename:"./js/bundle.js"
    }
}

在cmd中打包：

webpack

直接在普通项目中引入：就可生效。

配置参数说明

mode：两种 mode 模式可供选择，
一种是开发环境，命令为 webpack --mode = development，打包出来的文件未经过压缩；
一种是生产环境，命令是 webpack --mode = production ，打包出来的文件是经过压缩的。

entry：资源入口文件，所有的资源最后会打包成一个 JS 文件。

ouput：打包之后存放的文件路径。path 为相对路径，filename 为打包后的文件名。

module：rules 配置编译规则，test 正则匹配，exclude 排除特定条件，use-loader，test 匹配到的解析器模块，use-options，与use-loader配合使用。

plugins：插件。plugins 与 loader 的区别在于，loader 只是一个解析模块，比如将 ES5 解析成 ES6，LESS 文件解析成 CSS 文件，为了兼容浏览器。而 plugins 是将 loader 之后的文件进行优化分类、压缩、提供公共代码等。

devServer：服务器配置，contentBase 文件路径，compress 是否启动 gzip 压缩，host 主机地址，port 端口号，publicPath。