一、webpack1、概念webpack是js静态模块的打包工具。在处理时，它会从一个或多个内部条目构建依赖关系，并将每个模块组合成一个或多个包。作为静态资源，用于展示内容。2.模块入口（entry）输出（output）加载器插件（plugin）模式（mode）浏览器兼容性（browsercompatibility）环境（environment）3.入口表示webpack应该使用哪个模块来构建依赖。webpack.config.jsmodule.exports={entry:'./path/to/my/entry/file.js',};4.输出告诉webpack在哪里导出它创建的包，以及如何命名这些文件。主输出文件默认是./dist/main.js，其他生成的文件默认放在./dist文件夹下constpath=require('path');module.exports={entry:'./path/to/my/entry/file.js',output:{path:path.resolve(__dirname,'dist'),文件名:'my-first-webpack.bundle.js',},};5.loaderloader使webpack能够处理其他类型的文件，并将它们转换成有效的模块供应用程序使用，并添加到依赖图中。loader有两个属性：usetestconstpath=require('path');module.exports={output:{filename:'my-first-webpack.bundle.js',},module:{rules:[{test:/\.txt$/,使用:'raw-loader'}],},};file-loader:将文件输出到文件夹，代码中通过相对URL引用输出文件文件小source-map-loader：加载额外的SourceMap文件，方便断点调试image-loader：加载压缩图片文件babel-loader：ES6转ES5css-loader：加载CSS，支持模块化、压缩、文件导入其他特性style-loader：将CSS代码注入JavaScript，通过DOM操作加载CSS。eslint-loader：通过ESLint6检查JavaScript代码。插件（plugin）加载器用于转换某些类型的模块，而插件可用于执行更广泛的任务。包括：打包优化、资源管理、环境变量的注入constHtmlWebpackPlugin=require('html-webpack-plugin');//通过npm=require('webpack')安装constwebpack;//用于访问内置插件module.exports={module:{rules:[{test:/\.txt$/,use:'raw-loader'}],},plugins:[newHtmlWebpackPlugin({template:'./src/index.html'})],};7.Mode通过选择development、production或none中的一种来设置mode参数，可以在相应的环境中启用webpack内置的优化。它的默认值是productionmodule.exports={mode:'production',};二、吞
