webpack快速上手

1.下载 node.js 2.本地安装 webpack

npm install webpack webpack-cli --save-dev

3.运行 npx webpack 4.自定义Webpack配置

在根目录下创建   webpack.config.js

// 在   webpack.config.js  先简单配置
const path = require('path')
module.exports={
    entry:'./src/index.js',  //打包入口   单个
   
    output:{
        filename:'bundle.js',         //打包生成js  单个
        path:path.resolve(__dirname,'./dist'),
    },  
 }

npm i html-webpack-plugin -D   //自动打包生成html文件、不需要自己再配置

const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports={
 plugins:[
        new HtmlWebpackPlugin({
            template:'./index.html',  //打包生成的html模板
            filename:'app.html',  //打包生成的html名字
            inject:'body',    //打包生成的script标签放在html那个位置
        }),
    ],
}

1.1 每次打包自动删除上次打包的文件

npm i clean-webpack-plugin -D

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

module.exports={
	 plugins:[      
        cleanPlugin
    ],
}

1.2 开发时出现报错信息能找到是哪行

module.exports={
	 devtool:'eval-source-map'
}

1.3 实时重新加载功能

npm i webpack-dev-server

module.exports={
	 devServer:{
        static:'./dist'
    },
}

1.4 资源模块

//无需下载  直接配置
module.exports={
	module:{
		rules:[
			 {
                test:/\.png$/,
                type:'asset/resource', //生成单独文件并导出url  加载任何资源
                generator:{
                    filename:'images/[contenthash][ext]' //打包图片存放的路径 优先级高于 assetModuleFilename
                }
            },
            {
                test:/\.svg$/,
                type:'asset/inline',  //base64格式  不会在image中显示
            },
            {
                test:/\.txt$/,
                type:'asset/source',  //文本文件  不会在image中显示       
            },
            {
                test:/\.jpg$/,
                type:'asset',  //通用资源文件 在resource与inline之间选择
                parser:{
                    dataUrlCondition:{
                        maxSize:4*1024*1024   //大于4m用resource
                    }
                }
            },
		]
	}
}

抽离和压缩css

 npm i mini-css-extract-plugin -D   //webpack5才能使用  打包css文件

在模块中配置以下代码
const MinicssExtractPlugin = require('mini-css-extract-plugin')
module.export={
	 plugins:[
       new MinicssExtractPlugin({
            filename:'style/[contenthash].css'  //打包生成放在指定位置
        })
    ],
    module:{
    	 rules:[
            {test:/\.css$/,use:[MinicssExtractPlugin.loader,'css-loader']}, 
        ]
    }

}

 npm i css-minimizer-webpack-plugin -D  //将打包抽离和压缩的css进行压缩

//在模块中配置以下代码
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
module.exports={
	mode:'production',  //  production 生产  development
	
	 optimization:{
	        minimizer:[
	            new CssMinimizerPlugin()
	        ]
	    }
}

// 打包项目中font字体

module.exports={
	module:{
		rules:[
			 {
                test:/\.(woff|woff2|eot|ttf|otf)$/i,  //打包font字体
                type:'asset/resource'
            }
		]
	}
}

打包项目中 csv tsv xml 文件

npm i csv-loader xml-loader -D

module.exports={
	module:{
		rules:[
			 {               
                test:/\.(csv|tsv)$/,   //打包项目中 csv tsv  文件
                use:'csv-loader'
            },
            {
                test:/\.xml$/,   //打包项目中 xml 文件
                use:'xml-loader'
            }
		]
	}
}

打包自定义json模块parser

npm i toml yaml json5 -D

const toml = require('toml')
const yaml = require('yaml')
const json5 = require('json5')
module.exports={
	module:{
		rules:[
			 {
                test:/\.toml$/,   //打包项目中 xml 文件
                type:'json',
                parser:{
                    parse:toml.parse
                }
            },
            {
                test:/\.yaml$/,   //打包项目中 xml 文件
                type:'json',
                parser:{
                    parse:yaml.parse
                }
            },
            {
                test:/\.json5$/,   //打包项目中 xml 文件
                type:'json',
                parser:{
                    parse:json5.parse
                }
            },
		]
	}
}

将es6转es5

 npm i babel-loader @babel/core @babel/preset-env @babel/plugin-transform-runtime @babel/runtime -D

babel-loader  //在webpack里应用babel解析es6的桥梁
@babel/core   //babel的核心模块
@babel/preset-env    //babel预设  一组babel插件的集合

module.exports={
	module:{
		rules:[
			 {
                test:/\.js$/,  //es6转es5
                exclude:/node_modules/,  // 排除里面的js
                use:{
                    loader:'babel-loader',
                    options:{
                        plugins:['@babel/preset-env']
                    }
                }
            }, //打包处理高级js文件
		]
	}
}

