Webpack

一，Webpack单纯的进行了js的打包

1，首先新建一个文件夹叫 webpack1 ，然后npm init -y初始化一下，生产package.json文件。然后就可以使用npm xxx 命令了。
2，安装webpack
安装webpack有两种方式。
全局的安装：npm init webpack webpack-cli -g （不推荐全局安装，因为不是每个项目中的webpack版本都一样的）
局部项目内的安装：npm init webpack webpack-cli --save-dev（推荐使用）
3.查看webpakc版本
webpack -v（直接查看全局的webpack版本）
npx webpack -v（查看当前目录中的webpack版本）
4.安装指定版本的wepakc
npm info webpack //查看webpack的历史发布信息
npm install [e-mail] webpack-cli -D
5.启动webpakc自动打包模式（4版本后才有，功能比较弱）
在webpack1文件夹中新建index.js //自动打包默认的必须交index.js。名字规定好了，而且必须是js文件。
在执行npx webpack index.js，就可以看到新生成的dist目录里添加了压缩后的名叫main.js代码了。
6.也可以在webpack1目录中新建a.js和b.js
a.js

export default function a(){
    console.log("a.js");
}

b.js

export default function b(){
    console.log("b.js");
}

在index.js中使用import 引入

import a from 'a'
import b from 'b'
a()
b()
function kkb(){
    console.log("kkb");
}
kkb()

然后npx webpack index.js ，dist里的main.js里也打包成功了。
上面是没有对webpack进行额外的配置，只是单纯的进行了js的打包。

二.webpack 配置⽂件（修改webpack有默认的配置⽂件）

1.当我们使⽤npx webpack index.js时，表示的是使⽤webpack处理打包，名为index.js的⼊⼝模块。默认放在当前⽬录下的dist⽬录，打包后的模块名称是main.js，当然我们也可以修改webpack有默认的配置⽂件，叫webpack.config.js，我们可以对这个⽂件进⾏修改，进⾏个性化配置
在webpack1中新建webpack.connfig.js。
使用common.js规范，module.exports导出一个对象。这个对象里添加配置信息。
webpack.config.js

const path =require("path")
module.exports={
    entry:"./index.js", //入口文件，打包index.js
    output:{
        // 必须是绝对路径
        path: path.resolve(__dirname, "build") //输出(新建)build文件里，把打包后的文件（默认名字叫main.js）放里面
    }
}

然后执行npx webpack （因为有webpack.connfig.js），所以默认找到webpack.connfig.js里的配置信息（里面有打包入口）。进行打包。不用指定打包的文件名了。

2.修改打包后的文件名称
output里有filename字段，可修改打包后的文件名称
filename:"index.js",
例如：

const path =require("path")
module.exports={
    entry:"./index.js", //入口文件，打包index.js
    output:{
        filename:"index.js", //输出(新建)build文件里，把打包后的文件名叫index.js放里面
        // 必须是绝对路径
        path: path.resolve(__dirname, "build") 
    }
}

3.不使⽤默认的配置⽂件： webpack.config.js

npx webpack //执⾏命令后，webpack会找到默认的配置⽂件，并使⽤执⾏

--config 运行指定的webpack配置文件

npx webpack --config webpackconfig.js //指定webpack使⽤webpackconfig.js⽂件来作为
配置⽂件并执⾏

在webpack1里新建webpacktest.js文件
厘米的内容如下：

const path =require("path")
module.exports={
    entry:"./index.js", //入口文件，打包index.js
    output:{
        filename:"kkb.js",
        // 必须是绝对路径
        path: path.resolve(__dirname, "build") //输出(新建)build文件里，把打包后的文件（默认名字叫main.js）放里面
    }
}

执行npx webpack --config webpacktest.js，可进行相应的打包。

三，打包非js的文件。

1，webpack是模块打包⼯具，⽽模块不仅仅是js，还可以是css，图⽚或者其他格式
但是webpack默认只知道如何处理js模块，那么其他格式的模块处理，和处理⽅式就需要loader了。

loader

当webpack处理到不认识的模块时，需要在webpack中的module处进⾏配置，当检测到是什么格式的模块，使⽤什么loader来处理。
1.
loader: file-loader：处理静态资源模块
loader: file-loader
原理是把打包⼊⼝中识别出的资源模块，移动到输出⽬录，并且返回⼀个地址名称
所以我们什么时候⽤file-loader呢？
场景：就是当我们需要模块，仅仅是从源代码挪移到打包⽬录，就可以使⽤file-loader来处理，图标字体，txt，svg，csv，excel，图⽚资源啦等等。

