1、webpack官网：https://webpack.js.org1.1。什么是网页包？webpack是前端资源构建工具，静态模块打包器。从webpack的角度来看，所有的前端资源文件（js/json/css/image/less/sass...）都会被当作模块来处理。它会根据模块依赖进行静态分析，并打包生成相应的静态资源。webpack可以解决目前web开发面临的难点，webpack提供：友好的模块化支持代码压缩混淆处理js/css兼容问题性能优化目前企业中大部分的前端项目都是基于webpack（vue/react）打包构建的.从v4.0.0开始，webpack可以在不引入配置文件的情况下打包项目。但是，它的可配置性仍然很高，可以很好地满足您的需求。默认配置文件：webpack.config.js或webpackfile.js1.2，webpack的五个核心概念入口入口本项目应该使用哪个模块作为构建其内部依赖图的开始（指定打包入口文件）outputoutput它创建的bundle，以及这些文件的命名方式，默认为./distmodemode选择development或者production中的一个，设置mode参数，可以在相应的启用webpack内置的优化加载器模式。webpack可以处理那些非js文件（webpack本身只懂js），而plugin插件可以用来执行更广泛的任务。插件的范围从打包优化和压缩，一直到重新定义环境中的变量。插件接口非常强大，可用于处理各种各样的任务。1.3.安装webpack有两种安装方式：全局安装npmi-gwebpack@4webpack-cli@3本地安装（推荐）webpack在node环境下运行，Node>=8.10andnpm>=5.6npminit-ynpmi-Dwebpack@4webpack-cli@3#webpack打包使用的核心代码#webpack-cli打包和使用的命令安装完成后可以使用前面提到的npx命令查看webpack的版本判断是否安装成功:npxwebpack--version在package.json文件中配置webpack运行脚本命令"scripts":{"dev":"webpack"},1.4,webpack基本都是用来在下面创建一个webpack.config.js文件项目根目录，这个文件是webpack默认的配置文件名，后面可以在这个目录下运行打包webpack。模块化规范commonjsconstpath=require('path')module.exports={#打包方式开发|productionmode:'development',#开发工具配置//开发时配置source-map，生产环境要关闭//作用：如果代码有错，可以帮我们在src目录下定位。Programdevtool:'source-map',#项目入口entry:'./src/index.js',##对象多入口//entry:{'main':'./src/main.js'}//key对应打包后的文件名，或者路径值入口文件##数组合并//entry:['./src/index.js','./src/main.js']#项目导出输出：{//打包生成的文件路径，路径必须使用绝对路径path:path.resolve(__dirname,'dist'),//打包生成后的主要入口js文件filename:'js/[name].js'//[name]默认的名字是main，如果你的entry是一个对象，那么name就是key值。//filename:'[name].[hash:8].js'//[hash]随机生成一个21位的字符串，支持截取[hash:截取长度]}}1.5、配置访问入口模板文件创建一个public项目根目录下的目录，并在该目录下创建索引。html文件，使用webpack的html-webpack-plugin插件，项目web入口文件模块可以使用此文件#安装npmi-Dhtml-webpack-plugin@4#引入//webpack插件帮助webpack打包生成，创建index.html文件constHtmlWebpackPlugin=require('html-webpack-plugin')//删除打包后的dist目录const{ClearWebpackPlugin}=require('clean-webpack-plugin')#使用webpack.config.jsplugins:[newHtmlWebpackPlugin(),newHtmlWebpackPlugin({//templatetemplate:path.resolve(__dirname,'public/index.html'),})]1.6,devServer我们已经可以使用打包工具对写好的代码进行打包，但是在操作的过程中，你可能会发现有一个比较麻烦的地方：一旦修改了代码，又要重新打包，那么是在开发阶段吗？写完代码自动编译看看效果最好提供web服务的功能？答案是肯定的，就是webpack-dev-server自动打包工具#安装webpack-dev-servernpmi-Dwebpack-dev-server@3#配置node环境web环境//开发环境服务配置打包时放在内存中，不会在磁盘上生成dist目录devServer:{//运行代码目录contentBase:path.resolve(__dirname,'dist'),//打包进度progress:true,#端口号port:8080,//域名host:'localhost',//自动打开浏览器open:true,//安静模式，除了一些基本的启动信息，不显示其他内容quiet:true,//serverproxy-->解决开发环境中的跨域问题proxy:{//oncedevServer服务器接收到/api开头的请求，将请求转发给另一台服务器'/api':{target:'http://localhost:3000',//发送请求时，请求路径被改写：remove/apipathRewrite:{'^/api':''}}}}#package.json中的脚本配置命令"serve":"webpack-dev-server"有2种前端路由模式，1。hash方式，锚点http://xxx.com/#/aaa//事件touch监听hash变化window.onhashchange=function(){console.log(getHash());}window.onload=function(){console.log(getHash());}//获取当前地址栏中的hash值函数getHash(){leturlHash=(location.hash=''|location.hash='#/')?'#/登录'：位置。hashreturnurlHash.slice(2)}2、h5提供history模式，和普通路由一样，但是默认不刷新，需要web服务器支持1.7，loader1.7.1，loader概述在实际开发中，webpackOnly.js后缀的模块可以打包处理。其他非.js后缀的模块默认无法被webpack处理，需要调用loader正常打包，否则会报错！loader可以辅助webpack对特定的文件模块进行打包处理，例如：sass-loader可以对.,打包处理css文件上面说到webpack默认是不能打包css文件的。如果打包时没有安装cssloader，包含css文件的项目会报错：WeneedtoinstallaCSSloader让webpack帮我们打包css文件所以如果要打包css文件，需要安装cssloader.这个loader的安装命令是：npmi-Dstyle-loadercss-loader安装好需要的loader之后，需要配置webpack，告诉webpack遇到一个css后缀的文件，应该由哪个loader来处理。将css-loader规则添加到webpack打包命令对应模块的rules数组中：//loadermodule:{//rulerules:[{//正则匹配loader解析文件扩展名test:/\.css$/,//loaderexecutionorder//执行顺序写在一行：从右到左，写在多行：从下往上执行use:["style-loader","css-loader"]}],}在写loaderuse注意：-use数组中指定的loader的顺序是固定的-多个loader的调用顺序是：从右到左，从下到上（倒序执行）配置好对应的cssloader之后,webpack可以打包对应的css文件1.7.3,打包处理scss文件#安装css预处理loadernpmi-Dsass-loader@10node-sass@5style-loadercss-loader#loaderconfigurationmodule:{rules:[//scss处理{test:/\.scss$/,//执行顺序从右到边，从下到上use:["style-loader","css-loader","sass-loader"]}]}1.8。配置图片处理#安装npmi-Durl-loaderfile-loaderhtml-loader@1#loader配置模块：{rules:[//imageprocessing{test:/\.(png|jpeg|jpg|gif)$/i,use:[{loader:'url-loader',options:{//如果图片小于8kb，将进行base64处理//优点：减少请求次数（减轻服务器压力)//缺点：图片尺寸会变大（文件请求速度变慢）limit:8*1024,//打包后的路径和文件名[ext]extensionname:'img/[name].[ext]',//打包后的文件指定访问路径前缀publicPath:'/'}}]},{test:/\.html$/,//在html中处理img（负责导入img，以便被使用url-loader处理)loader:['html-loader']}]} 1.9.项目中处理字体资源等静态资源不需要打包，直接复制打包到目标目录即可#安装npmi-Dcopy-webpack-plugin@6#引入constCopyPlugin=require('copy-webpack-plugin')#plugins配置plugins:[//拷贝静态资源newCopyPlugin({patterns:[{//sourcefrom:path.resolve(__dirname,'./src/iconfont/'),//targetto:path.resolve(__dirname,'./dist/iconfont')}]})]1.10、js兼容处理webpack是不需要引入任何可以打包js的loader，但是不会做任何js兼容的处理，而我们写的项目需要在不同的浏览器中运行。这时候我们就需要在打包过程中对应处理js的兼容性使用babe1完成相应的js兼容性处理#按需加载进行兼容性处理npmi-Dbabel-loader@babel/core@babel/preset-envcore-js#loader配置module:{rules:[//jscompatibleProcess{test:/\.js$/,//excludeexclude:/node_modules/,use:[{loader:'babel-loader',options:{presets:[['@babel/preset-env',{//按需加载useBuiltIns:'usage',//指定core-js版本corejs:3,//兼容哪个版本的浏览器targets:{chrome:'50',firefox:'50',ie:'9',safari:'10',edge:'17'}}]]}}]}]}1.11、艺术模板整合npmi-Dart-templateart-template-loadermodule.exports={module:{rules:[{test:/\.art$/,loader:"art-template-loader"}]}}#注意：babel处理js，有兼容性问题，可以选择处理高版本的js，或者你可以Process1.12,externals忽略不进入的包。比如在项目中从CDN导入jQuery，而不是打包进去。nameinthewindowobjectjquery:'$'}1.13、省略路径别名和import后缀//解析模块的规则resolve:{//配置解析模块的路径别名：优点是缩写路径，缺点是没有Promptalias:{//定义一个@变量，导入时可以用'@':path.resolve(__dirname,'./src')},//配置省略文件路径的后缀名import'@/index'//如果省略，建议不要重复文件扩展名：['.js','.json','.art']}
