webpack学习笔记

m0_64705796

已于 2023-06-14 16:13:41 修改

阅读量131

点赞数

文章标签： webpack

于 2023-05-08 15:18:48 首次发布

本文链接：https://blog.csdn.net/m0_64705796/article/details/130559225

版权

webpack.config.js文件配置

ES6模块化

模块化的概念·前端模块化的语法
模块化的概念
- 概念:ES6模块化跟nodejs的模块化类似，是指将程序拆分为多个模块（针对前端一个就是一个模块)，模块之间是不可见的，可以通过引入语法来在一个js模块里引入另一个模块，可以搭配暴露语法可以在一个模块中使用另一个模块里的内容。
- 作用。方便管理。提高程序的扩展性。避免全局变量的污染。语法
- 引入
```
import "js文件的路径"
```
  - 引入后会立即执行js里面的代码，不能省略.js的后缀
  - 需要将script中的type改为module
  - 需要以服务器的地方来打开，比如live server或后端的服务器（比如localhost）地址打开
```
<script src="js模块的路径" type='module'></script>
```
- 暴露
```
1. 完全暴露
export default{    
//属性名：属性值第一种：引入的时候只能用一个变量去接收,不能使用解构赋值
import 变量名 from "模块的路径";
2. 不完全暴露
    export {    
//属性名：属性值
//第二种只能使用解构赋值
import {变量名1,变量名2} from "模块的路径";
```
- 细节
  - 同一个模块引入多次，但只会执行一次
- 不足
  - ES6模块化只支持JavaScript模块

webpack

背景

项目中出现的问题
- 兼容问题：目前普及使用ES6，但ES6全系不支持ie。但有的项目需要兼容低版本，意味着要写两套js代码
- 前端模块化：目前只支持js模块，不支持其他的非js模块。
- 页面引入文件过多，不方便管：项目中每个页面可能会引入大量的css、js等，会导致页面上`以及有很多的引入文件的代码，`难以记忆以及维护.并且有的js之间还有一个先后引入顺序，比如jQuery以及自己写的代码
- 重复繁琐工作:项目开发过程中，会面临一些纯体力活，每次测试都需要对代码进行压缩、混淆等一些问题。
解决：webpack

概念

webpack是一款前端的资源打包工具，它可以对项目中各个文件的引入关系进行分析，将文件的引入关系变得简单同时能够将浏览器不能直接识别的文件进行打包处理，并能够直接在浏览器中使用。
理解
webpack就相当于是文件的处理中心，可以将页面中引入的各个文件统一进行打包处理，处理后页面只需要引入打包后的js文件即可

webpack 安装

webpack是npm提供的包，所以需要npm下载
```
npm i webpack webpack-cli -D
```

webpack命令执行（体验）

打包项目根目录下的./src/js/index.js:在项目根目录下打开终端，输入命令
```
webpack ./src/js/index.js  -o ./dist
```
- 该命令会将index.js以及里面引入的其他js模块进行打包，最后打包为一个main.js并放入到dist目录下

webpack的配置文件

背景：初始的webpack执行命令只能打包js模块并且指定的打包文件名，还是不方便。最终还是会通过webpack的配置文件来决定webpack如何进行打包

基本结构

在项目根目录下新增一个webpack.config.js，编写初始代码

webpack.config.js:
//处理路径的nodejs内置的模块
const path = require('path');
module.exports = {   
    // 1. 定义入口文件：指定从哪里开始打包    
    entry: {        
        index: "./src/js/index.js",
        login: "./src/js/login.js",
        register: "./src/js/register.js"
    },    
    // 2. 定义出口文件，指定打包后的js文件路径和名字    
    output: {       
        //指定输出路径        
        path:path.resolve(__dirname,"dist/"),        
        //[name]:表示跟页面同名        
        filename:"js/[name].js"   
    }
}

优化配置

let pages=['index','login','register'];
const path = require('path');
module.exports = {   
    // 1. 定义入口文件：指定从哪里开始打包    
    entry: {       
        ...pages.reduce((data,page)=>{
            return{
                ...data
                [page]:"./src/js/${page}.js"
            }
        },{})
        //执行结果
        index: "./src/js/index.js",
        login: "./src/js/login.js",
        register: "./src/js/register.js"
    },    
    // 2. 定义出口文件，指定打包后的js文件路径和名字    
    output: {       
        //指定输出路径        
        path:path.resolve(__dirname,"dist/"),        
        //[name]:表示跟页面同名        
        filename:"js/[name].js"   
    }
}

注意点
- webpack在执行时会自动寻找项目的根目录(跟package.json同目录)下的webpack.config.js文件并作为配置文件
执行打包命令(临时过渡)
```
npx webpack
```

webpack 基本配置

打包模式的设置

development:开发模式，代码本身不会被压缩、混淆，保留注释
production:生产模式,代码进行压缩、混淆，不保留注释，默认模式

webpack.config.js:
module.exports ={    
    ...    
    mode:"development"
}

1.HTML页面自动引入js文件：webpack插件

下载对应的包

 npm i html-webpack-plugin -D

修改webpack.config.js

 webpack.config.js:
   const htmlWebpackPlugin = require("html-webpack-plugin");
   module.exports ={   
       ...   
      plugins:[        
          new htmlWebpackPlugin({            
              template:"./src/index.html",
           //设置要打包的HTML文件           
              filename:"./index.html",
              //设置打包后的html路径            
              chunks:['index'],
              //当前打包后的html引入的js的名字      
          })   
      ]
}