npm install file-loader -D

使用：
在webpack1里新建一个img文件夹，里面放一个图片。在index.js入口文件中直接使用。
index.js

import a from './a'
import b from './b'
import tupian from './img/tupian.png'
a()
b()
function kkb(){
    console.log("kkb");
}
kkb()

现在直接npx webpack 会报错，提示请使用loader。
修改webpack.config.js配置文件，添加loader

const path =require("path")
module.exports={
    entry:"./index.js", //入口文件，打包index.js
    output:{
        filename:"index.js",
        // 必须是绝对路径
        path: path.resolve(__dirname, "build") //输出(新建)build文件里，把打包后的文件（默认名字叫main.js）放里面
    },
    module:{
        rules:[
            {
                test: /\.jpe?g|png|gif$/, //当对js文件进行打包的时候，如果遇到以jpe?g|png|gif结尾的文件，
                use:{
                    loader: "file-loader" // 就使用file-loader解决
                }
            }
        ]
    }
}

添加options额外的配置，⽐如资源名称
修改webpack.config.js配置文件，添加options配置
代码如下：

const path = require("path")
module.exports = {
    entry: "./index.js", //入口文件，打包index.js
    output: {
        filename: "index.js",
        // 必须是绝对路径
        path: path.resolve(__dirname, "build") //输出(新建)build文件里，把打包后的文件（默认名字叫main.js）放里面
    },
    module: {
        rules: [
            {
                test: /\.jpe?g|png|gif$/, //当对js文件进行打包的时候，如果遇到以jpe?g|png|gif结尾的文件，
                use: {
                    loader: "file-loader" ,// 就使用file-loader解决
                    // options额外的配置，⽐如资源名称
                    options: {
                        // placeholder 占位符 [name]⽼资源模块的名称,[ext]⽼资源模块格式名,[hash]添加拼接hase 防止缓存
                        // [ext]⽼资源模块的后缀
                        // https://webpack.js.org/loaders/file-loader#placeholders
                        name: "[name]_[hash].[ext]",
                        //打包后的存放位置
                        outputPath: "images/" //放在打包文件夹里的images文件夹里
                    }
                }
            }
        ]
    }
}

2.url-loader，把file-loader修改成url-loader，可直接进行打包。默认生成的是base64格式的图片。
如果是小图片变成base64的图片，挺好的，可以减少请求，但是如果图片体积过大的话，那么转成base64，图片体积会变成更大。所以url-loader有的limit属性，控制是否打包成base64。例如：

const path = require("path")
module.exports = {
    entry: "./index.js", //入口文件，打包index.js
    output: {
        filename: "index.js",
        // 必须是绝对路径
        path: path.resolve(__dirname, "build") //输出(新建)build文件里，把打包后的文件（默认名字叫main.js）放里面
    },
    module: {
        rules: [
            {
                test: /\.jpe?g|png|gif$/, //当对js文件进行打包的时候，如果遇到以jpe?g|png|gif结尾的文件，
                use: {
                    loader: "url-loader" ,// 就使用url-loader解决
                    // options额外的配置，⽐如资源名称
                    options: {
                        // placeholder 占位符 [name]⽼资源模块的名称,[ext]⽼资源模块格式名,[hash]添加拼接hase 防止缓存
                        // [ext]⽼资源模块的后缀
                        // https://webpack.js.org/loaders/file-loader#placeholders
                        name: "[name]_[hash].[ext]",
                        //打包后的存放位置
                        outputPath: "images/", //放在打包文件夹里的images文件夹里
                        limit:100 //当图片小于100kb的时候就转base64，否则就和file-loader一样，以图片形式输入，直接转移图片位置就可以了
                    }
                }
            }
        ]
    }
}

3.css-loader,style-loader.
html.css内容如下

body{
    background: red;
}

首先新建html.css文件，在把根目录中index.js使用import “./html.css”引用。现在直接npx webpack 会报错。因为得使用css.loader和style.loader进行css的打包。
同样在webpack.config.js中添加css.loader。的配置。

