什么是Webpack-----模块打包工具

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。

Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。

1.webpack的安装：

//全局安装

npm install -g webpack

使用： webpack 入口文件名

//安装到你的项目目录

npm install --save-dev webpack

使用：npx webpack 入口文件名

2.webpack的配置文件

module.exports = {

entry: __dirname +"/app/main.js",//唯一入口文件

output: {

path: __dirname +"/public",//打包后的文件存放的地方

filename:"bundle.js"//打包后输出文件的文件名

            }

}

使用：npx webpack //配置好可以省略文件名

注：npx webpack --config webpack.config.js //修改了webpack.config.js 名称时候，可以用该指令指定执行的webpack配置文件，官方文档描述：使用 --config 选项只是向你表明，可以传递任何名称的配置文件。这对于需要拆分成多个文件的复杂配置是非常有用；

注：“__dirname”是node.js中的一个全局变量，它指向当前执行脚本所在的目录

3.更快捷的执行打包任务

在package.json中对scripts对象进行相关设置

{

  "name": "vue-manage-system",

  "version": "3.1.0",

  "description": "基于Vue.js 2.x系列 + element-ui 内容管理系统解决方案",

  "author": "lin-xin <2981207131@qq.com>",

  "private": true,

  "scripts": {

    "bundle":"webpack",// 可以使用 npm run bundle 命令，来替代我们之前使用的 npx 命令

    "build": "node build/build.js",

    "build:dll": "webpack --config build/webpack.dll.conf.js"

  }

}

使用：npm run bundle

4.运行webpack的方式：

@1:webpack index.js(全局)

@2:npx webpack index.js

@3:npm run bundle

5.做webpack打包时候，输出的提示命令含义

Hash：本地打包对应的唯一hash值

version：本次打包使用的webpack版本

time：当前打包耗时

asset：打包出的文件名 

size：文件大小

chunks：复杂打包时候，其他打包js的id也会放在bundle.js的chunks字段中

chunks Names：同上，每个js文件对应的名字

entrypoint main = bundle.js  对应的是配置中入口文件的名字

警告：webpack没有配置打包环境和模式时候会报警告

默认的模式是：

mode:'production'//（代码压缩）webpack中配置，可选：development（代码未压缩）

6.使用loader打包静态资源【图片篇】,配置文件中进行配置

module: {

    rules: [{

        test：/\.jpg$/,

        use:{

            loader:'file-loader'

                }

            }]

}

以上配置代码含义：打包模块以jpg结尾的文件，使用file-loader来帮助我们做jpg文件的打包（若没有则需要安装npm install file-loader -D）

file-loader底层帮我们做的事情：

当他发现在代码里引入图片模块时候，会把这个模块，帮助打包移动到dist目录下；

得到图片（相对于dist目录的）名称，将名称作为返回值，返回给我们引入模块的变量之中；

7.loader是什么？

loader就是一个打包方案，知道对于某个特定文件，webpack该如何进行打包；

官方文档定义，loader用于对模块的源代码进行转换，可以使你在 import 或"加载"模块时预处理文件，可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS文件！

通俗理解的话，就是，由于webpack不能识别非js结尾的模块，所以通过loader使webpack识别出来（loader的作用）

如何配置loader：webpack.config.js中  配置module-rules（符合的规则）

拓展：配置loader--在module-rules-options中进行配置

module: {

    rules: [{

            test：/\.jpg$/,

            use:{

            loader:'file-loader'，

            options:{

                       name:'[name].[ext]'//占位符:原始名.后缀

                        outputPath:'images/' //当我遇到jpg文件时候，打包时候将其打包生成到dist/images的文件夹里

                        }

                }

            }]

}

8.使用loader

在你的应用程序中，有三种使用 loader 的方式（详见官方文档）：

配置（推荐）：在 webpack.config.js 文件中指定 loader。

内联：在每个 import 语句中显式指定 loader。

CLI：在 shell 命令中指定它们。

9.使用loader打包静态资源【图片篇】，更多配置

url-loader可以实现file-loader所实现的一切功能

当使用url-loader会将图片转化成一个base64的字符串，然后直接放到js文件里，不是直接生成图片

好处：省略http请求

缺点：图片文件大的时候会影响加载速度

因此，可以对图片的大小进行判断，图片较小时候放到js中，较大时候生成图片，使用limit配置

module: {

    rules: [{

            test：/\.jpg$/,

            use:{

            loader:'file-loader'，

            options:{

                        name:'[name].[ext]'//占位符:原始名.后缀

                        outputPath:'images/' //当我遇到jpg文件时候，打包时候将其打包生成到dist/images的文件夹里        

                        limit：2048//图片小于2048时候，图片转化成一个base64的字符串，放到js文件里，大于2048时候，生成图片引入

                        }

                }

            }]

}

10.使用loader打包静态资源【样式篇】

@1.需要用css-loader和style-loader配合使用

css-loader:  分析出几个css文件之间的关系，最终把这些css文件合并成一段css

style-loader: 在得到css-loader生成的内容之后，会把这段内容挂载到页面的head部分

@2.使用less,scss,stylus等的时候，需要添加额外对应的loader来进行编译

{

        test: /\.less$/,

        loader: ['style-loader','css-loader','less-loader','postcss-loader']

        //或者loader: "style-loader!css-loader!less-loader"

      }

注：loader是有执行顺序的（从下到上，从右到左）

@3.postcss-loader: 自动添加厂商前缀；

使用postcss-loader需要目录中创建postcss.config.js文件（详见文档）

配置如下：

module.exports = {

  "plugins": {

        require('autoprefixer')//需要下载

  }

}

@4.补充：css配置项

imporeLoaders:2

作用：当less中再去@import less文件时候，webpack打包时候可能不会走postcss-loader和less-loader，而直接去走css-loader了，那么则需要用imporeLoaders去规定，通过import引入的less文件，在引入之前，也要去走2个loader；就会保证不管是在js直接引入less文件还是less中@import引入less文件都会执行所有的loader

{

        test: /\.less$/,

        loader: [

            'style-loader',

            {

            loader:'css-loader',

            options:{

                    importLoaders:2

                    }

            },

            'less-loader',

            'postcss-loader']

      }

@5.样式模块化:防止样式耦合、冲突

在js中引入的less是全局的，因此可以使用模块化css（即该css在特点的模块内有效）

配置options中的modules

{

        test: /\.less$/,

        loader: [

            'style-loader',

            {

            loader:'css-loader',

            options:{

                    importLoaders:2，

                    modules:true,//

                    }

            },

            'less-loader',

            'postcss-loader']

      }

使用：

import style from ‘ /css路径’

img.classList.add(style.avatar)

11.使用loader打包静态资源【字体篇】

file-loader 和 url-loader 可以接收并加载任何文件，然后将其输出到构建目录

字体配置使用file-loader 进行配置

12.使用 plugins 让打包更便捷

1.安装: npm install html-webpack-plugin -D

2.使用:var HtmlWebPackPlugin = require('html-webpack-plugin');//引入

3.在webpack.config.js中配置：plugins:[]