webpack的详细使用

webpack作用：

打包（可以将多个文件打包成一个文件，可以降低访问次数，减轻服务器的压力）。
转换（sass, less,typescript,es6,jsx）对于浏览器不兼容的做转换。
优化（单页面应用越来越普及，前端的逻辑越来越复杂）。

webpack安装：

全局

     npm install -g webpack如果你使用的是 webpack 4+ 版本你还需要安装 cli npm install -g webpack-cli
复制代码

安装成功后查看版本号

     webpack -v
复制代码

本地安装

     npm install --save-dev webpack如果你使用 webpack 4+ 版本，你还需要安装 CLInpm install --save-dev webpack-cli
复制代码

不推荐全局安装 webpack。这会将你项目中的 webpack 锁定到指定版本，并且在使用不同的 webpack 版本的项目中，可能会导致构建失败。

webpack的结构

webpack需要传入一个配置对象，它的主要结构有：

mode : 模式。模式分为两种：（1）生产模式（production）,该模式的代码是压缩以后的，供上线使用。（2）开发模式（development）,该模式的代码没有进行压缩，供开发使用。
entry : 入口 --》表示我要将谁进行打包。
output : 出口 --》表示将打包后的文件放到哪里。
devServer : 服务器设置 --》热更新，服务器代理，自动打开浏览器。
plugins : 插件。
loader是：转换。实现兼容，sass 、less 、jsx。

在学习 webpack 如何打包之前，首先要学习下 Node.js 的一个内置模块 path 和 __dirname 这个全局变量

__dirname 获取所处文件的所在目录（绝对路径）

      console.log（__dirname） // Users/bu/Desktop/learn/webpack/src
复制代码

path 模块是 node.js 的一个内置模块，与 __dirname 可以防止不同操作系统之间的文件路径问题

     // path.join() 用于将两个地址进行合并，生成一个绝对地址console.log(path.join(__dirname,"dist"));console.log(path.join(__dirname,"./dist"));console.log(path.join(__dirname,"../dist"));console.log(path.join(__dirname,"/dist"));/Users/bu/Desktop/learn/webpack/src/dist/Users/bu/Desktop/learn/webpack/src/dist/Users/bu/Desktop/learn/webpack/dist/Users/bu/Desktop/learn/webpack/src/dist// path.resolve() 与 path.join() 其他都一样，路径合并， 但是只有一个 “/” 则认为进入到盘符下面 console.log(path.resolve(__dirname,'dist'));console.log(path.resolve(__dirname,'./dist'));console.log(path.resolve(__dirname,'../dist'));console.log(path.resolve(__dirname,'/dist'));/Users/bu/Desktop/learn/webpack/src/dist/Users/bu/Desktop/learn/webpack/src/dist/Users/bu/Desktop/learn/webpack/dist/dist
复制代码

打包 ( 同名文件会进行覆盖 )

零配置打包：你不需要进行配置，只需要命令行输入 webpack 就会进行打包

没有进行任何配置，自动将 src 文件下的 index.js 文件，打包到 dist 下的main.js 里面
初次打包： webpack ./src/index.js --output ./dist/bundle.js --mode development // 表示将src文件中的index文件打包到 dist 文件中的bundle文件中，模式为开发模式 // --mode 为可选不写则默认为生产模式
在package.json 文件中进行配置，使用 npm run + "你设置的指令名称" 进行打包

注意：使用 npm init 可以便捷的创建 package.json 文件
```
  "scripts": {"build" : "webpack ./src/index.js --output ./dist/bundle.js --mode production"}
复制代码
```
但是为了避免将所有的配置都写在package.json 中，所以添加一个 webpack.config.js 文件进行配置，然后使用指令 "webpack" 进行触发配置。当然webpack的配置文件也可以不叫 webpack.config.js ,可以自己命名如： buzhanhua.config.js 。但是触发指令则变为：

webpack --config buzhahua.config.js
```
  const path = require('path');module.exports = {mode : "development",entry : "./src/index.js",output : {path : path.resolve(__dirname,'./dist'), // path 必须是一个绝对路径 若使用 "/" 则打包到盘符底下filename : 'bundle.js'}}
复制代码
```

