一文搞懂webpack

什么是webpack?

个人理解的是webpack就是一个“处理兼容性”、“代码压缩”工具

可参考博客：webpack基础概念

webpack基础打包配置

好用的东西，往往都需要环境变量的搭配

1.安装Nood.js至本地(网上教程一大把)

nood.js安装成功后终端输入npm -v，如果返回版本号即表示安装成功

2.新建自己的项目文件

 这里以本人的项目文件为例

• 项目文件为demo
• demo->dist用于存放webpack打包好的文件
• demo->src为自己的源码文件夹，里面存放着我们的html、css、js

3.初始化web包

终端输入 npm init -y

注意：终端必须在项目文件夹根目录打开，在vs-code里面的文件列表找到自己的项目文件右击点击“在集
      成终端中打开”

初始化成功项目文件夹中会出现一个package.json文件

4.安装依赖webpack与webpack-cli

终端输入：npm i webpack@5.42.1 webpack-cli@4.10.0 -D

安装依赖时的参数：

• S表示将文件包放入dependencies节点下表示此文件包会被一直用到，他是--save的简写

• D表示将文件包放入devDependencies节点表示此文件包只会在开发阶 段用到，他是--save-dev的简写

5.在项目文件夹根目录创建webpack.config.js文件夹，并配置一下配置，它是webpack的配置文件

//demo->webpack.config.js
module.exports={
    mode:'development'，
    entry: path.join(__dirname, './src/js/index.js'),//打包入口
    output: {
        path: path.join(__dirname, './dist'),//输出文件
        filename: 'js/index.js'//输出的文件名
    },
}

6.配置命令

//demo->package.json下面的script字段（如果熟悉命令该配置阶段可以省略）

"dev":"webpack"              //打包命令
"dev-serve":"webpack serve"  //实时打包命令
"dev-production":"webpack --mode production"//打包发布

7.运行配置命令 

终端输入：npm run dev 或 npx webpack

此时在我们的dist文件夹下就会生成打包后的文件 

webpack其他配置

1.打包模式

//demo->webpack.config.js
module.exports = { 
        mode: 'development'
}

mode有两个值：development:开发阶段[运行速度快] \ production:上线阶段[文件体积小]
也就是说如果在开发阶段，那么mode='development,如果在上线阶段，mode='production

2.entry与output

entry与output为打包入口与打包出口，webpack默认打包路径为src>index.js，默认输出路径为dist>main.js，也就是说当我们的js文件放在src目录下时，可以不配置出口与入口，这些可以通过我们的entry与output修改

//demo->webpack.config.js
const path=require('path')//先引入nood里面的path
module.exports = { 
        entry:path.join(__dirname,'./src/index1.js'),//打包入口
        output:{
            path:path.join(__dirname,'./dist'),//输出文件
            filename:'index1.js'//输出的文件名
        }
        //__dirname表示当前目录,第二个参数为对应路径
}

3.webpack-dev-server插件

webpack-dev-server插件可以实时打包，因为我们每更改一次源码都要运行npx webpack进行重新打包

1.终端输入：npm install webpack-dev-server@3.11.2 -D

2.将源文件夹下面的首页面的script标签的src属性改为根目录下生成的文件(比如我们的出口为app.js,则
  src='/app.js')

3.运行命令(打包演练我们配置的命令)
  终端输入：npm run dev-serve 或 npx webpack serve

4.结束实时打包
  终端按 Ctrl+c 两次

此时终端光标会在不停闪烁等待我们对源文件的更改,我们每Ctrl+s一次都会将最新的代码保存在内存中，生成的文件也保存在内存中，而并非我们的物理磁盘，所以要查看最新的代码效果需要访问内存中的首页

个人认为“webpack-dev-server插件虽然可以实时打包，但是它只是一个预览，其打包产生的文件存放在虚拟内存中的根目录下，而并非物理磁盘，预览效果也只能从虚拟内存进去才能看见，其功能相当于调试，通常调试完还需要我们重新打包一次新的代码才会出现在我们的物理磁盘上”

4.html-webpack-plugin插件

html-webpack-plugin插件, 让webpack打包后在dist目录下生成html文件并自动引入打包后的js

1.终端输入：npm install html-webpack-plugin@5.3.2 -D

2.在webpack.config.js中配置如下
  const HtmlWebpackPlugin = require('html-webpack-plugin')//导入 HTML 插件，得到一个构造函数
  module.exports = {
       plugins: [
        new HtmlWebpackPlugin({
            template: './src/html/index.html',//指定html模板
            filename: 'index.html'            //指定生成的html文件名
        })
    ]
  }

3.运行npx webpack 可以发现dist下面不仅有js文件，还有html文件

(加载器-loader)

在实际开发过程中，webpack默认只能打包处理以.js 后缀名结尾的模块。其他非.js 后缀名结尾的模:webpack默认处理不了，需要调用loader 加载器才可以正常打包，否则会报错!

5.css-loader

处理我们的css样式，直接将样式引入js入口打包,这样网页只需要引入一个js入口即可

1.终端输入：npm install style-loader@3.0.0 css-loader@5.2.6 -D

