Webpack 打包资源篇

<section data-tools="新媒体排版" data-id="13439" data-style-type="9" style="visibility: visible;"> <section mpa-from-tpl="t" style="max-width: 100%; visibility: visible;"><section data-id="94052" mpa-from-tpl="t" style="max-width: 100%; visibility: visible;"><section style="width: 100%; max-width: 100%; visibility: visible;" data-width="100%" mpa-from-tpl="t"><section data-bgless="spin" data-bglessp="280" data-bgopacity="50%" style="width: 5em; height: 5em; background: rgb(109, 143, 159); border-bottom-right-radius: 100%; margin-bottom: -4.8em; max-width: 100%; visibility: visible;" mpa-from-tpl="t" data-darkmode-bgcolor-15868677390408="rgb(109, 143, 159)" data-darkmode-original-bgcolor-15868677390408="rgb(109, 143, 159)" data-style="width: 5em; height: 5em; background: rgb(109, 143, 159); border-bottom-right-radius: 100%; margin-bottom: -4.8em; max-width: 100%;" class="js_darkmode__0"> </section><section style="padding: 0px 0.3em 0px 0.2em; max-width: 100%; visibility: visible;" mpa-from-tpl="t"><section style="box-shadow: rgb(230, 230, 230) 0px 0px 3px; margin: 0px auto; border-width: 1px; border-style: solid; border-color: rgb(240, 240, 240); transform: rotate(0deg); max-width: 100%; visibility: visible;" mpa-from-tpl="t"><section data-autoskip="1" data-bgless="spin" data-bglessp="280" data-bgopacity="50%" style="font-size: 14px; text-align: justify; letter-spacing: 1.5px; line-height: 1.75em; background: rgba(255, 255, 255, 0.8); color: rgb(63, 62, 63); padding: 1em; max-width: 100%; visibility: visible;" mpa-from-tpl="t" data-darkmode-bgcolor-15868677390408="rgba(36, 36, 36, 0.8)" data-darkmode-original-bgcolor-15868677390408="rgba(255, 255, 255, 0.8)" data-darkmode-color-15868677390408="rgb(168, 166, 168)" data-darkmode-original-color-15868677390408="rgb(63, 62, 63)" data-style="font-size: 14px; text-align: justify; letter-spacing: 1.5px; line-height: 1.75em; background: rgba(255, 255, 255, 0.8); color: rgb(63, 62, 63); padding: 1em; max-width: 100%;" class="js_darkmode__1"><p style="max-width: 100%; visibility: visible;" data-darkmode-bgcolor-15868677390408="rgba(36, 36, 36, 0.8)" data-darkmode-original-bgcolor-15868677390408="rgba(255, 255, 255, 0.8)" data-darkmode-color-15868677390408="rgb(168, 166, 168)" data-darkmode-original-color-15868677390408="rgb(63, 62, 63)">继上篇Webpack 初体验后，本章将讲解如何进行打包资源文件，图片的打包以及其它资源呢的打包。以及Webpack的 devServer 自动化。</section></section></section><section data-bgless="spin" data-bglessp="120" data-bgopacity="50%" style="width: 5em; height: 5em; background: rgb(66, 44, 161); border-top-left-radius: 100%; float: right; margin-top: -4.7em; max-width: 100%; visibility: visible;" mpa-from-tpl="t" data-darkmode-bgcolor-15868677390408="rgb(66, 44, 161)" data-darkmode-original-bgcolor-15868677390408="rgb(66, 44, 161)" data-style="width: 5em; height: 5em; background: rgb(66, 44, 161); border-top-left-radius: 100%; float: right; margin-top: -4.7em; max-width: 100%;" class="js_darkmode__2"> </section></section></section></section> </section> <div class="output_wrapper" id="output_wrapper_id" style="font-size: 16px; color: rgb(62, 62, 62); line-height: 1.6; word-spacing: 0px; letter-spacing: 0px; font-family: 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;"><blockquote style="line-height: inherit; display: block; padding: 15px 15px 15px 1rem; font-size: 0.9em; margin: 1em 0px; color: rgb(129, 145, 152); border-left: 6px solid rgb(220, 230, 240); background: rgb(242, 247, 251); overflow: auto; overflow-wrap: normal; word-break: normal;"> 写在前面说得话 此篇文章为记录学习Webpack， 如果觉得文章对你收获不大，请各位大佬轻喷。 如果有收获得话，关注以后获取更多技术内容。 </blockquote></div> <section id="nice" data-tool="mdnice编辑器" data-website="https://www.mdnice.com" style="padding: 0 10px; word-spacing: 0px; word-wrap: break-word; text-align: left; font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, 'PingFang SC', Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; margin-top: -10px; line-height: 1.6; letter-spacing: .034em; color: rgb(63, 63, 63); font-size: 16px; word-break: all;"><h2 data-tool="mdnice编辑器" style="font-weight: bold; color: black; font-size: 22px; display: block; text-align: center; background-image: url(https://my-wechat.mdnice.com/mdnice/mountain_2_20191028221337.png); background-position: center center; background-repeat: no-repeat; background-attachment: initial; background-origin: initial; background-clip: initial; background-size: 63px; margin-top: 38px; margin-bottom: 10px;"><span class="content" style="text-align: center; display: inline-block; height: 38px; line-height: 42px; color: rgb(60, 112, 198); background-position: left center; background-repeat: no-repeat; background-attachment: initial; background-origin: initial; background-clip: initial; background-size: 63px; margin-top: 38px; font-size: 18px; margin-bottom: 10px;">打包图片资源</h2> <blockquote data-tool="mdnice编辑器" style="font-size: 0.9em; overflow: auto; overflow-scrolling: touch; background: rgba(0, 0, 0, 0.05); color: #6a737d; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 10px; margin-bottom: 20px; margin-top: 20px; padding: 15px 20px; line-height: 27px; background-color: rgb(239, 239, 239); border-left: none; display: block;"> Webpack 用来处理一些文件时，是选用对应的loader 来处理打包的，知道这个原理，就好办了。 例如：打包图片，就找对应的打包图片的 loader， 1. 安装 2. 使用，这样就完成了处理打包。 图片打包使用的是loader 为 <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27,31,35,.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgb(60, 112, 198);">url-loader</code> 和 <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27,31,35,.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgb(60, 112, 198);">file-loader</code> 来处理打包图片 test：自定义要处理哪些图片格式 使用<code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27,31,35,.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgb(60, 112, 198);">url-loader</code>时，可通过options 来配置一些图片的属性，例如大小， 次例子，当图片大小小于 1MB 转化为Base64 来处理 </blockquote> <h4 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; font-weight: bold; color: black; font-size: 18px;">具体实现</h4> <h5 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; font-weight: bold; color: black; font-size: 16px;">在项目的根目录下创建一个 webpack.config.js</h5> <img src="https://user-gold-cdn.xitu.io/2020/4/14/17178b250c479c64?w=1232&h=2038&f=png&s=309238" data-tool="mdnice编辑器" style="display: block; margin: 0 auto; max-width: 100%; border-radius: 4px; margin-bottom: 25px;"> <blockquote data-tool="mdnice编辑器" style="font-size: 0.9em; overflow: auto; overflow-scrolling: touch; background: rgba(0, 0, 0, 0.05); color: #6a737d; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 10px; margin-bottom: 20px; margin-top: 20px; padding: 15px 20px; line-height: 27px; background-color: rgb(239, 239, 239); border-left: none; display: block;"> 上面是 Webpack 的具体配，入口文件为 ./src/index.js 在入口文件 index.js 中导入要打包的文件，此例子是打包图片资源， </blockquote> <pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px;"><code class="hljs" style="overflow-x: auto; padding: 16px; background: #272822; color: #ddd; display: -webkit-box; font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; border-radius: 0px; font-size: 12px; -webkit-overflow-scrolling: touch;">index.js import './index.css' </code></pre> <pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px;"><code class="hljs" style="overflow-x: auto; padding: 16px; background: #272822; color: #ddd; display: -webkit-box; font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; border-radius: 0px; font-size: 12px; -webkit-overflow-scrolling: touch;">index.css .p1{     width: 200px;     height: 200px;     background: url('./img/f4.png'); } .p2{     width: 200px;     height: 200px;     background: url('./img/f6.png'); } .p3{     width: 200px;     height: 200px;     background: url('./img/f7.png'); } </code></pre> <h5 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; font-weight: bold; color: black; font-size: 16px;">打包后的文件显示内容</h5> <img src="https://user-gold-cdn.xitu.io/2020/4/14/17178b250ce97ee8?w=1192&h=930&f=png&s=465360" data-tool="mdnice编辑器" style="display: block; margin: 0 auto; max-width: 100%; border-radius: 4px; margin-bottom: 25px;"> <h2 data-tool="mdnice编辑器" style="font-weight: bold; color: black; font-size: 22px; display: block; text-align: center; background-image: url(https://my-wechat.mdnice.com/mdnice/mountain_2_20191028221337.png); background-position: center center; background-repeat: no-repeat; background-attachment: initial; background-origin: initial; background-clip: initial; background-size: 63px; margin-top: 38px; margin-bottom: 10px;"><span class="content" style="text-align: center; display: inline-block; height: 38px; line-height: 42px; color: rgb(60, 112, 198); background-position: left center; background-repeat: no-repeat; background-attachment: initial; background-origin: initial; background-clip: initial; background-size: 63px; margin-top: 38px; font-size: 18px; margin-bottom: 10px;">打包其它资源</h2> <blockquote data-tool="mdnice编辑器" style="font-size: 0.9em; overflow: auto; overflow-scrolling: touch; background: rgba(0, 0, 0, 0.05); color: #6a737d; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 10px; margin-bottom: 20px; margin-top: 20px; padding: 15px 20px; line-height: 27px; background-color: rgb(239, 239, 239); border-left: none; display: block;"> 所谓打包其它资源是，处理之前没有处理过的文件。 此demo 为处理字体，采用loader 为 <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27,31,35,.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgb(60, 112, 198);">file-loader</code> </blockquote> <h5 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; font-weight: bold; color: black; font-size: 16px;">关键实现代码</h5> <pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px;"><code class="hljs" style="overflow-x: auto; padding: 16px; background: #272822; color: #ddd; display: -webkit-box; font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; border-radius: 0px; font-size: 12px; -webkit-overflow-scrolling: touch;">    // 模块     module:{         // 打包规则         rules: [             // 处理css             {                 test: /\.css$/,                 use: ['style-loader', 'css-loader']             },             // 处理其它资源             {               // exclude 排除， 除了css  js html  ，其它格式都进行处理，               // 可以自定义排除 之前处理后的文件               exclude: /\.(css|js|html)$/,               // 采用file-loader               loader:'file-loader'             }         ]     } </code></pre> <h5 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; font-weight: bold; color: black; font-size: 16px;">打包后的文件</h5> <img src="https://user-gold-cdn.xitu.io/2020/4/14/17178b250debb16b?w=373&h=218&f=png&s=12519" data-tool="mdnice编辑器" style="display: block; margin: 0 auto; max-width: 100%; border-radius: 4px; margin-bottom: 25px;"> <h5 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; font-weight: bold; color: black; font-size: 16px;">优化后，打包名</h5> <img src="https://user-gold-cdn.xitu.io/2020/4/14/17178b250f0981ca?w=394&h=232&f=png&s=9404" data-tool="mdnice编辑器" style="display: block; margin: 0 auto; max-width: 100%; border-radius: 4px; margin-bottom: 25px;"> <pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px;"><code class="hljs" style="overflow-x: auto; padding: 16px; background: #272822; color: #ddd; display: -webkit-box; font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; border-radius: 0px; font-size: 12px; -webkit-overflow-scrolling: touch;">    // 模块     module:{         // 打包规则         rules: [             // 处理css             {                 test: /\.css$/,                 use: ['style-loader', 'css-loader']             },             // 处理其它资源             {               exclude: /\.(css|js|html)$/,               loader:'file-loader',               //通过options 配置来修改文件的配置操作               options: {                   // hash：变量名长度  ext 为扩展名                   name: '[hash:8].[ext]'               }             }         ]     } </code></pre> <h2 data-tool="mdnice编辑器" style="font-weight: bold; color: black; font-size: 22px; display: block; text-align: center; background-image: url(https://my-wechat.mdnice.com/mdnice/mountain_2_20191028221337.png); background-position: center center; background-repeat: no-repeat; background-attachment: initial; background-origin: initial; background-clip: initial; background-size: 63px; margin-top: 38px; margin-bottom: 10px;"><span class="content" style="text-align: center; display: inline-block; height: 38px; line-height: 42px; color: rgb(60, 112, 198); background-position: left center; background-repeat: no-repeat; background-attachment: initial; background-origin: initial; background-clip: initial; background-size: 63px; margin-top: 38px; font-size: 18px; margin-bottom: 10px;">devServe 配置</h2> <blockquote data-tool="mdnice编辑器" style="font-size: 0.9em; overflow: auto; overflow-scrolling: touch; background: rgba(0, 0, 0, 0.05); color: #6a737d; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 10px; margin-bottom: 20px; margin-top: 20px; padding: 15px 20px; line-height: 27px; background-color: rgb(239, 239, 239); border-left: none; display: block;"> 自动检测src/ 目录下文件变化，自动刷新页面,自动打包文件 安装依赖<code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27,31,35,.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgb(60, 112, 198);">npm i webpack-dev-server -D</code> 启动指令 <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27,31,35,.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgb(60, 112, 198);">npx webpack-dev-server</code> </blockquote> <h5 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; font-weight: bold; color: black; font-size: 16px;">主要配置代码</h5> <pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px;"><code class="hljs" style="overflow-x: auto; padding: 16px; background: #272822; color: #ddd; display: -webkit-box; font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; border-radius: 0px; font-size: 12px; -webkit-overflow-scrolling: touch;">// 在webpack.config.js 下配置devServer    devServer:{         contentBase:resolve(__dirname,'build'),         // 启动gzip压缩         compress:true,         // 端口号         port:3000,         //  自动打开网站         open: true     } </code></pre> <img src="https://user-gold-cdn.xitu.io/2020/4/14/17178b250f4756b9?w=1455&h=710&f=png&s=124019" data-tool="mdnice编辑器" style="display: block; margin: 0 auto; max-width: 100%; border-radius: 4px; margin-bottom: 25px;"> <h5 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; font-weight: bold; color: black; font-size: 16px;">启动项目 <a href="#" style="word-wrap: break-word; font-weight: bold; color: rgb(60, 112, 198); text-decoration: none; border-bottom: 1px solid rgb(60, 112, 198);">http://localhost:3000/</a></h5> </section> <center>关注微信公众号获取更多资料</center> <center><img style="width:200px;height:200px" src="https://user-gold-cdn.xitu.io/2020/4/12/1716ec32b29fdd8b?w=344&h=344&f=jpeg&s=8820"></center> <center>回复 '加群'，即可加入前端自学交流群</center>

Webpack 打包资源篇

评论区

相关推荐