前言：读万卷书不如行万里路,行万里路不如名师指路，还是阅人无数？ 4f0d2b14a8a1bb16f879.html">webpack 4
webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个 依赖图，此依赖图对应映射到项目所需的每个模块。
从 v4.0.0 开始，webpack 可以不用再引入一个配置文件来打包项目，然而，它仍然有着高度可配置性，可以很好满足你的需求
一、安装 1.本地安装：安装最新版本或特定版本：
npm install --save-dev webpack@4.0.0 npm install --save-dev webpack@<version>使用 webpack v4+ 版本，还需要安装 CLI
npm install --save-dev webpack-cli@3.3.12 2.全局安装：通过以下 NPM 安装方式，可以使 webpack 在全局环境下可用：
npm install --global webpack@4.0.0 3.初始化项目首先我们创建一个目录，初始化 npm，安装 webpack-cli（此工具用于在命令行中运行 webpack）：
mkdir webpack-demo cd webpack-demo npm init -y npm install webpack@4.0.0 webpack-cli@3.3.12 --save-dev 4.打包不使用配置文件：
webpack src/index.js -o dist/index.js
{entery file}:入口文件的路径，本文中就是src/entery.js的路径；
{destination for bundled file}:填写打包后存放的路径。
使用配置文件：
webpack [--config webpack.config.js] 二、配置文件1、根目录创建webpack.config.js文件
const path = require(\'path\'); module.exports={ //入口文件的配置项 entry:{ main:\'./src/demo.js\' }, //出口文件的配置项 output:{ path:path.resolve(__dirname,\'dist\'), filename:\'index.js\' }, //模块：例如解读CSS,图片如何转换，压缩 module:{}, //插件，用于生产模版和各项功能 plugins:[], //配置webpack开发服务功能 devServer:{} }
path：Node.js Path 模块
path.resolve：将文件转为绝对路径
__dirname：nodeJs中的全局变量，指向当前文件所在的目录
三、入口、输出入口起点(entry point) 指示 webpack 应该使用哪个模块，来作为构建其内部 依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。
默认值是 ./src/index.js，但你可以通过在webpack.config.js中配置 entry 属性，来指定一个（或多个）不同的入口起点。
1、单入口 const path = require(\'path\'); module.exports = { entry: \'./src/index.js\', }; //或者赋值为对象的main属性 module.exports = { entry: { main:\'./src/index.js\' }, output:{ path:path.resolve(__dirname,\'dist\'), filename:\'index.js\' }, }; 2、多入口添加多个entry对象，对象key作为最终输出文件名
修改output的filename为动态获取文件名
const path = require(\'path\'); module.exports={ //入口文件的配置项 entry:{ demo:\'./src/demo.js\', index:\'./src/index.js\', }, //出口文件的配置项 output:{ path:path.resolve(__dirname,\'dist\'), filename:\'[name].js\' }, //模块：例如解读CSS,图片如何转换，压缩 module:{}, //插件，用于生产模版和各项功能 plugins:[], //配置webpack开发服务功能 devServer:{} } 四、模块模块主要是运用各种loader 用于对模块的源代码进行转换，将lass\sass或者es6\TS编译转换为html能识别的css,js等等，或者进行一些代码压缩图片压缩等等得处理
style-loader:
处理css文件中的url()等
npm install --save-dev style-loader@0.23.1css-loader：
将css插入到页面的style标签
npm install --save-dev css-loader@2.1.1loaders配置：
修改webpack.config.js中module属性中的配置代码如下：
webpack.config.js
module:{ rules: [ { test: /\.css$/, use: [ \'style-loader\', \'css-loader\'] } ] },loaders执行顺序是倒序，后缀为.css的文件流会流转到css-loader，依次到style-loader，直至完成这条loaders链
常用API：
noParse：过滤不需要解析的文件
rules：设置解析规则数组
{ test: xxx}：匹配特定条件。一般是提供一个正则表达式或正则表达式的数组
{ include: xxx}：匹配特定条件。一般是提供一个字符串或者字符串数组
{ exclude: xxx}：排除特定条件。一般是提供一个字符串或字符串数组
{ loader: [xxx]||xxx}：解析需要的loader。一般是提供一个字符串或字符串数组
五、插件webpack 提供了一个Plugin插件配置项，可以讲项目中的Js文件通过配置的插件进行解析