重新打包

配置优化

function getHTMLPluginList(){   
    let arr=[];    
    htmlNameArray.forEach(function(htmlName){        
        arr.push(new HtmlWebpackPlugin({                         
            template:`./src/html/${htmlName}.html`,//参照项目根目录  
            filename:`./html/${htmlName}.html`,//参照dist文件            
            chunks:[htmlName]       
          }));    
    });   
    return arr;
}
module.exports={    
    ......    
    plugins:[        
        ...getHTMLPluginList()   
    ]}


//方法二
let pages=['index','login','register']
module.exports={    
    ......    
    plugins:[        
      ...pages.map(page=>`new HtmlWebpackPlugin({                         
            template:`./src/html/${pages}.html`,//参照项目根目录  
            filename:`./html/${pages}.html`,//参照dist文件            
            chunks:[pages]       
          })`)
    ]
}

2.打包scss成独立的 css文件

下载所需包

   npm i sass-loader css-loader mini-css-extract-plugin  -D

单独安装node-sass包

npm i node-sass -D --ass_binary_site=https://npm.taobao.org/mirrors/node-sass

修改webpack-config.js，用于配置sass

const  MiniCssExtractPlugin= require("mini-css-extract-plugin");
module.exports = {   
    ...    
    module:{       
        rules:[            
            //打包scss            
            {                
                test:/\.scss$/i,                
                use:[MiniCssExtractPlugin.loader,'css-loader','sass-loader']           
            }       
        ]    
    },    
    plugins:[       
        ...,       
        //设置scss解析后要打包的css路径        
        new MiniCssExtractPlugin({        
        filename:"css/[name].css"        
        })   
        ]}
}

在需要使用scss的页面所属js中引入对应scss文件即可。

 index.js:...import "./index.scss";

重新打包

3.复制文件：某些文件无需处理，直接拷贝到dist目录下

下载copy-webpack-plugin

npm i copy-webpack-plugin -D

配置代码:webpack.config.js

const  copyWebpackPlugin = require("copy-webpack-plugin");
   module.exports = {   
       ...    
       plugins:[      
           new copyWebpackPlugin({            
               //规定from是要复制的文件夹，to就是复制后的文件夹路径            
               patterns: [                
                   {                   
                       from: "./src/static",                   
                       to: './static'               
                   },                
                   //继续添加                
                   // {                
                   // }           
               ]       
           })   
       ]
}

重新打包

4.最小化js和css设置

下载对应的包

npm i terser-webpack-plugin css-minimizer-webpack-plugin -D

修改配置文件

 const TerserWebpackPlugin = require('terser-webpack-plugin');
   const CssMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin');
   module.exports ={    
       ...    
       // 对生产环境进行优化    
       optimization: {        
           minimize: true,       
           // 压缩代码最小化处理       
           minimizer: [            
               new TerserWebpackPlugin(),            
               new CssMinimizerWebpackPlugin()       
           ],    
       }
};

重新打包

5.全局配置第三方库，比如jQuery/bootstrp

修改配置文件
在其他js中，直接使用$来使用jQuery

配置jQuery
//1.下载jQuery
npm i  jquery
//2.webpack.config.js里面配置
const Webpack = require("webpack");
module.exports ={   
    ...    plugins:[       
        ...       
        //页面上通过$来使用jQuery        
        new Webpack.ProvidePlugin({            
            "$":"jquery"        
        })   
    ]}
}

配置bootstrp
//1.下载bootstrap
npm i bootstrap@4 popper.js@1.16.1
//2.在要使用bootstrap样式的页面主JS文件中引入bootstrap文件
import 'bootstrap/dist/css/bootstrap.min.css';//参照node_modules文件的相对路径
import 'bootstrap/dist/js/bootstrap.min.js';//参照node_modules文件的相对路径

6. 打包图片

主要作用:将CSS和HTML中的图片进行打包处理，并将小图片转为base64格式(字符串表示图);

实现

下载第三方插件url-loader、file-loader和html-withimg-loader，实现图片资源打包；
```
npm i url-loader file-loader html-withimg-loader -D
```

配置webpack.config.js文件，实现图片资源打包配置:

module:{    
    rules:[       
      ......       
        {            
          test:/(\.(jpg)|(png)|(jpeg)|(gif)|(svg)|(psd)|(tif)|(bmp)|(webp))$/i,            
            type:'javascript/auto',           
            use:{                
                loader:'url-loader',               
                options:{                  
                    limit:1024*10,//将指定大下以下的图片转为base64格式                   
                    outputPath:'./image/',//打包后的图片输出保存到指定文件路径下,参照dist指定路径  
                    esModule:false//解决兼容问题              
                }          
            }       
        },       
        {            
            test:/\.html$/i,           
            use:['html-withimg-loader']        
        }   
    ]}

执行npx webpack命令进行打包
```
npx webpack
```

通常项目优化都是在项目需要上线前才进行，所以下列优化配置我们都在生产环境 webpack.prod.config.js 进行配置：

一、清除无用文件

1、下载

npm i clean-webpack-plugin -D

2、配置

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

module.exports = merge(base, {    
    mode: 'production',   
    plugins: [        new CleanWebpackPlugin()    ]
});