const path = require("path")
module.exports = {
    entry: "./index.js", //入口文件，打包index.js
    output: {
        filename: "index.js",
        // 必须是绝对路径
        path: path.resolve(__dirname, "build") //输出(新建)build文件里，把打包后的文件（默认名字叫main.js）放里面
    },
    module: {
        rules: [
            {
                test: /\.jpe?g|png|gif$/, //当对js文件进行打包的时候，如果遇到以jpe?g|png|gif结尾的文件，
                use: {
                    loader: "url-loader" ,// 就使用url-loader解决
                    // options额外的配置，⽐如资源名称
                    options: {
                        // placeholder 占位符 [name]⽼资源模块的名称,[ext]⽼资源模块格式名,[hash]添加拼接hase 防止缓存
                        // [ext]⽼资源模块的后缀
                        // https://webpack.js.org/loaders/file-loader#placeholders
                        name: "[name]_[hash].[ext]",
                        //打包后的存放位置
                        outputPath: "images/", //放在打包文件夹里的images文件夹里
                        limit:1000 //当图片小于100kb的时候就转base64，否则就和file-loader一样，以图片形式输入，直接转移图片位置就可以了
                    }
                }
            },
            {
                test: /\.css$/,
                // 首选使用css-loader把所以的css先集成，然后使用style.loader进行统一的以style内嵌的方式，放到html的head中。
                use: ["style-loader", "css-loader"]
            }
        ]
    }
}

然后执行npx webpack 进行打包，可看效果。
4.sacc.loader,node-scss。
sass样式处理
sass-load 把sass语法转换成css ，依赖node-sass模块

npm install sass-loader node-sass -D

base.scss内容如下

body{
    div{
        background: #333;
    }
}

首先新建base.scss文件，在把根目录中index.js使用import “./base.scss”引用。现在直接npx webpack 会报错。因为得使用sass-loader node-sass进行css的打包。
同样在webpack.config.js中添加scss.loader。的配置。

            {
                test: /\.scss$/,
                //loader有顺序，从右到左，从下到上
                use: ["style-loader", "css-loader", "sass-loader"]
            }

然后执行npx webpack 进行打包，可看效果。
5.样式⾃动添加前缀：Postcss-loader
npm i -D postcss-loader
    在index.css中添加需要自动添加浏览器前缀的属性 如：column-count: 3

body{
    background: red;
    column-count: 3;
}

    在修改load 添加postcss-loader
```
            {
            test: /\.css$/,
            // 首选使用css-loader把所以的css先集成，然后使用style.loader进行统一的以style内嵌的方式，放到html的head中。
            use: ["style-loader", "css-loader", "postcss-loader"]
        },
```

新建postcss.config.js
安装autoprefixer
//npm i autoprefixer -D
module.exports = {
plugins: [require("autoprefixer")]
};
然后执行npx webpack 进行打包，可看效果。

四，Plugins

plugin 可以在webpack运⾏到某个阶段的时候，帮你做⼀些事情，类似于⽣命周期的概念

1.HtmlWebpackPlugin
htmlwebpackplugin会在打包结束后，⾃动⽣成⼀个html⽂件，并把打包⽣成的js模块引⼊到该html中。

npm install --save-dev html-webpack-plugin

webpack.config.js里添加plugins配置
如下：

const HtmlWebpackPlugin = require('html-webpack-plugin')
……
    plugins:[new HtmlWebpackPlugin()]

npx webpack 打包，打包文件夹内⾃动⽣成⼀个html⽂件，并把打包⽣成的js模块引⼊到该html中。

1.1 自定义模板
先新建一个自定义的基础模板，我随意叫它index.html,
index.html如下：

<!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>Document</title>
</head>
<body>
 <div id="root"></div>
</body>
</html>

修改plugins里的配置,让打包之后的index.html以我们这个index.html基本模板为模板，并把打包⽣成的js模块引⼊到该html中。

   plugins:[new HtmlWebpackPlugin({
    template:"./index.html"
})]

 然后执行npx webpack 进行打包，可看效果。

1.2 自定义 模板中的title
自定义的html中使用模板语法

     <title><%= htmlWebpackPlugin.options.title %></title> 