如何将多个文件打包到一个文件中？

     const path = require('path');module.exports = {mode : "development",entry : [   //  以数组的形式"./src/index.js","./src/index1.js"],output : {path : path.resolve(__dirname,'./dist'),filename : 'bundle.js'}}
复制代码

如何将多个文件打包到多个文件中？

     const path = require('path');module.exports = {mode : "development",entry : {    // 以对象的形式index : './src/index.js',index1 : './src/index1.js'},output : {path : path.resolve(__dirname,'./dist'),filename : '[name].bundle.js'  // name 接收 entry 中的key 作为文件名的前缀 ，进行分文件}}
复制代码

plugins : 插件

一. html-webpack-plugin : 以某个页面为模板，在内存中生成HTML页面的插件（也可以理解为：实现对HTML的一些控制，将指定的JS放进HTML当中）。

使用：

下载：

npm install html-webpack-plugin webpack webpack-cli --save-dev
顺便说一下 --save-dev 也可以换成 -D

引入：

   const HTMLWebpackPlugin = require("html-webpack-plugin")
复制代码

使用：

  plugins : [new HTMLWebpackPlugin()]
复制代码

用法
```
    plugins : [new HTMLWebpackPlugin({template : './src/test.html',filename : 'haha.html',title : "我是主页谢谢",arr : [1,2,3,4],chunks : ["index"]}),new HTMLWebpackPlugin({minify : {collapseWhitespace : true, // 压缩空白removeAttributeQuotes : true // 删除属性双引号},template : './src/test1.html',chunks : ["index1"],hash : true})]
复制代码
```
属性注释：

template : "模板的路径即使用谁做模板" ，注意这里只是指定谁是模板，生成文件的名字与其无关，如果不定义filename 则生成文件的名字默认是 index.html

filename : 指定打包完的文件名称（生成文件的名称）

chunks : 用于设置打包完的JS是否进行嵌入，chunks 接收一个数组，可以嵌入多个，对应的成员是entry的key 值。若不想嵌入则 [""] 即可

minify : 压缩

hash : 清缓存，就是在嵌入的js路径后追加一个后缀，保证唯一性
```
  <script type=text/javascript src=index.bundle.js?36c17b8a44d43558e6da></script>
复制代码
```
而对于，title ,arr等则是自己定义的一些数据，可以在模板中使用
```
   <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title><%=htmlWebpackPlugin.options.title%></title></head><body><% for(var i = 0 ; i < htmlWebpackPlugin.options.arr.length ; i++){%><p><%=htmlWebpackPlugin.options.arr[i]%></p><%}%></body></html>
复制代码
```
如同百度模板一样 <% %> 相当于开辟出一块js 空间可写js代码，<%=%> 则是使用数据，注意在使用数据时从 htmlWebpackPlugin.options 中获取

二、clean-webpack-plugin : 删除指定的文件夹，多用于在打包之前将某个文件夹删除
1. 下载
  
  npm install clean-webpack-plugin -D
2. 引入
  
  const CleanWebpackPlugin = require("clean-webpack-plugin")
3. 使用
  
  plugins : [ new CleanWebpackPlugin(['dist']) ]
  
  注意：要将它放到所有操作之前，表示在打包之前将dist 文件删除，若是放在最后则会将打包后的文件给删掉了

devServer : 服务器（对象）

下载

npm install webpack-dev-server -D

webpack.config.js 中配置

   devServer : {contentBase : path.join(__dirname,'./dist'), // 设置网站根目录host : "localhost", // 端口port : 8000, // 端口号open :true // 是否自动开启},
复制代码

package.json 中配置
```
  "script" : {"dev" : "webpack-dev-server --open"}
复制代码
```
注意：在指令后添加 --open 可以使其自动开启，webpack.config.js中设置这里就不需要设置了，有一个就可以

loader 转换

注意：webpack默认只能处理JS类型的文件，对于其他文件则需要使用第三方包（loader）进行转化

执行过程如下：

发现要处理的文件不是JS，就会去配置文件中找对应的loader。
如果可以匹配对应的规则，则会调用对应的loader进行处理。
调用顺序，从后向前，每个loader的处理解果会向后面的loader进行传递。
当最后一个loader调用完毕，将最终结果交给webpack进行打包，最终输出到打包文件。

配置方式：

     // 在webpack配置文件中module : {rules : [{test : /\.css$/,use : ['style-loader','css-loader']},]}
复制代码

处理css文件

安装

npm install style-loader css-loader -D

配置

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

处理less文件

安装

npm install style-loader css-loader less-loader less(该报是less-loader 内部依赖不需要use中使用) -D

配置

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

处理sass文件

安装

npm install style-loader css-loader sass-loader node-sass(该报是sass-loader 内部依赖不需要use中使用) -D

配置

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

处理图片

安装

npm install url-loader file-loader(内部依赖) -D

配置

{test:/.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader?limit=90000&name=[hash:8]-[name].[ext]'}

注意：

给loader传参的时候和URL完全一样， limit 的单位是字节 byte 大于或等于这个值的时候，将不会将图片转为base64 小于的时候则会转为 base64（提高页面加载速度的方式之一就是减少页面的二次请求数量，）。
name字段可以定义输出的图片名称，默认会将名称设置为hash值，这么做的目的是为了防止图片名称重复（因为都会将图片托管到根目录）。

处理字体

安装

npm install url-loader file-loader(内部依赖) -D

配置

{test:/.(ttf|eot|svg|woff|woff2)$/,use : 'url-loader'}

babel转换es6以上的语法

安装

npm i babel-core babel-loader babel-plugin-transform-runtime -D

npm i babel-preset-env babel-preset-stage-0 -D

注释： "babel-plugin-" 后是插件的名称， "babel-preset-" 后是语法名称

配置

在modele节点中的rules数组中，添加一条新的匹配规则

       {test : /\.js$/,use : 'babel-loader',exclude : /node_modules/}
复制代码

exclude表示排除的意思，排除node_modules的原因如下：

不排除node_modules,babel则会将node_modules中的所有第三方JS文件进行翻译打包，第三方包肯定都是编译好的，这样做的是无用功。并且这样会非常消耗CPU，同时打包速度非常慢。
不排除就算打包完成了，项目也是无法运行的。

配置babel

在项目的根目录下建立一个.babelrc 文件，该文件中必须严格符合JSON语法。

     {"presets": ["env","stage-0"],"plugins": ["transform-runtime"]}
复制代码

presets 中放置语法， plugins 放置插件

resolve 更改引入包的默认路径

import Vue from 'vue';

包查找规则：

找寻项目中有没有node_modules 文件夹。
在node_modules中根据包名找到对应文件。
在该文件中找到该包的包配置文件package.json
package.json 文件中的main属性指定了该包被加载时候的入口文件。

下面有两种方式改变：

一、更改引入方式

import Vue from '../node_modules/vue/dist/vue';

二、更改webpack配置

在webpack配置对象中添加新的节点resolve , 如下：

     resolve : {alias : {"vue$":"vue/dist/vue.js"}}
复制代码

表示以vue结尾的引入时，在后面的路径文件中引入