webpack的基本使用

基本使用

安装

要安装webpack5就要安装webpack-cli，以下是全局安装命令

bash
npm install webpack webpack-cli -g 

webpack配置文件应建在根目录名为webpack.config.js，格式为

js
module.exports={} // 要使用commonjs格式

配置属性

entry（必填）：打包入口

js
module.exports={
    entry:{
        app:"./app.js"，
        app2:"./app2.js"
    }
}

output（必填）:出口，即打包出来的文件的存放位置

js
module.exports={
    entry:{
        app:"./app.js"，
        app2:"./app2.js"
    }，
    output:{
        //由于要使用绝对路径，所以加个__dirname，表示当前目录下的绝对路径
        path:__dirname+"./dist" 
        //文件名设定，name指入口名，hash:4是指哈希值取前4位，如果打包内容发生了更新，哈希值就会更新
        filename:"[name].[chunkhash:4].bundle.js"
    }
}

mode(webpack4以后必填):可以填三个值，production(生产模式)，development（开发模式）和none（什么都不做）

js
module.exports={
    //生产模式下会对代码进行压缩和简化，提高效率
    mode: "production"
    entry:{
        app:"./app.js"，
        app2:"./app2.js"
    }，
    output:{
        path:__dirname+"./dist" 
        filename:"[name].[chunkhash:4].bundle.js"
    }
}

loader（非必填）:定义对某种类型文件的处理方案

js
//loader基本格式，在rules中写相应配置
module:{
    rules:[
        
    ]
}

plugins(非必填)：插件

js
//基本格式
plugins:[
    
]

配置基本格式

js
module.exports={
    mode: "production",//打包模式
    optimization:{},
    entry:{}，//打包入口
    output:{},//出口
    devServer:{},
    resolve:{},
    module:{},
    plugins:[],//插件
    
}

webpack处理js

babel-loader:负责将es6转化为es5

bash

npm install babel-loader @babel/core --save-dev

babel-loader的使用

js
module:{
    rules:[
        {
            test:/\.js$/,  //指对所有.js文件进行处理
            use:{ //有多个loader需要使用的时候也可以写成数组形式：use["babel-loader","xxx"]
                loader: "babel-loader",
                options:{//options中填写配置项
                    presets:[//可以将以下部分写到.babelrc中
                        [
               //需要另外安装，在命令行输入npm install @babel/preset-env --save-dev
                            '@babel/preset-env',
                            {
                                targets: {
                                    browsers: [ //通用打包规则
                                        ">1%",
                                        "last 2 versions",
                                        "not ie <=8" 
                                    ]
                                }
                            }
                        ]
                    ]
                }
            }
        }
    ]
}

ESlint:代码规范设定

要使用ESlint需要安装ESlint（bash输入npm install eslint eslint-webpack-plugin --save-dev）,然后在webpack.config.js文件中引用

js
const eslintplugin=require("eslint-webpack-plugin")
module.exports={
    plugins:[
        new eslintplugin();
    ],//插件
    
}

eslint的配置文件写在根目录下的.eslintrc.js

js
module.exports = {
    env: {
        browser: true,
        es2021: true
    },
    //继承的代码规范，常用的有eslint-config-standard和eslint-config-airbnb
    //如果要继承需要重新安装，npm install eslint-config-standard --save-dev
    extends: [
        "standard",
        "plugins:vue/strongly-recommended"
    ],
    //插件,提供eslint没有的规则，或者使用现成的规范
    plugins:[
        "vue"//还需要在extends继承
    ],
    praserOptions: {
        ecmaVersion: 6,
        sourceType: "module",
        ecmaFeature: {//如果希望代码中的jsx也检查，就加上这个
            jsx: true
        }
    },
    rules:{}//这里写eslint的规则，在官网有
}

css文件的处理

安装css-loader，bash输入npm install css-loader style-loader mini-css-extract-plugin --save-dev,以下是css-loader的使用：

js
const minicss=require("mini-css-extract-plugin")
module.exports={
    module:{
        rules:[{},{
            test:/\.css/,//处理css文件
            //顺序很重要，css-loader是让webpack识别css文件，style-loader是将css文件以style的方式插入代码中
            use:[minicss.loader,"style-loader","css-loader"]
        }],
        
    },
    plugins:[
        new minicss({
            filename: "test.bundle.css"//配置文件名
        })
    ],
}

css压缩插件css-minimizer-webpack-plugin:npm install css-minimizer-webpack-plugin --save-dev,使用方法依旧引入一下，然后在plugins中new一下即可

资源文件处理

webpack5自带资源文件处理，使用方式如下

js
module.exports={
    module:{
        rules:[{},{
            test:/\.(jpg|jpeg|png|gif|svg)$/,//处理资源文件
            type:"asset",
            parser:{
                dataUrlCondition:{
                    maxSize:5000//大于5kb的文件就单独拎出来保存，小于的就转化为base64保存在js代码中
                }
            },
            generator:{
                filename:"[name].[chunkhash][ext]"//ext是文件后缀
            }
        }],
        
    },
}

html处理

安装html-webpack-plugin

js
const htmlplugin=require("html-webpack-plugin")
module.exports={
	plugins:[
        new htmlplugin({
            template:"./index.html",//模版文件
            filename:"index.html"//处理出来文件的名字
        })
    ]
}

代码分割

对于单入口文件，为了避免所有的文件打包在一个js里面导致首屏加载过慢，可以在单入口文件里面把后面才需要的文件通过异步加载的方式进行引入，以减少文件体积。使用import方法或require.ensure加载的模块在打包的时候会自动拆分为一个独立文件

js
//例如在3000ms后才需要使用a.js
setTiomeout(() => {
    import("./a.js").then(res => {//then的作用是得到返回的内容
        console.log(res)
    })
})

对于多入口文件，为了避免重复加载同一段逻辑代码，可以将需要重复使用的代码另外缓存下来，需要在webpack.config.js中设置 splitChunks,以下代码是将第三方代码与本地代码分离的打包方法

js
module.exports={
    optimization:{
        splitChunks:{
            chunks:"all",
            cacheGroups:{//分割规则
                vendor:{
                    test: /[\\/]node_modules[\\/]/,
                    filename: "vendor.js",
                    chunks: "all",
                    minChunks: 1
                },
                common: {
                    filename: "common.js",
                    chunks: "all",
                    minChunks: 2,
                    minSize: 0
                }
            }
        }
    },
}

publicPath:打包出来的js，css文件要放到cdn上的时候使用

js
module.exports={
    output:{//出口
        publicPath:"www.xxx.com"//写cdn的地址，就会自动拼接到引用js，css的路径上面去了
    },
}