修改plugins

    plugins:[new HtmlWebpackPlugin({
        template:"./base.html",
        title:"自定义title",
    })]

 1.3 自定义生产html的模板名字（使用new HtmlWebpackPlugin中filename属性控制）
     plugins:[new HtmlWebpackPlugin({
    template:"./base.html",
    title:"自定义title",
    filename:"app.html"
})]

然后执行npx webpack 进行打包，可看效果。
2.clean-webpack-plugin
打包之前，先把之前打包生成的文件删除干净，在打包。
npm install --save-dev clean-webpack-plugin
在webpack.congfig中先引用模板，主要需要解构赋值。

const {CleanWebpackPlugin} = require('clean-webpack-plugin')

在plugins中添加new CleanWebpackPlugin()；如下

    plugins:[new HtmlWebpackPlugin({
        template:"./base.html",
        title:"自定义title",
        filename:"app.html"
    }),
    //打包之前，先把之前打包生成的文件删除干净，在打包。
    new CleanWebpackPlugin()]

在npx webpack 打包，看结果。
3.mini-css-extract-plugin
打包之后自动生成css文件，将css以link href外链的形式引用到index模板中。
使用如下：
3.1安装依赖
```
npm i mini-css-extract-plugin --save-dev
```
3.2 修改plugins
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
……
new MiniCssExtractPlugin({filename:"abc.css"});

注意有有的时候需要修改loader中的配置

    {
                test: /\.css$/,
                //如果css文件，最终以link href外联样式加载css
                use: [MiniCssExtractPlugin.loader, "css-loader", "postcss-loader"]
            },
            {
                test: /\.scss$/,
                //如果scss文件，最终以style内联样式加载scss
                use: ["style-loader", "css-loader", "sass-loader"]
            }

sourceMap

源代码与打包后的代码的映射关系
在dev模式中，默认开启，关闭的话 可以在配置⽂件⾥

devtool:"none"

eval:速度最快
cheap:较快，不⽤管列的报错
Module：第三⽅模块
开发环境推荐：

devtool:"cheap-module-eval-source-map"

线上环境可以不开启：如果要看到⼀些错误信息，推荐；

devtool:"cheap-module-source-map"

WebpackDevServer

1.提升开发效率的利器
每次改完代码都需要重新打包⼀次，打开浏览器，刷新⼀次，很麻烦
我们可以安装使⽤webpackdevserver来改善这块的体验
启动服务后，会发现dist⽬录没有了，这是因为devServer把打包后的模块不会放在dist⽬录下，⽽是放到内存中，从⽽提升速度

 npm install webpack-dev-server -D

修改下package.json

"scripts": {
 "server": "webpack-dev-server"
 },

在webpack.config.js配置：

    devServer: {
        //静态服务器的根目录。
        //两种启动方式，npm run server 这种启动方式，将打包后的文件，放到内存当中了。所以打包好的
        // build文件夹是空的。这样可以提高启动速度。
        contentBase: "./build",
        // 默认打开
        open: true,
        port: 8081
        },

执行npm run server 。现在就可以自动打包，打包之后自动启动浏览器，打开了build目录下的index.htm文件了。端口是8081。

2.mock数据和跨域问题的解决
跨域：
联调期间，前后端分离，直接获取数据会跨域，上线后我们使⽤nginx转发，开发期间，webpack就可
以搞定这件事
启动⼀个服务器，mock⼀个接⼝：
// npm i express -D

// 创建⼀个server.js 修改scripts "server":"node server.js"
//server.js
const express = require('express')
const app = express()
app.get('/api/info', (req,res)=>{
 res.json({
 name:'开课吧',
 age:5,
 msg:'欢迎来到开课吧学习前端⾼级课程'
 })
开课吧web全栈架构师
})
app.listen('9092')

项⽬中安装axios⼯具

//npm i axios -D
//index.js
import axios from 'axios'
axios.get('http://localhost:9092/api/info').then(res=>{
 console.log(res)
})

会有跨域问题
现在，我们修改webpack.config.js 设置服务器代理

proxy: {
     "/api": {
     target: "http://localhost:9092"
     }
}

修改index.js
import axios from "axios";

axios.get("/api/info").then(res => {
console.log(res);
});

运行的话注意：先执行node server.js，在执行npm run server

搞定！
意思就是当请求axios.get("/api/info")访问/api开通的接口的时候，会把代理地址转到http://localhost:9092，相当于请求的是http://localhost:9092/api/info接口地址。