2.在webpack.config.js下配置
  module.exports = {
            module:{
                rules:[
                    {test:/\.css$/,use:['style-loader','css-loader']}
                    //test表示对应的文件类型,use表示文件对应的loader
                ]
            }
   }

3.在入口js文件中使用es6语法引入css模块：import 'css文件路径'

4.运行命令：npx webpack 查看首页是否有css样式效果

6.less-loader

1.终端输入：npm i less-loader@10.0.1 less@4.1.1 -D

2.在webpack.config.js下配置
  module.exports = {
       module:{
        rules:[{test:/\.less$/,use:['style-loader','css-loader','less-loader']}]
                 //test表示对应的文件类型,use表示文件对应的loader
       }
  }

3.在入口js文件中使用es6语法引入less模块：import 'less文件路径'

4.输入命令 npx webpack 查看效果

7.url-loader

网页中每请求一次图片都会影响网页的性能，url-loader类似于base64转码软件，可以将图片地址转换为base64字符串，将一些较小的图片直接转换为base64字符串，这样可以减少请求次数，提高网页性能

1.终端输入：npm i url-loader@4.1.1 file-loader@6.2.0 -D

2.在webpack.config.js下配置如下
        module.exports = {
              module:{
                  rules:[{test:/\.jpg|png|gif$/,use:['url-loader?limit=22229']}]
                    //test表示对应的文件类型,use表示文件对应的loader，limit表示临界值
              }
        }

3.js入口文件导入图片 import 变量(log) from "图片地址"

4.动态给img的src属性赋值 img(id/class).src=保存图片地址的变量(log)

临界值表示给图片大小设置的一个瓶颈，当图片大小大于这个值时，将不会转换为base64字符串，因为较大的图片转化为base64体积很大，反而影响性能 

8.babel-loader

webpack只能处理一部分js高级的语法，对于那些webpack无法处理的高级语法，需要借助于Babel-loader

1.终端输入：npm i babel-loader@6.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D    

2.在webpack.con.fig下配置如下
    module.exports = {
                module:{
                    rules:[{test:/\.js$/,use:['babel-loader'],exclude:/node_modules/}]
                    //test表示对应的文件类型,use表示文件对应的loader,exclude表示排除项
                }
    } 

3.新建babel.config.js,并配置如下
    module.exports={
                plugin:[["@babel/plugin-proposal-decorators",{legacy:true}]]
    }

在配置webpack.config.js是会多出一个exclude,它表示排除项，排除第三方包的高级语法

9.打包发布

mode的两个值development(测试阶段)与production(发布阶段)，当项目完成后，我们需要将mode的值改为production,如果有较多的改动，这样是比较麻烦的，那么我们可以在web包script字段下添加新命令或者直接在终端敲命令,这样不改动mode打包后的文件就是压缩过的

//在web包script字段下添加命令
    "dev-produc":"webpack --mode production"

//直接在终端敲
    npx webpack --mode production

10.优化生成的js文件与图片路径

打包生成的js文件会直接放在dist目录下，但是我们需要将他放在dist->js目录下

//在webpack.config.js下将出口改为'js/文件名'
output: {
        path: path.join(__dirname, './dist'),//输出文件
        filename: 'js/index.js'//输出的文件名
    },

同理，需要用到的图片也一样

//webpack.config.js下module中relus下url-loader配置项增加outputPath=images
   module: {
        rules: [
            { test: /\.jpg|png|gif$/, use: 'url-loader?limit=600&outputPath=images' },
        ]
    }

注意，如果你打包生成的文件没有设置的image这个文件夹，那么就要看看你的图片是否超过了limit设置的临界值 

11.clean-webpack-plugin插件

每次打包发布时自动清理掉 dist 目录中的旧文件，以免旧文件对新文件的影响

下载插件：npm i clean-webpack-plugin -D
配置webpack.config.js:
     const {CleanWebpackPlugin} = require('clean-webpack-plugin');
     module.exports = {
         plugins: [new CleanWebpackPlugin()]
     }

12.source-map

source-map是一个信息文件，里面存储着位置信息，开发环境下默认生成的source-map记录的是打包后的代码位置，如果源文件代码出错，会导致出错文件为源码文件，但是出错行号为打包后的代码位置，这个问题的解决如下

在webpack.config.js配置：
     module.exports = {
          devtool: "eval-source-map",
     }

当devtool的值为"eval-source-map"时，如果源码文件出错，那么就会显示正确的出错文件与正确的出错行号，但是这种和方法存在安全性问题，出错信息会直接定位到我们的出错文件与行号，建议该配置用于测试阶段

还有一种折中的办法：devtool="nosources-source-map"

在webpack.config.js配置：
     module.exports = {
          devtool: "nosources-source-map",
     }

devtool的值为"nosources-source-map"时,会给我们显示正确的出错行号，但是显示的出错文件为打包后的文件，这样就无法定位到我们的源文件从而获取源码，建议开发阶段要么不添加devtool字段，要么改为devtool="nosources-source-map" 

13.导入路径优化

导入文件时 import '../../../index.css',这种以入口文件为起点的导入方式一点文件嵌套太多会很臃，我们可以使用@表示src目录，但是在webpack中使用@需要配置

在webpack.config.js下配置：
       module.exports = {
            resolve:{
                alias:{'@':path.join(__dirname,'/src/')}
            }
       }