代码分离方法 1.入口起点

module.exports={
 
    entry:{
         index:'./src/index.js' ,
         other :'./src/hello.js'                      //打包入口  多个
    },
    output:{
        filename:'[name].bundle.js',     //打包生成js  多个
    },  
}

2.防止重复

module.exports={
	entry:{
        index:{
            import:'./src/index.js',
            dependOn:'shared'
        },
        other:{
            import :'./src/hello.js',
            dependOn:'shared'
        },
        shared:'loadsh'    //将含有loadsh模块打包到shared
    },
     optimization:{
         splitChunks:{
             chunks:'all'    //将公共代码抽离
        }
    }
}

完整代码

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const cleanPlugin = new CleanWebpackPlugin()
const MinicssExtractPlugin = require('mini-css-extract-plugin')
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
const toml = require('toml')
const yaml = require('yaml')
const json5 = require('json5')
module.exports={
    entry:'./src/index.js',  //打包入口   单个
    // entry:{
    //      index:'./src/index.js' ,
    //      other :'./src/aaa.js'                      //d打包入口  多个
    // },
    // entry:{
    //     index:{
    //         import:'./src/index.js',
    //         dependOn:'shared'
    //     },
    //     other:{
    //         import :'./src/hello.js',
    //         dependOn:'shared'
    //     },
    //     shared:'loadsh'    //将含有loadsh模块打包到shared
    // },
    output:{
        // filename:'bundle.js',         //打包生成js  单个
        filename:'[name].bundle.js',     //打包生成js  多个
        path:path.resolve(__dirname,'./dist'),
        assetModuleFilename:'images/[contenthash][ext]' //打包图片存放的路径
    },  //打包出口
    mode:'production',  //  production 生产  development
    devtool:'eval-source-map', //开发时出现报错信息能找到是哪行
    devServer:{
        static:'./dist'
        // open:true,  //自动打开浏览器
        // host:'127.0.0.1',  //地址
        // port:80  //选择打开端口号
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:'./index.html',  //打包生成的html模板
            filename:'app.html',  //打包生成的html名字
            inject:'body',    //打包生成的script标签放在html那个位置
        }),
        new MinicssExtractPlugin({
            filename:'style/[contenthash].css'  //打包生成放在指定位置
        }),
        cleanPlugin
    ],
    module:{
        rules:[
            {
                test:/\.png$/,
                type:'asset/resource', //生成单独文件并导出url  加载任何资源
                generator:{
                    filename:'images/[contenthash][ext]' //打包图片存放的路径 优先级高于 assetModuleFilename
                }
            },
            {
                test:/\.svg$/,
                type:'asset/inline',  //base64格式  不会在image中显示
               
            },
            {
                test:/\.txt$/,
                type:'asset/source',  //文本文件  不会在image中显示
               
            },
            {
                test:/\.jpg$/,
                type:'asset',  //通用资源文件 在resource与inline之间选择
                parser:{
                    dataUrlCondition:{
                        maxSize:4*1024*1024   //大于4m用resource
                    }
                }
               
            },
            {test:/\.css$/,use:[MinicssExtractPlugin.loader,'css-loader']},  //打包处理css文件  loader从后往前调用
            {test:/\.less$/,use:['style-loader','css-loader','less-loader']},  //打包处理less文件  loader从后往前调用
            {
                test:/\.(woff|woff2|eot|ttf|otf)$/i,  //打包font字体
                type:'asset/resource'
            },
            {

                test:/\.(csv|tsv)$/,   //打包项目中 csv tsv  文件
                use:'csv-loader'
            },
            {
                test:/\.xml$/,   //打包项目中 xml 文件
                use:'xml-loader'
            },
            {
                test:/\.toml$/,   //打包项目中 xml 文件
                type:'json',
                parser:{
                    parse:toml.parse
                }
            },
            {
                test:/\.yaml$/,   //打包项目中 xml 文件
                type:'json',
                parser:{
                    parse:yaml.parse
                }
            },
            {
                test:/\.json5$/,   //打包项目中 xml 文件
                type:'json',
                parser:{
                    parse:json5.parse
                }
            },
            {
                test:/\.js$/,
                exclude:/node_modules/,
                use:{
                    loader:'babel-loader',
                    options:{
                        presets:['@babel/preset-env'],
                        plugins:[
                            ['@babel/plugin-transform-runtime']
                        ]
                    }
                }
            }, //打包处理高级js文件



        ]
    },
    optimization:{
        minimizer:[
            new CssMinimizerPlugin()     //将打包抽离和压缩的css进行压缩
        ],
        splitChunks:{
            chunks:'all'    //将公共代码抽离
        }
    }
}