脚本宝典收集整理的这篇文章主要介绍了

Webpack 4 学习总结

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <h2 id="articleHeader0">一、安装配置</h2> <ul> <li>【<strong>前提</strong>】安装<code><a href="http://www.js-code.com/tag/node" title="node" target="_blank">node</a>.js</code>环境 <p>【官网下载】<a href="https://nodejs.org/zh-cn/" rel="nofollow noreferrer" target="_blank">https://nodejs.org/zh-cn/</a><br /><strong>安装教程不赘述</strong></p> </li> <li>创建项目文件夹 <p>例如创建如下文件夹<code>webpack_demo1</code></p> <p><span class="img-wrap"><img data-src="/img/remote/1460000018401929?w=631&amp;h=127" src="/img/remote/1460000018401929?w=631&amp;h=127" alt="" title="" style="cursor: pointer; display: inline;"></span></p> </li> <li> <p>创建配置项</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="npm init -y" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs kotlin"><code style="word-break: break-word; white-space: initial;">npm <span class="hljs-keyword"><a href="http://www.js-code.com/tag/in" title="浏览关于“in”的文章" target="_blank" class="tag_link">in</a>it</span> -y</code></pre> <p>生成一个<code><a href="http://www.js-code.com/tag/package" title="package" target="_blank">package</a>.json</code>文件 如下图</p> <p><span class="img-wrap"><img data-src="/img/remote/1460000018401930?w=1610&amp;h=972" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="" title="" style="cursor: pointer;"></span></p> </li> <li> <p>全局安装<code>webpack</code> <strong>(不推荐,进行下一步操作)</strong></p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="npm install webpack -g" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code style="word-break: break-word; white-space: initial;">npm <span class="hljs-keyword">inst<a href="http://www.js-code.com/tag/all" title="浏览关于“all”的文章" target="_blank" class="tag_link">all</a></span> webpack -g</code></pre> </li> <li> <p>局部安装<code>webpack</code><strong>(推荐)</strong></p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="npm install webpack --save-dev" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code style="word-break: break-word; white-space: initial;">npm <span class="hljs-keyword">install</span> webpack <span class="hljs-comment">--save-dev</span></code></pre> <ul> <li>另外,<code>webpack 4</code>要求安装包</li> </ul> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="npm install webpack-cli --save-dev" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code style="word-break: break-word; white-space: initial;">npm <span class="hljs-keyword">install</span> webpack-cli <span class="hljs-comment">--save-dev</span></code></pre> </li> </ul> <p>一起安装</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="npm install webpack webpack-cli --save-dev" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code style="word-break: break-word; white-space: initial;">npm <span class="hljs-keyword">install</span> webpack webpack-cli <span class="hljs-comment">--save-dev</span></code></pre> <p><strong>以下表示安装成功</strong></p> <p><span class="img-wrap"><img data-src="/img/remote/1460000018401931?w=1291&amp;h=532" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="" title="" style="cursor: pointer;"></span></p> <ul> <li> <p>创建入口文件</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="./src/index.js" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs groovy"><code style="word-break: break-word; white-space: initial;">.<span class="hljs-regexp">/src/</span>index.js</code></pre> <p><span class="img-wrap"><img data-src="/img/remote/1460000018401932?w=880&amp;h=289" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="" title="" style="cursor: pointer;"></span></p> <p>任意编写<code><a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>dex.js</code>文件内容用于测试</p> </li> </ul> <ul> <li> <p>配置生产和开发模式</p> <p>打开<code><a href="http://www.js-code.com/tag/package" title="package" target="_blank">package</a>.json</code>文件添加如下脚本</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="&quot;scripts&quot;: { &quot;dev&quot;: &quot;webpack --mode development&quot;, &quot;build&quot;: &quot;webpack --mode production&quot; }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs objectivec"><code><span class="hljs-string">"scripts"</span>: { <span class="hljs-string">"dev"</span>: <span class="hljs-string">"webpack --mode development"</span>, <span class="hljs-string">"build"</span>: <span class="hljs-string">"webpack --mode production"</span> }</code></pre> <p><span class="img-wrap"><img data-src="/img/remote/1460000018401933?w=1357&amp;h=573" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="" title="" style="cursor: pointer;"></span></p> </li> <li> <p>现在运行:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="npm run dev" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs nginx"><code style="word-break: break-word; white-space: initial;"><span class="hljs-attribute">npm</span> run dev</code></pre> <p>生成<code>dist/ma<a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>.js</code> ,其中 <code>main.js</code> 没有压缩</p> <blockquote><p> <code>npm run dev</code> 表示<strong>开发模式</strong> </p></blockquote> <p><span class="img-wrap"><img data-src="/img/remote/1460000018401934?w=1526&amp;h=714" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="" title="" style="cursor: pointer;"></span></p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="npm run build" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs nginx"><code style="word-break: break-word; white-space: initial;"><span class="hljs-attribute">npm</span> run build</code></pre> <p>此时的<code>main.js</code> 被压缩 ,这便是<strong>生产模式</strong></p> <p><span class="img-wrap"><img data-src="/img/remote/1460000018401935?w=1916&amp;h=366" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="" title="" style="cursor: pointer;"></span></p> </li> </ul> <ul> <li> <p>接下来看看打包的js文件是否能够使用</p> <ul> <li>创建<code>index.html</code> 引入打包好的<code>main.js</code> </li> </ul> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="<a href="http://www.js-code.com/tag/button" title="button" target="_blank">button</a>" <a href="http://www.js-code.com/tag/class" title="class" target="_blank">class</a>="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="top" target="_blank">top</a>" data-clipboard-<a href="http://www.js-code.com/tag/text" title="text" target="_blank">text</a>="<!DOCTYPE html><br /> <html lang=&quot;en&quot;><br /> <head><br /> <meta charset=&quot;UTF-8&quot;><br /> <meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;><br /> <meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;ie=edge&quot;><br /> <title>Document</title><br /> <script src=&quot;./main.js&quot; charset=&quot;utf-8&quot;></script><br /> </head><br /> <body></p> <p></body><br /> </html>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html"><span class="hljs-meta">&lt;!DOCTYPE html&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"en"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr"><a href="http://www.js-code.com/tag/char" title="浏览关于“char”的文章" target="_blank" class="tag_link">char</a>set</span>=<span class="hljs-string">"UTF-8"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr"><a href="http://www.js-code.com/tag/name" title="浏览关于“name”的文章" target="_blank" class="tag_link">name</a></span>=<span class="hljs-string">"viewport"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"width=device-width, initial-scale=1.0"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">"X-UA-Compatible"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"ie=edge"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>Document<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"./main.js"</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"utf-8"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span></code></pre> </li> </ul> <p><span class="img-wrap"><img data-src="/img/remote/1460000018401936?w=1404&amp;h=428" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="" title="" style="cursor: pointer;"></span></p> <ul> <li>打开浏览器调试 <p><span class="img-wrap"><img data-src="/img/remote/1460000018401937?w=1909&amp;h=436" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="" title="" style="cursor: pointer;"></span></p> </li> </ul> <p><strong>输出结果表示打包成功,大功告成 !!!</strong></p> <h2 id="articleHeader1">二、使用配置文件进行打包</h2> <blockquote><p>上一讲中我们打包没有用到<code>webpack.config.js</code>配置文件,webpack4把自己定位为一个零配置的工具。这一讲学习配置文件使用,更好地学习webpack。</p></blockquote> <ul> <li>根目录下新建一个<code>webpack.config.js</code>文件 (记载配置信息) <p><span class="img-wrap"><img data-src="/img/remote/1460000018402139?w=373&amp;h=346" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="" title="" style="cursor: pointer;"></span></p> </li> <li> <p>配置文件</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" const path = require('path'); module.exports = { entry:'./public/index.js', output:{ path:path.resolve(__dirname,'build'), filename:'bundle.js' } }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/const" title="浏览关于“const”的文章" target="_blank" class="tag_link">const</a></span> path = <span class="hljs-built_in">require</span>(<span class="hljs-string">'path'</span>); <span class="hljs-built_in">module</span>.<a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a>s = { <span class="hljs-attr">en<a href="http://www.js-code.com/tag/try" title="浏览关于“try”的文章" target="_blank" class="tag_link">try</a></span>:<span class="hljs-string">'./<a href="http://www.js-code.com/tag/public" title="浏览关于“public”的文章" target="_blank" class="tag_link">public</a>/index.js'</span>, <span class="hljs-attr">output</span>:{ <span class="hljs-attr">path</span>:path.resolve(__dirname,<span class="hljs-string">'build'</span>), <span class="hljs-attr">filename</span>:<span class="hljs-string">'bundle.js'</span> } }</code></pre> <table> <thead> <tr> <th>字段</th> <th>意义</th> </tr> </thead> <tbody> <tr> <td>en<a href="http://www.js-code.com/tag/try" title="try" target="_blank">try</a></td> <td>入口,所需打包的文件的路径</td> </tr> <tr> <td>output</td> <td>出口</td> </tr> <tr> <td>path</td> <td>文件打包后存放的路径</td> </tr> <tr> <td>path.solve()</td> <td>将路径或者路径片段的序列处理成绝对路径</td> </tr> <tr> <td>_dir<a href="http://www.js-code.com/tag/name" title="name" target="_blank">name</a></td> <td>表示当前文件所在目录的绝对路径</td> </tr> <tr> <td>file<a href="http://www.js-code.com/tag/name" title="name" target="_blank">name</a></td> <td>打包后文件的名称</td> </tr> </tbody> </table> </li> <li>按照配置项新建一个入口文件<code><a href="http://www.js-code.com/tag/public" title="public" target="_blank">public</a>/index.js</code> <p><span class="img-wrap"><img data-src="/img/remote/1460000018402140?w=748&amp;h=314" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="" title="" style="cursor: pointer;"></span></p> </li> <li>运行<code>npm run dev</code> </li> </ul> <h2 id="articleHeader2">三、配置入口和出口的进阶使用</h2> <h3 id="articleHeader3">一、单出口形式</h3> <p><code>webpack.config.js</code></p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="const path = require('path'); module.exports = { //单出口形式 entry:['./public/index.js','./public/index2.js'],//有多个文件 output:{ path:path.resolve(__dirname,'build'), filename:'bundle.js' } }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><span class="hljs-keyword">const</span> path = <span class="hljs-built_in">require</span>(<span class="hljs-string">'path'</span>); <span class="hljs-built_in">module</span>.exports = { <span class="hljs-comment">//单出口形式</span> entry:[<span class="hljs-string">'./public/index.js'</span>,<span class="hljs-string">'./public/index2.js'</span>],<span class="hljs-comment">//有多个文件</span> output:{ <span class="hljs-attr">path</span>:path.resolve(__dirname,<span class="hljs-string">'build'</span>), <span class="hljs-attr">filename</span>:<span class="hljs-string">'bundle.js'</span> } }</code></pre> <p><span class="img-wrap"><img data-src="/img/remote/1460000018402670" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="" title="" style="cursor: pointer;"></span></p> <ul> <li> <p>运行<code>npm run dev</code></p> <blockquote><p>生成唯一的打包文件 <code>bundle.js</code> </p></blockquote> <p><span class="img-wrap"><img data-src="/img/remote/1460000018402671" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="" title="" style="cursor: pointer;"></span></p> </li> </ul> <h3 id="articleHeader4">二、多出口形式</h3> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="`webpack.config.js` " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs css"><code>`<span class="hljs-selector-tag">webpack</span><span class="hljs-selector-class">.config</span><span class="hljs-selector-class">.js</span>` </code></pre> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="const path = require('path'); module.exports = { //多出口形式 entry:{ entryOne:'./public/entryOne/index.js', entryTwo:'./public/entryTwo/index.js', }, output:{ path:path.resolve(__dirname,'build'), filename:'[name].js' } }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="json hljs"><code class="json">const path = require('path'); module.exports = { //多出口形式 entry:{ entryOne:'./public/entryOne/index.js', entryTwo:'./public/entryTwo/index.js', }, output:{ path:path.resolve(__dirname,'build'), filename:'[name].js' } }</code></pre> <p>​</p> <ul> <li>文件结构 <p><span class="img-wrap"><img data-src="/img/remote/1460000018402672" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="" title="" style="cursor: pointer;"></span></p> </li> <li> <p>运行<code>npm run dev</code></p> <ul> <li>生成两个打包文件 <p><span class="img-wrap"><img data-src="/img/remote/1460000018402673?w=1316&amp;h=509" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="" title="" style="cursor: pointer;"></span></p> </li> </ul> </li> </ul> <h2 id="articleHeader5">四、配置webpack-dev-server</h2> <h3 id="articleHeader6">一、了解 webpack-dev-server</h3> <ul> <li> <code>webpack-dev-server</code>用来配置本地服务器</li> <li>为 <code>webpack</code> 打包生成的文件提供web服务</li> <li>自动刷新和热替换(HMR)</li> </ul> <h3 id="articleHeader7">二、安装webpack-dev-server</h3> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="npm install --save-dev webpack-dev-server" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code style="word-break: break-word; white-space: initial;">npm <span class="hljs-keyword">install</span> <span class="hljs-comment">--save-dev webpack-dev-server</span></code></pre> <h3 id="articleHeader8">三、 配置webpack.config.js文件</h3> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="devServer:{ contentBase:'./dist', //设置服务器访问的基本目录 host:'localhost', //服务器的ip地址 port:8080, //端口 open:true //自动打开页面 }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript">devServer:{ <span class="hljs-attr">contentBase</span>:<span class="hljs-string">'./dist'</span>, <span class="hljs-comment">//设置服务器访问的基本目录</span> host:<span class="hljs-string">'localhost'</span>, <span class="hljs-comment">//服务器的ip地址</span> port:<span class="hljs-number">8080</span>, <span class="hljs-comment">//端口</span> <a href="http://www.js-code.com/tag/open" title="浏览关于“open”的文章" target="_blank" class="tag_link">open</a>:<span class="hljs-literal"><a href="http://www.js-code.com/tag/true" title="浏览关于“true”的文章" target="_blank" class="tag_link">true</a></span> <span class="hljs-comment">//自动打开页面</span> }</code></pre> <h3 id="articleHeader9">四、配置<a href="http://www.js-code.com/tag/package" title="浏览关于“package”的文章" target="_blank" class="tag_link">package</a>.json</h3> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="&quot;scripts&quot;: { &quot;start&quot;: &quot;webpack-dev-server --mode development&quot; }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="json hljs"><code class="json"><span class="hljs-string">"scripts"</span>: { <span class="hljs-attr">"start"</span>: <span class="hljs-string">"webpack-dev-server --mode development"</span> }</code></pre> <h3 id="articleHeader10">五、运行命令</h3> <p><code>npm run dev</code> 打包文件</p> <p><code>npm run start </code>打开服务器</p> <hr> <h2 id="articleHeader11">五、打包css</h2> <ul> <li> <strong>安装loader</strong></p> <p><code>npm inst<a href="http://www.js-code.com/tag/all" title="all" target="_blank">all</a> style-loader css-loader --save-dev</code></p> </li> <li> <p><strong>配置loader</strong></p> <ul> <li> <p>在<code>webpack.config.js</code>文件里配置module中的rules,如下:</p> <ul> <li>test 属性,用于标识出应该被对应的 loader 进行转换的某个或某些文件。</li> <li>use 属性,表示进行转换时,应该使用哪个 loader。</li> </ul> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="module.exports = { /*入口和出口文件可以不用配置,默认*/ module:{ rules:[ { test:/.css$/, use:['style-loader','css-loader']//引入的顺序至关重要,不可改变 } ] } }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><span class="hljs-built_in">module</span>.exports = { <span class="hljs-comment">/*入口和出口文件可以不用配置,默认*/</span> <span class="hljs-built_in">module</span>:{ <span class="hljs-attr">rules</span>:[ { <span class="hljs-attr">test</span>:<span class="hljs-regexp">/.css$/</span>, <span class="hljs-attr">use</span>:[<span class="hljs-string">'style-loader'</span>,<span class="hljs-string">'css-loader'</span>]<span class="hljs-comment">//引入的顺序至关重要,不可改变</span> } ] } }</code></pre> </li> </ul> </li> </ul> <ul> <li> <p><strong>测试是否打包成功</strong></p> <ul> <li>在<code>src</code>下创建<code>index.css</code>文件 <p><span class="img-wrap"><img data-src="/img/remote/1460000018402674" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="" title="" style="cursor: pointer;"></span></p> </li> <li>在<code>index.js</code>中引入<code>index.css</code>文件 <p><code>require('!style-loader!css-loader!./index.css');</code></p> <p><span class="img-wrap"><img data-src="/img/remote/1460000018402675" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="" title="" style="cursor: pointer;"></span></p> </li> <li>进行打包后运行 <code>npm run dev</code>(之前配置好,详见<a href="https://www.jianshu.com/p/5b849114fe89" rel="nofollow noreferrer" target="_blank">第一篇文章:webpack4 基础配置</a>) <p>红色的背景,控制台输出<code>hello</code></p> <p><span class="img-wrap"><img data-src="/img/remote/1460000018402676" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="" title="" style="cursor: pointer;"></span></p> </li> </ul> </li> </ul> <p>------------</p> <h2 id="articleHeader12">六、使用<a href="http://www.js-code.com/tag/babel" title="babel" target="_blank">babel</a>编译ES6</h2> <ul> <li> <p><strong><a href="http://www.js-code.com/tag/babel" title="babel" target="_blank">babel</a>转化语法所需依赖项</strong>:</p> <ul> <li> <code><a href="http://www.js-code.com/tag/babel" title="浏览关于“babel”的文章" target="_blank" class="tag_link">babel</a>-loader</code>: 负责 <code><a href="http://www.js-code.com/tag/es6" title="es6" target="_blank">es6</a> </code>语法转化</li> <li> <code>babel-core</code>: <code>babel</code>核心包</li> <li> <code>babel-p<a href="http://www.js-code.com/tag/reset" title="reset" target="_blank">reset</a>-env</code>:告诉<code>babel</code>使用哪种转码规则进行文件处理</li> </ul> </li> <li> <p><strong>安装依赖</strong></p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="npm install babel-loader @babel/core @babel/preset-env --save-dev" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs nginx"><code style="word-break: break-word; white-space: initial;"><span class="hljs-attribute">npm</span> install babel-loader <span class="hljs-variable">@babel</span>/core <span class="hljs-variable">@babel</span>/p<a href="http://www.js-code.com/tag/reset" title="浏览关于“reset”的文章" target="_blank" class="tag_link">reset</a>-env --save-dev</code></pre> </li> <li> <p><strong>配置<code>webpack.config.js</code>文件</strong></p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" { test:/.js$/, exclude:/node_modules/, use:'babel-loader' }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"> { <span class="hljs-attr">test</span>:<span class="hljs-regexp">/.js$/</span>, <span class="hljs-attr">exclude</span>:<span class="hljs-regexp">/<a href="http://www.js-code.com/tag/node" title="浏览关于“node”的文章" target="_blank" class="tag_link">node</a>_modules/</span>, <span class="hljs-attr">use</span>:<span class="hljs-string">'babel-loader'</span> }</code></pre> </li> <li> <p><strong>新建 <code>.babelrc </code>文件配置转换规则</strong></p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="{ &quot;presets&quot;:[&quot;@babel/preset-env&quot;] }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs json"><code>{ <span class="hljs-attr">"presets"</span>:[<span class="hljs-string">"@babel/preset-env"</span>] }</code></pre> </li> <li> <p>或者直接在<code>webpack.config.js</code>文件中配置规则</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" { test:/.js$/, exclude:/node_modules/, use:{ loader:'babel-loader', options:{ presets:['@babel/preset-env'] } } }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"> { <span class="hljs-attr">test</span>:<span class="hljs-regexp">/.js$/</span>, <span class="hljs-attr">exclude</span>:<span class="hljs-regexp">/node_modules/</span>, <span class="hljs-attr">use</span>:{ <span class="hljs-attr">loader</span>:<span class="hljs-string">'babel-loader'</span>, <span class="hljs-attr"><a href="http://www.js-code.com/tag/option" title="浏览关于“option”的文章" target="_blank" class="tag_link">option</a>s</span>:{ <span class="hljs-attr">presets</span>:[<span class="hljs-string">'@babel/preset-env'</span>] } } }</code></pre> <hr> </li> </ul> <h2 id="articleHeader13">七、提取分离打包css</h2> <blockquote><p>前面讲过 将css文件引入到js文件中,然后一起打包成js文件,现在我们学习单独提取分离css并且打包。</p></blockquote> <ul> <li> <p>安装插件<code>min-css-extract-<a href="http://www.js-code.com/tag/plugin" title="plugin" target="_blank">plugin</a></code></p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="npm install mini-css-extract-plugin --save-dev" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code style="word-break: break-word; white-space: initial;">npm <span class="hljs-keyword">install</span> mini-css-<span class="hljs-keyword">extract</span>-<span class="hljs-keyword"><a href="http://www.js-code.com/tag/plugin" title="浏览关于“plugin”的文章" target="_blank" class="tag_link">plugin</a></span> <span class="hljs-comment">--save-dev</span></code></pre> </li> <li> <p>配置<code>webpack.config.js</code></p> <ul> <li>引入插件 <p><code><a href="http://www.js-code.com/tag/const" title="const" target="_blank">const</a> MiniCssPlugin = require("mini-css-extract-<a href="http://www.js-code.com/tag/plugin" title="plugin" target="_blank">plugin</a>");</code></p> </li> <li> <p>rules 设置</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" { test:/.css$/, use:[MiniCssPlugin.loader,'css-loader'] }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"> { <span class="hljs-attr">test</span>:<span class="hljs-regexp">/.css$/</span>, <span class="hljs-attr">use</span>:[MiniCssPlugin.loader,<span class="hljs-string">'css-loader'</span>] }</code></pre> </li> <li> <p>plugins 设置</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" new MiniCssPlugin({ filename:'./css/[name].css' }) " title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/new" title="浏览关于“new”的文章" target="_blank" class="tag_link">new</a></span> MiniCssPlugin({ <span class="hljs-attr">filename</span>:<span class="hljs-string">'./css/[name].css'</span> }) </code></pre> <p><strong>截图</strong></p> <p><span class="img-wrap"><img data-src="/img/remote/1460000018402677" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="" title="" style="cursor: pointer;"></span></p> </li> </ul> </li> <li>运行命令打包</li> </ul> <hr> <h2 id="articleHeader14">八、压缩优化css</h2> <blockquote><p>压缩css,去除注释</p></blockquote> <ul> <li> <p>安装插件</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="npm install --save-dev optimize-css-assets-webpack-plugin" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code style="word-break: break-word; white-space: initial;">npm <span class="hljs-keyword">install</span> <span class="hljs-comment">--save-dev optimize-css-assets-webpack-plugin</span></code></pre> </li> <li> <p>配置<code>webpack.config.js</code></p> <ul> <li> <p>头部引入插件</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="const OptimizeCssAssetsPlugin = require(&quot;optimize-css-assets-webpack-plugin&quot;) ` " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code style="word-break: break-word; white-space: initial;"><span class="hljs-keyword">const</span> OptimizeCssAssetsPlugin = <span class="hljs-built_in">require</span>(<span class="hljs-string">"optimize-css-assets-webpack-plugin"</span>) <span class="hljs-string">` </span></code></pre> </li> </ul> </li> </ul> <p>| 参数 | 意义 |<br /> | ------------------------- | ------------------------------------------------------------ |<br /> | assetNameRegExp | 正则表达式,用于匹配需要优化或者压缩的资源名。默认值是&lt;br/&gt;/.css$/g |<br /> | cssProcessor | 用于压缩和优化<a href="http://www.js-code.com/tag/css" title="CSS" target="_blank">CSS</a> 的处理器,默认是 cssnano. |<br /> | cssProcessorPluginOptions | 传递给cssProcessor的插件选项,默认为{} |<br /> | canPr<a href="http://www.js-code.com/tag/int" title="int" target="_blank">int</a> | 表示插件能够在console中打印信息,默认值是<a href="http://www.js-code.com/tag/true" title="true" target="_blank">true</a> |<br /> | discardComments | 去除注释 |</p> <ul> <li> <p>在<code>plugins</code>模块引入</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" new OptimizeCssAssetsPlugin({ assetNameRegExp:/.css$/g, cssProcessor:require(&quot;cssnano&quot;), cssProcessorPluginOptions:{ preset:['default',{discardComments:{removeAll:true}}] }, canPrint:true })" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"> <span class="hljs-keyword">new</span> OptimizeCssAssetsPlugin({ <span class="hljs-attr">assetNameRegExp</span>:<span class="hljs-regexp">/.css$/g</span>, <span class="hljs-attr">cssProcessor</span>:<span class="hljs-built_in">require</span>(<span class="hljs-string">"cssnano"</span>), <span class="hljs-attr">cssProcessorPluginOptions</span>:{ <span class="hljs-attr">preset</span>:[<span class="hljs-string">'<a href="http://www.js-code.com/tag/default" title="浏览关于“default”的文章" target="_blank" class="tag_link">default</a>'</span>,{<span class="hljs-attr">discardComments</span>:{<span class="hljs-attr">removeAll</span>:<span class="hljs-literal">true</span>}}] }, <span class="hljs-attr">canPr<a href="http://www.js-code.com/tag/int" title="浏览关于“int”的文章" target="_blank" class="tag_link">int</a></span>:<span class="hljs-literal">true</span> })</code></pre> </li> </ul> <p><span class="img-wrap"><img data-src="/img/remote/1460000018402678?w=1406&amp;h=934" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="" title="" style="cursor: pointer;"></span></p> <ul> <li> <strong>运行打包命令之后就可以压缩</strong></p> <p><code>webpack --mode development</code></p> </li> </ul> <p></code></p>

总结

以上是脚本宝典为你收集整理的

Webpack 4 学习总结

全部内容,希望文章能够帮你解决

Webpack 4 学习总结

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过