前言Webpack是目前最流行的前端资源模块化管理和打包工具。可以将很多松散的模块按照依赖和规则打包成前端资源用于符号生产环境部署，也可以拆分按需加载的模块代码。本文将介绍webpack的配置，配置Html模板，导入CSS文件等。什么是webpack？webpack可以看成是一个模拟打包器：它所做的就是分析你的项目结构，找到JavaScript模块和其他浏览器webpack可以做些什么来扩展不能直接运行的语言（Scss、TypeScript等），打包成适合浏览器使用的格式？代码转换（比如es6转es5，less转sass）文件优化（比如打包过程中压缩代码体积，合并文件等）代码切分（比如开发多个页面时，把公共页面抽走,路由懒加载功能)模块合并(比如将多个模块合并为一个模块)自动刷新(帮我们启动一个本地服务来更新我们代码改动后的页面)codevalidation(验证我们的代码是否符合规范)自动发布（打包完成后可以实现自动补全功能，可以将打包后的代码发布到服务器）webpack基础配置桌面构建webpack文件夹mkdirwebpack初始化项目yarninit-y初始化项目生成package.json文件安装依赖yarnaddwebpackwebpack-cli-D启动devServer需要安装webpack-dev-serveryarnaddwebpack-dev-server-D新建src文件夹mkdirsrcsrc新建index.js文件touchindex.jswebpack可以做一个零配置的打包工具，对JS模块进行打包，然后输出打包。支持JS模块化。使用webpack打包时，默认会打包src下的入口文件index.js。如果没有设置模式，package输出的文件会自动压缩。npxwebpack设置模式为开发模式，打包后的文件不压缩。npxwebpack--modedevelopment注意：在nodev8.2之后，会有一个npxnpx，执行npxwebpack命令时会执行bin中的文件，此时webpack会自动在bin中搜索index.js文件项目的src目录，然后打包生成dist目录下有打包好的main.js文件生成目录配置webpack.config.js新建webpack.config.js文件在webpack项目下新建webpack.config.js文件异步默认配置文件名iswebpack.config.js//webpack是node写的node的写法letpath=require('path')module.exports={mode:'development',//mode默认两种生产开发开发模式entry:'./src/索引。js',//入口文件output:{filename:'bundle.js',//打包文件名path:path.resolve('dist')//路径必须是绝对路径，在当前目录下生成一个distDirectory}}打包后如果项目目录配置脚本觉得名字太长，在package.json配置一些脚本"scripts":{"build":"webpack--configwebpack.config.js","dev":"webpack-dev-server"}，这里的--config指的是添加配置文件，webpack.config.js文件名执行npmrunbuild就是我们的打包文件，这个是生产环境和线上npm需要执行的文件rundev是我们开发环境中的文件配置入口文件类型单入口单出口entry:'./src/index.js'多入口单出口有时候我们有多个页面，需要用到多个出口入口:['./src/index.js','./src/other.js']多入口多出口//webpack是node写的letpath=require('path');module.exports={entry:{index:'./src/index.js',other:'./src/other.js'},output:{filename:'[name].js',path:path.resolve('dist')},}此时运行npmrunbuild，会看到打包好的两个js文件，配置html模板安装插件yarnaddhtml-webpack-plugin-D到创建一个新索引。html在src目录下新建index.html文件touchindex.html单页开发然后在webpack.config.js中引用//webpack是node写的node的写法letpath=require('path');letHtmlWebpackPlugin=require('html-webpack-plugin');module.exports={entry:'./src/index.js',//entryfileoutput:{//添加hash可以防止文件缓存，4位每次都会生成hashstringfilename:'bundle.[hash:4].js',path:path.resolve('dist')},plugins:[//使用插件newthisclassnewHtmlWebpackPlugin({//在src目录下创建一个index.html模板:'./src/index.html',hash:true,//打包后的bundle.js后面会加上一个hash字符串})]}执行然后npmrunbuild执行打包之后，自动引入JS进行多页面开发。开发的时候有时候页面不止一个，需要配置多个页面。我们删除之前的dist目录，在webpack.config.js中引用//webpack是node写的node的写法letpath=require('path');letHtmlWebpackPlugin=require('html-webpack-plugin');module.exports={//多页开发，如何配置多页入口：{index:'./src/index.js',other:'./src/other.js'},//导出文件output:{filename:'[name].js',path:path.resolve('dist')},plugins:[newHtmlWebpackPlugin({template:'./src/index.html',filename:'index.html',chunks:['index']//对应，index.js对应index.html}),newHtmlWebpackPlugin({template:'./src/other.html',filename:'other.html',chunks:['other']//对应，login.js对应login.html})]}执行再执行npmrunbuild，会看到dist目录下多了两个文件配置css模块安装yarnaddstyle-loadercss-loader-Dyarnaddlessless-loader-D在src目录新建一个文件创建在src目录下新建style.css文件并新建style.less文件src/index.jsimport'./style.css';导入“./style.less”；webpack.config.js//webpack写的是node节点的写法letpath=require('path');//webpack.config.jsmodule.exports={entry:{index:'./src/index.jsjs'},输出:{filename:'bundle.js',path:path.resolve('dist')},module:{rules:[{test:/\.css$/,//解析cssuse:['style-loader','css-loader']//从右往左解析}]}}然后执行npmrunbuild执行后，对目录进行截图拆分单个CSS安装yarnaddmini-css-extract-plugin-D新建文件并在src文件下新建一个css文件在less文件css文件下新建一个style.css文件在less文件下新建一个style.less文件index.jsimport'./css/style.css';导入'./less/style.less'；webpack.config.jsletMiniCssExtractPlugin=require('mini-css-extract-plugin');module.exports={模块：{规则：[{测试：/\.css$/，使用：[MiniCssExtractPlugin.loader，'css-loader']}]},plugins:[newMiniCssExtractPlugin({filename:'css/ming.css'})]}执行后目录截图拆分为多个cssindex.jsimport'./css/style.css';导入'./css/reset.较少的';webpack.config,jsletExtractTextWebpackPlugin=require('extract-text-webpack-plugin');letstyleLess=newExtractTextWebpackPlugin('css/style.css');letresetCss=newExtractTextWebpackPlugin('css/reset.css');module.exports={模块：{规则：[{测试：/\.css$/,使用:resetCss.extract({使用:'css-loader'})},{测试:/\.less$/,使用:styleLess.extract({使用:'css-loader'})}]},plugins:[styleLess,resetCss]}执行后，对目录进行截图，导入图片，打包安装yarnaddfile-loaderurl-loader-Dfile-loader会默认在内部生成图片并发送到构建目录。url-loader是base64编码的显示图片的方法JS创建图片并importsrc/index.jsimportlogofrom'./logo.jpg'//导入图片，返回结果是新的图片地址让image=newImage();image.src='./logo.jpg'//是普通字符串document.body.appendChild(image);webpack.config.js{test:/\.(jpg|png|gif|svg)$/,使用:'url-loader',include:path.join(__dirname,'./src'),exclude:/node_modules/}pageimg参考图片安装yarnaddhtml-withimg-loader-Dsrc/index.cssdiv{width:952px;高度：249px；背景：url("./logo.jpg")}src/index.jsimport'./index.css'webpack.config.jsrules:[{test:/\.(png|jpg|gif)$/,use:'file-loader'},]在webpack.config中引入字体图片和svg图片。jsrules:[{test:/\.(png|jpg|gif)$/,//做一个限制，当我们的图片小于多少k活时，使用base64转换//否则使用file-loader生成一个实图使用:'url-loader',options:{limit:200*1024}},]src/index.js
