1.webpack的概念WebPack可以看作是一个模块打包器：它所做的就是分析你的项目结构，找到JavaScript模块和其他浏览器不能直接运行的扩展语言（Scss、TypeScript等）并打包转换为适合浏览器使用的格式。构建是将源代码转换成可执行的JavaScript、CSS、HTML代码，发布在网上，包括以下内容：代码转换：TypeScript编译成JavaScript，SCSS编译成CSS等文件优化：压缩JavaScript、CSS、HTML代码，压缩以及合并图片等。代码拆分：提取多个页面的公共代码，将不需要在首屏执行的代码提取出来，让其异步加载。模块合并：一个模块化项目中会有很多模块和文件，需要一个构建函数将模块分类合并到一个文件中。自动刷新：监控本地源代码变化，自动重建和刷新浏览器。代码校验：代码提交入库前，需要校验代码是否符合规范，单元测试是否通过。自动发布：代码更新后，自动构建在线发布代码并传输至发布系统。构建其实就是工程化和自动化思想在前端开发中的体现。用代码实现一系列流程，代码自动执行这一系列复杂的流程。Build为前端开发注入了更多活力，解放了我们的生产力。2.初始化项目初始化package.jsonnpminit-ypackage.json"scripts":{"build":"webpack--profile--progress--colors--display-error-details","dev":"webpack--display-modules--profile--progress--colors--display-error-details"},color输出结果有颜色，例如：耗时较长的步骤会显示为红色。Profile输出性能数据，可以看到每一步的耗时进度输出当前编译的进度，以百分比的形式呈现display-modules默认会隐藏node_modules下的modules，添加这个参数即可displaythesehiddenmodulesdisplay-error-detailsoutputdetailed全局安装的报错信息npminstallwebpack-glocalinstallationnpminstallwebpackwebpack-cli-D//-D表示需要开发环境，不是在线的，同下。一般建议本地安装，安装在自己的项目中，否则版本不同会出现不兼容的情况。3.1webpackEntry的核心概念：entry，Webpack执行构建的第一步会从Entry开始，可以抽象为input。Module：模块，在Webpack中一切都是模块，一个模块对应一个文件。Webpack会递归地从配置的Entry中查找所有依赖的模块。Chunk：代码块，一个Chunk由多个模块组成，用于代码合并和拆分。Loader：模块转换器，用于将模块原有的内容按要求转换成新的内容。Plugin：扩展插件，在Webpack构建过程的特定时刻注入扩展逻辑，改变构建结果或做你想做的事情。Output：输出结果，Webpack经过一系列处理得到最终想要的代码后输出结果。3.2配置webpacknpminstallwebpackwebpack-cli-Dcreatesrccreatedistcreateindex.html配置文件webpack.config.jsentry：配置入口文件地址output：配置导出文件地址module：配置模块，主要是用于配置不同的文件Loaderplugins:configureplugindevServer:configuredevelopmentserver//node-basedletpath=require('path');//nodemodulemodule.exports={entry:'./src/index.js',//entryoutput:{filename:'build.js',//这个路径必须是绝对路径path:path.resolve('./dist')},//退出devServer:{contentBase:'./dist',port:8080,compress:true,//服务器压缩open:true,//自动打开浏览器//hot:true//hotupdate},//开发服务器module:{},//模块配置plugins:[],//插件配置mode:'development',//可以更改模式resolve:{},//配置解析}//webpack中如何配置开发服务器webpack-dev-server配置开发服务器npmiwebpack-dev-server–DcontentBase配置开发服务运行时的文件根目录host：开发服务器监听的主机地址tocompress开发服务器是否启动gzip等压缩端口：开发服务器监听的端口devServer:{contentBase:path.resolve(__dirname,'dist'),host:'localhost',compress:true,port:8080}//开发服务器"scripts":{"build":"webpack--modedevelopment","dev":"webpack-dev-server--open--modedevelopment"}//启用本地服务npmrundeventry文件类型5.1单项+单项输出这种情况很少见，一般可以以字符串的形式出现，例如：entry:'./src/index.js',5.2多入口数组格式+单出口entry:['./源代码/index.js。js','./src/a.js']5.1。多入口+多出口有时候我们的页面可以是多个HTML页面，会有多个页面，所以我们需要多入口entry:{index:'./src/index.js',main:'./src/main.js'}，输出：{路径：path.resolve(__dirname,'dist')，文件名：'[name].[hash].js',publicPath:PUBLIC_PATH},newHtmlWebpackPlugin({minify:{removeAttributeQuotes:true},hash:true,template:'./src/index.html',chunks:['index'],filename:'index.html'}),newHtmlWebpackPlugin({minify:{removeAttributeQuotes:true},hash:true,chunks:['main'],template:'./src/main.html',filename:'main.html'})],支持加载css文件6.1什么是Loader通过使用不同的Loader,Webpack可以将不同的文件转换为JS文件，如CSS、ES6/7、JSX等。扩展名的正则表达式use:loadername,就是你要使用的模块名include/exclude:手动指定必须处理的文件夹或屏蔽不需要处理的文件夹query:提供附加装载机的设置选项。loader的三种写法useloaderuse+loader6.2css-loadernpmistyle-loadercss-loader-D配置加载器模块：{rules:[{test:/.css$/,use:['style-loader','css-loader'],//从右往左写，webpack特性include:path.join(__dirname,'./src'),exclude:/node_modules/}]},支持图片7.1手动添加图片npmifile-loaderurl-loader-Dfile-loader解决了在CSS和其他文件中导入图像路径的问题。当图片较小时，url-loader会对图片进行BASE64编码，当图片大于limit参数时，使用file-loader进行拷贝。letlogo=require('./images/logo.png');letimg=newImage();img.src=logo;document.body.appendChild(img);{test:/\.(jpg|png|gif|svg)$/,use:'url-loader',include:path.join(__dirname,'./src'),exclude:/node_modules/}7.2在CSS中引入图片也可以在CSS文件中引入图片.img-bg{background:url(./images/logo.png);width:173px;height:66px;}自动生成html8.1插件是什么插件是wepback的支柱功能webpack本身也是内置的在上面的webpack配置中使用的同一个插件系统上！插件使用npminstall插件名-D因为插件都是类，可以通过plugins数组中的新插件名使用引用方式。8.2我们希望自动生成HTML文件，并将生成的资源导入其中。npmihtml-webpack-plugin-Dminify是压缩html文件，removeAttributeQuotes是去掉属性的双引号hash。导入输出资源时，添加Upperhash以避免缓存模板模板路径插件：[newHtmlWebpackPlugin({minify:{removeAttributeQuotes:true},hash:true,template:'./src/index.html',filename:'index.html'})]分离CSS并行下载CSS和JS。当一个大的HTML文件很大时，我们可以单独提取和加载CSS。webpack4中的mini-css-extract-plugin也可以实现。但是目前bug比较多，不能分多个文件。CSS。npminstall--save-devextract-text-webpack-plugin@next{test:/\.css$/,使用：ExtractTextWebpackPlugin.extract({use:'css-loader'}),include:path.join(__dirname,'./src'),exclude:/node_modules/},plugins:[newExtractTextWebpackPlugin('css/index.css'),]处理图片路径问题constPUBLIC_PATH='/';output:{path:path.resolve(__dirname,'dist'),filename:'bundle.js',publicPath:PUBLIC_PATH},//指定打包图片的位置use:[{loader:'url-loader',options:{limit:1024,outputPath:'images/'}}],在HTML中使用图像png">
