{"id":2672,"date":"2022-01-15T13:44:51","date_gmt":"2022-01-15T05:44:51","guid":{"rendered":"https:\/\/blog.odliken.cn\/?p=2672"},"modified":"2023-02-05T13:14:46","modified_gmt":"2023-02-05T05:14:46","slug":"es6%e4%b9%8bmodule%e6%a8%a1%e5%9d%97%e4%b8%8ebabel%e7%bc%96%e8%af%91","status":"publish","type":"post","link":"https:\/\/blog.odjbinail.cn\/?p=2672","title":{"rendered":"ES6\u4e4bModule\u6a21\u5757\u4e0eBabel\u7f16\u8bd1"},"content":{"rendered":"<h1>Module \u6a21\u5757<\/h1>\n<h2>Module \u662f\u4ec0\u4e48<\/h2>\n<ul>\n<li>\u6a21\u5757:\u4e00\u4e2a\u4e00\u4e2a\u7684\u5c40\u90e8\u4f5c\u7528\u57df\u7684\u4ee3\u7801\u5757<\/li>\n<li>\u4ec0\u4e48\u662f\u6a21\u5757\u7cfb\u7edf:<\/li>\n<li>\u6a21\u5757\u7cfb\u7edf\u9700\u8981\u89e3\u51b3\u7684\u4e3b\u8981\u95ee\u9898\n<ul>\n<li>\u2460\u6a21\u5757\u5316\u7684\u95ee\u9898<\/li>\n<li>\u2461\u6d88\u9664\u5168\u5c40\u53d8\u91cf<\/li>\n<li>\u2462\u7ba1\u7406\u52a0\u8f7d\u987a\u5e8f<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h2>Module \u7684\u57fa\u672c\u7528\u6cd5<\/h2>\n<ul>\n<li>export default BaseSlider;<\/li>\n<li>import BaseSlider from '.\/base.js';<\/li>\n<li>\u4e00\u4e2a\u6587\u4ef6\u5c31\u662f\u4e00\u4e2a\u6a21\u5757<\/li>\n<li>\u53ea\u8981\u4f60\u4f1a\u7528\u5230 import \u6216 export,\u5728\u4f7f\u7528 script \u6807\u7b7e\u52a0\u8f7d\u65f6,\u5c31\u8981\u52a0\u4e0a type=&quot;module&quot;<\/li>\n<\/ul>\n<h2>export default \u548c\u5bf9\u5e94\u7684 import [\u975e\u5e38\u91cd\u8981]<\/h2>\n<ul>\n<li>1.\u8ba4\u8bc6\u5bfc\u51fa\u548c\u5bfc\u5165\n<ul>\n<li>\u5bfc\u51fa\u7684\u4e1c\u897f\u53ef\u4ee5\u88ab\u5bfc\u5165(import),\u5e76\u8bbf\u95ee\u5230<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>mo.js\nconst age=18;\n\/\/ console.log(age);\n\/\/ export default age;\n\/\/ export default 20;\n\/\/ export default {};\n\/\/\u4e00\u4e2a\u6a21\u5757\u53ea\u80fd\u6709\u4e00\u4e2a export default\n\/\/ const fn=()=&gt;{};\n\/\/ export default fn;\n\/\/ export default function (){};\nexport default class{};<\/code><\/pre>\n<pre class=\"prettyprint linenums\" ><code>&lt;script type=&quot;module&quot;&gt;\n     \/\/1.\u8ba4\u8bc6\u5bfc\u51fa\u548c\u5bfc\u5165\n     \/\/\u5bfc\u51fa\u7684\u4e1c\u897f\u53ef\u4ee5\u88ab\u5bfc\u5165(import),\u5e76\u8bbf\u95ee\u5230\n     \/\/\u4e00\u4e2a\u6a21\u5757\u6ca1\u6709\u5bfc\u51fa,\u4e5f\u53ef\u4ee5\u5c06\u5176\u5bfc\u5165\n     \/\/\u88ab\u5bfc\u5165\u7684\u4ee3\u7801\u90fd\u4f1a\u6267\u884c\u4e00\u904d,\u4e5f\u4ec5\u4f1a\u6267\u884c\u4e00\u904d\n     \/\/  import &#039;.\/mo.js&#039;;\/\/18\n     \/\/2.\u57fa\u672c\u7528\u6cd5\n     \/\/\u53ef\u4ee5\u968f\u4fbf\u8d77\u540d\n     import aa from &#039;.\/mo.js&#039;;\n     console.log(aa);\n&lt;\/script&gt;<\/code><\/pre>\n<h2>export \u548c\u5bf9\u5e94\u7684 import [\u975e\u5e38\u91cd\u8981]<\/h2>\n<pre class=\"prettyprint linenums\" ><code>  &lt;script type=&quot;module&quot;&gt;\n    \/\/1.\u57fa\u672c\u7528\u6cd5\n    \/\/ export \u58f0\u660e\u6216\u8bed\u53e5\n    \/\/\u4e0d\u80fd\u968f\u610f\u547d\u540d \u2460 export const age = 18;\n    import { age } from &quot;.\/mo.js&quot;; \/\/\u2461 export {age};\n    console.log(age);\n    \/\/2.\u591a\u4e2a\u5bfc\u51fa\n    \/\/1. function fn(){}\n    \/\/ export function fn(){}\/\/function (){} \u533f\u540d\u4e0d\u884c\n    import { fn } from &quot;.\/mo.js&quot;;\n    console.log(fn);\n    \/\/2. class className {}\n    \/\/ export class className{}\/\/export class {} \u533f\u540d\u4e0d\u884c\n    import { className } from &quot;.\/mo.js&quot;;\n    console.log(className);\n    \/\/3.\u591a\u4e2a\u5bfc\u51fa..\n    \/\/ export { fn as func, className, age };\n    \/\/ export default 1;\n    \/\/\u591a\u4e2a\u5bfc\u5165..\n    import { fn, age, className } from &quot;.\/mo.js&quot;;\n    console.log(fn, age, className); \/\/\u0192 fn(){} 18 class className{}\n    \/\/4.\u5bfc\u51fa\u5bfc\u5165\u65f6\u8d77\u522b\u540d\n    import { func, age, className as Person } from &quot;.\/mo.js&quot;;\n    console.log(func, age, Person);\n    \/\/5.\u6574\u4f53\u5bfc\u5165\n    \/\/\u4f1a\u5bfc\u5165\u6240\u6709\u8f93\u51fa,\u5305\u62ec\u901a\u8fc7 export default \u5bfc\u51fa\u7684\n    import * as obj from &quot;.\/mo.js&quot;;\n    console.log(obj);\n    \/\/6.\u540c\u65f6\u5bfc\u5165\n    \/\/\u4e00\u5b9a\u662f export default \u7684\u5728\u524d\n    import age2, { func, age, className } from &quot;.\/mo.js&quot;;\n    console.log(age2);\n  &lt;\/script&gt;<\/code><\/pre>\n<h2>Module \u7684\u6ce8\u610f\u4e8b\u9879[\u7b80\u5355\u542c\u542c]<\/h2>\n<pre class=\"prettyprint linenums\" ><code>\/\/mo.js\nconsole.log(this);\nif (typeof this!==&#039;undefined&#039;){\n    throw new Error(&#039;\u8bf7\u4f7f\u7528\u6a21\u5757\u7684\u65b9\u5f0f\u52a0\u8f7d&#039;);\n}\nexport const age=18;<\/code><\/pre>\n<pre class=\"prettyprint linenums\" ><code class=\"language-js\">&lt;script type=&quot;module&quot;&gt;\n    \/\/1.\u6a21\u5757\u9876\u5c42\u7684 this \u6307\u5411\n    \/\/\u5728\u6a21\u5757\u4e2d,\u9876\u5c42\u7684 this \u6307\u5411 undefined\n    import &#039;.\/mo.js&#039;;\n    \/\/2.import \u548c import()(\u4e86\u89e3)\n    \/\/import \u547d\u4ee4\u5177\u6709\u63d0\u5347\u6548\u679c,\u4f1a\u63d0\u5347\u5230\u6574\u4e2a\u6a21\u5757\u7684\u5934\u90e8,\u7387\u5148\u6267\u884c\n    \/\/import \u6267\u884c\u7684\u65f6\u5019,\u4ee3\u7801\u8fd8\u6ca1\u6267\u884c\n    \/\/import \u548c export \u547d\u4ee4\u53ea\u80fd\u5728\u6a21\u5757\u7684\u9876\u5c42,\u4e0d\u80fd\u5728\u4ee3\u7801\u5757\u4e2d\u6267\u884c\n    \/\/import()\u53ef\u4ee5\u6309\u6761\u4ef6\u5bfc\u5165\n    if (PC){\n       import(&#039;pc.js&#039;).then().catch();\n    }else if(Mobile){\n       import(&#039;mobile.js&#039;).then().catch();\n    }\n    \/\/3.\u5bfc\u5165\u5bfc\u51fa\u7684\u590d\u5408\u5199\u6cd5\n    \/\/\u590d\u5408\u5199\u6cd5\u5bfc\u51fa\u7684,\u65e0\u6cd5\u5728\u5f53\u524d\u6a21\u5757\u4e2d\u4f7f\u7528\n    \/\/ export {age} from &#039;.\/mo.js&#039;;\/\/\u4e0d\u63a8\u8350\n    \/\/\u7b49\u4ef7\u4e8e\n    import {age} from &#039;.\/mo.js&#039;;\n    export {age} from &#039;.\/mo.js&#039;;\n    console.log(age);\n&lt;\/script&gt;<\/code><\/pre>\n<h2>Module \u7684\u5e94\u7528<\/h2>\n<pre class=\"prettyprint linenums\" ><code> &lt;div class=&quot;slider-layout&quot;&gt;\n      &lt;div class=&quot;slider&quot;&gt;\n        &lt;div class=&quot;slider-content&quot;&gt;\n          &lt;div class=&quot;slider-item&quot;&gt;\n            &lt;a href=&quot;javascript:;&quot;\n              &gt;&lt;img src=&quot;.\/imgs\/1.jpg&quot; alt=&quot;1&quot; class=&quot;slider-img&quot;\n            \/&gt;&lt;\/a&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n\n    &lt;script src=&quot;.\/index.js&quot;&gt;&lt;\/script&gt;<\/code><\/pre>\n<pre class=\"prettyprint linenums\" ><code>\/\/index.js\nimport Slider from &quot;.\/slider&quot;;\n new Slider(document.querySelector(&quot;.slider&quot;));<\/code><\/pre>\n<pre class=\"prettyprint linenums\" ><code>\/\/slider.js\nimport BaseSlider from &#039;.\/base.js&#039;;\nimport keyboard from &#039;.\/keyboard.js&#039;;\n\/\/ import Mouse from &#039;.\/keyboard.js&#039;;\nclass Slider extends BaseSlider {\n    constructor(el, options) {\n      super(el, options);\n\n      this._bindEvent();\n    }\n    _bindEvent() {\n      keyboard.bindEvent(this)\n      \/\/ Mouse.bindEvent(this)\n    }\n  }\n  export default Slider<\/code><\/pre>\n<pre class=\"prettyprint linenums\" ><code>\/\/default.js\nconst DEFAULTS = {\n  \/\/ \u521d\u59cb\u7d22\u5f15\n  initialIndex: 0,\n  \/\/ \u5207\u6362\u65f6\u662f\u5426\u6709\u52a8\u753b\n  animation: true,\n  \/\/ \u5207\u6362\u901f\u5ea6\uff0c\u5355\u4f4d ms\n  speed: 300,\n};\nexport default DEFAULTS;\n\/\/ export default {\n\/\/   \/\/ \u521d\u59cb\u7d22\u5f15\n\/\/   initialIndex: 0,\n\/\/   \/\/ \u5207\u6362\u65f6\u662f\u5426\u6709\u52a8\u753b\n\/\/   animation: true,\n\/\/   \/\/ \u5207\u6362\u901f\u5ea6\uff0c\u5355\u4f4d ms\n\/\/   speed: 300,\n\/\/ };<\/code><\/pre>\n<pre class=\"prettyprint linenums\" ><code>\/\/constant.js\nexport const ELEMENT_NODE = 1;\nexport const SLIDER_ANIMATION_CLASSNAME = &#039;slider-animation&#039;;\nexport const LEFT_KEYCODE=37\nexport const RIGHT_KEYCODE=39<\/code><\/pre>\n<pre class=\"prettyprint linenums\" ><code>\/\/keyboard.js\nimport { LEFT_KEYCODE,RIGHT_KEYCODE } from &quot;.\/constants&quot;;\nconst keyboard = {\n  bindEvent(slider) {\n    document.addEventListener(&quot;keyup&quot;, (ev) =&gt; {\n      if (ev.keyCode === LEFT_KEYCODE) {\n        \/\/ \u2190\n        slider.prev();\n      } else if (ev.keyCode === RIGHT_KEYCODE) {\n        \/\/ \u2192\n        slider.next();\n      }\n    });\n  },\n};\nexport default keyboard;<\/code><\/pre>\n<pre class=\"prettyprint linenums\" ><code>\/\/base.js\n\/\/ \u9ed8\u8ba4\u53c2\u6570\nimport DEFAULTS from &quot;.\/default&quot;;\n\/\/ \u5e38\u91cf\nimport {ELEMENT_NODE,SLIDER_ANIMATION_CLASSNAME} from &#039;.\/constants&#039;\n\nclass BaseSlider {\n    constructor(el, options) {\n        console.log(options)\n        if (el.nodeType !== ELEMENT_NODE)\n            throw new Error(&#039;\u5b9e\u4f8b\u5316\u7684\u65f6\u5019\uff0c\u8bf7\u4f20\u5165 DOM \u5143\u7d20\uff01&#039;);\n\n        \/\/ \u5b9e\u9645\u53c2\u6570\n        this.options = {\n            ...DEFAULTS,\n            ...options\n        };\n\n        const slider = el;\n        const sliderContent = slider.querySelector(&#039;.slider-content&#039;);\n        const sliderItems = sliderContent.querySelectorAll(&#039;.slider-item&#039;);\n\n        \/\/ \u6dfb\u52a0\u5230 this \u4e0a\uff0c\u4e3a\u4e86\u5728\u65b9\u6cd5\u4e2d\u4f7f\u7528\n        this.slider = slider;\n        this.sliderContent = sliderContent;\n        this.sliderItems = sliderItems;\n\n        this.minIndex = 0;\n        this.maxIndex = sliderItems.length - 1;\n        this.currIndex = this.getCorrectedIndex(this.options.initialIndex);\n\n        \/\/ \u6bcf\u4e2a slider-item \u7684\u5bbd\u5ea6\uff08\u6bcf\u6b21\u79fb\u52a8\u7684\u8ddd\u79bb\uff09\n        this.itemWidth = sliderItems[0].offsetWidth;\n\n        this.init();\n    }\n\n    \/\/ \u83b7\u53d6\u4fee\u6b63\u540e\u7684\u7d22\u5f15\u503c\n    \/\/ \u968f\u5fc3\u6240\u6b32\uff0c\u4e0d\u903e\u77e9\n    getCorrectedIndex(index) {\n        if (index &lt; this.minIndex) return this.maxIndex;\n        if (index &gt; this.maxIndex) return this.minIndex;\n        return index;\n    }\n\n    \/\/ \u521d\u59cb\u5316\n    init() {\n        \/\/ \u4e3a\u6bcf\u4e2a slider-item \u8bbe\u7f6e\u5bbd\u5ea6\n        this.setItemsWidth();\n\n        \/\/ \u4e3a slider-content \u8bbe\u7f6e\u5bbd\u5ea6\n        this.setContentWidth();\n\n        \/\/ \u5207\u6362\u5230\u521d\u59cb\u7d22\u5f15 initialIndex\n        this.move(this.getDistance());\n\n        \/\/ \u5f00\u542f\u52a8\u753b\n        if (this.options.animation) {\n            this.openAnimation();\n        }\n    }\n\n    \/\/ \u4e3a\u6bcf\u4e2a slider-item \u8bbe\u7f6e\u5bbd\u5ea6\n    setItemsWidth() {\n        for (const item of this.sliderItems) {\n            item.style.width = `${this.itemWidth}px`;\n        }\n    }\n\n    \/\/ \u4e3a slider-content \u8bbe\u7f6e\u5bbd\u5ea6\n    setContentWidth() {\n        this.sliderContent.style.width = `${\n      this.itemWidth * this.sliderItems.length\n    }px`;\n    }\n\n    \/\/ \u4e0d\u5e26\u52a8\u753b\u7684\u79fb\u52a8\n    move(distance) {\n        this.sliderContent.style.transform = `translate3d(${distance}px, 0px, 0px)`;\n    }\n\n    \/\/ \u5e26\u52a8\u753b\u7684\u79fb\u52a8\n    moveWithAnimation(distance) {\n        this.setAnimationSpeed(this.options.speed);\n        this.move(distance);\n    }\n\n    \/\/ \u8bbe\u7f6e\u5207\u6362\u52a8\u753b\u901f\u5ea6\n    setAnimationSpeed(speed) {\n        this.sliderContent.style.transitionDuration = `${speed}ms`;\n    }\n\n    \/\/ \u83b7\u53d6\u8981\u79fb\u52a8\u7684\u8ddd\u79bb\n    getDistance(index = this.currIndex) {\n        return -this.itemWidth * index;\n    }\n\n    \/\/ \u5f00\u542f\u52a8\u753b\n    openAnimation() {\n        this.sliderContent.classList.add(SLIDER_ANIMATION_CLASSNAME);\n    }\n\n    \/\/ \u5173\u95ed\u52a8\u753b\n    closeAnimation() {\n        this.setAnimationSpeed(0);\n    }\n\n    \/\/ \u5207\u6362\u5230 index \u7d22\u5f15\u5bf9\u5e94\u7684\u5e7b\u706f\u7247\n    to(index) {\n        index = this.getCorrectedIndex(index);\n        if (this.currIndex === index) return;\n\n        this.currIndex = index;\n        const distance = this.getDistance();\n\n        if (this.options.animation) {\n            return this.moveWithAnimation(distance);\n        } else {\n            return this.move(distance);\n        }\n    }\n\n    \/\/ \u5207\u6362\u4e0a\u4e00\u5f20\n    prev() {\n        this.to(this.currIndex - 1);\n    }\n\n    \/\/ \u5207\u6362\u4e0b\u4e00\u5f20\n    next() {\n        this.to(this.currIndex + 1);\n    }\n\n    \/\/ \u83b7\u53d6\u5f53\u524d\u7d22\u5f15\n    getCurrIndex() {\n        return this.currIndex;\n    }\n}\n\nexport default BaseSlider;<\/code><\/pre>\n<h1>Babel \u4e0e webpack<\/h1>\n<h2>Babel \u662f\u4ec0\u4e48<\/h2>\n<p>\u5b98\u7f51 : <a href=\"https:\/\/babeljs.io\/\">https:\/\/babeljs.io\/<\/a><\/p>\n<ul>\n<li>Babel \u662f javaScript \u7684\u7f16\u8bd1\u5668,\u7528\u6765\u5c06 ES6 \u7684\u4ee3\u7801,\u8f6c\u6362\u6210 ES6 \u4e4b\u524d\u7684\u4ee3\u7801<\/li>\n<li>Babel \u672c\u8eab\u53ef\u4ee5\u7f16\u8bd1 ES6 \u7684\u5927\u90e8\u5206\u8bed\u6cd5\uff0c\u6bd4\u5982 let\u3001const\u3001\u7bad\u5934\u51fd\u6570\u3001\u7c7b<\/li>\n<li>\u4f46\u662f\u5bf9\u4e8e ES6 \u65b0\u589e\u7684 API\uff0c\u6bd4\u5982 Set\u3001Map\u3001Promise \u7b49\u5168\u5c40\u5bf9\u8c61\uff0c\u4ee5\u53ca\u4e00\u4e9b\u5b9a\u4e49\u5728\u5168\u5c40\u5bf9\u8c61\u4e0a\u7684\u65b9\u6cd5\uff08\u6bd4\u5982 Object.assign\/Array.from)\u90fd\u4e0d\u80fd\u76f4\u63a5\u7f16\u8bd1\uff0c\u9700\u8981\u501f\u52a9\u5176\u5b83\u7684\u6a21\u5757<\/li>\n<li>Babel \u4e00\u822c\u9700\u8981\u914d\u5408 Webpack \u6765\u7f16\u8bd1\u6a21\u5757\u8bed\u6cd5<\/li>\n<\/ul>\n<h2>Babel \u7684\u4f7f\u7528\u65b9\u5f0f[\u91cd\u70b9]<\/h2>\n<p><a href=\"https:\/\/babeljs.io\/setup\">https:\/\/babeljs.io\/setup<\/a><br \/>\nCLI \u547d\u4ee4\u884c\u5de5\u5177  webpack<\/p>\n<h2>\u4f7f\u7528 Babel \u524d\u7684\u51c6\u5907\u5de5\u4f5c[\u91cd\u70b9]<\/h2>\n<ul>\n<li>node.js \u662f\u4e2a\u5e73\u53f0\u6216\u8005\u5de5\u5177,\u5bf9\u5e94\u6d4f\u89c8\u5668<\/li>\n<li>\u540e\u7aef\u7684 JavaScript=ECMAScript+IO+File+...\u7b49\u670d\u52a1\u7aef\u7684\u64cd\u4f5c<\/li>\n<li>npm: node \u5305\u7ba1\u7406\u5de5\u5177<\/li>\n<li><a href=\"https:\/\/nodejs.org\/zh-cn\/\">https:\/\/nodejs.org\/zh-cn\/<\/a> \u7a33\u5b9a\u7248<br \/>\n\u5728\u4f60\u7684\u9879\u76ee\u76ee\u5f55\u4e0a node -v -&gt; npm -v -&gt; npm init -&gt; ok?-&gt;\u7136\u540e\u4e00\u76f4\u56de\u8f66 \u5c31\u4f1a\u51fa\u73b0 package.json \u6587\u4ef6<\/li>\n<li>npm install --save-dev @babel\/core @babel\/cli<\/li>\n<\/ul>\n<h2>\u4f7f\u7528 Babel \u7f16\u8bd1 ES6 \u4ee3\u7801[\u91cd\u70b9]<\/h2>\n<ul>\n<li><a href=\"https:\/\/babeljs.io\/setup#installation\">https:\/\/babeljs.io\/setup#installation<\/a><\/li>\n<li>\u5728 package.json &quot;scripts&quot;: { &quot;build&quot;: &quot;babel src -d lib&quot; }, \u521b\u5efa\u4e00\u4e2a\u76ee\u5f55 src,\u5728\u5176\u4e2d\u521b\u5efa babel.js<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>let name = &#039;Alex&#039;;\nconst age = 18;\nconst add = (x, y) =&gt; x + y;\nnew Promise((resolve, reject) =&gt; {\n    resolve(&#039;\u6210\u529f&#039;);\n});\nArray.from([1, 2]);\nclass Person {\n}\nimport &#039;.\/index.js&#039;;<\/code><\/pre>\n<ul>\n<li>npm install @babel\/preset-env --save-dev<\/li>\n<li>\u521b\u5efa\u6587\u4ef6: .babelrc { &quot;presets&quot;: [&quot;@babel\/preset-env&quot;] }<\/li>\n<li>npm run build \u7f16\u8bd1\u5b8c\u6210<\/li>\n<\/ul>\n<h2>Webpack \u662f\u4ec0\u4e48<\/h2>\n<ul>\n<li>webpack \u662f\u9759\u6001\u6a21\u5757\u6253\u5305\u5668\uff0c\u5f53 webpack \u5904\u7406\u5e94\u7528\u7a0b\u5e8f\u65f6\uff0c\u4f1a\u5c06\u6240\u6709\u8fd9\u4e9b\u6a21\u5757\u6253\u5305\u6210\u4e00\u4e2a\u6216\u591a\u4e2a\u6587\u4ef6<\/li>\n<li>\u6a21\u5757: webpack \u53ef\u4ee5\u5904\u7406 js\/css\/\u56fe\u7247,\u56fe\u6807\u5b57\u4f53\u7b49\u5355\u4f4d<\/li>\n<li>\u9759\u6001: \u5f00\u53d1\u8fc7\u7a0b\u4e2d\u5b58\u5728\u4e8e\u672c\u5730\u7684 js\/css\/\u56fe\u7247\/\u56fe\u6807\u5b57\u4f53\u7b49\u6587\u4ef6,\u5c31\u662f\u9759\u6001\u7684<\/li>\n<li>\u52a8\u6001\u7684\u5185\u5bb9,webpack \u6ca1\u529e\u6cd5\u5904\u7406,\u53ea\u80fd\u5904\u7406\u9759\u6001\u7684<\/li>\n<\/ul>\n<h2>Webpack \u521d\u4f53\u9a8c[\u91cd\u70b9]<\/h2>\n<ul>\n<li>1.\u521d\u59cb\u5316\u9879\u76ee npm init<\/li>\n<li>2.\u5b89\u88c5 webpack \u9700\u8981\u7684\u5305 npm install --save-dev <a href=\"mailto:webpack-cli@3.3.12\">webpack-cli@3.3.12<\/a> <a href=\"mailto:webpack@4.44\">webpack@4.44<\/a>.1<\/li>\n<li>3.\u914d\u7f6e webpack webpack.config.js [\u6839\u76ee\u5f55\u4e0a\u521b\u5efa]<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>const path = require(&#039;path&#039;);\nmodule.exports = {\n    entry: &#039;.\/src\/index.js&#039;,\n    output: {\n        path: path.resolve(_dirname, &#039;dist&#039;),\n        filename: &#039;bundle.js&#039;\n    }\n}<\/code><\/pre>\n<ul>\n<li>4.\u7f16\u8bd1\u5e76\u6d4b\u8bd5<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>&quot;scripts&quot;: {\n    &quot;webpack&quot;: &quot;webpack --config webpack.config.js&quot;\n  },<\/code><\/pre>\n<p>src \u76ee\u5f55\u4e0b<\/p>\n<pre class=\"prettyprint linenums\" ><code>module.js:\nexport default 18;\nconsole.log(&#039;module.js&#039;);\nindex.js:\nimport age from &#039;.\/module.js&#039;;\nconsole.log(&#039;index.js&#039;,age);<\/code><\/pre>\n<ul>\n<li>\u6d4b\u8bd5<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>&lt;!--    &lt;script src=&quot;.\/src\/index.js&quot; type=&quot;module&quot;&gt;&lt;\/script&gt;--&gt;\n    &lt;script src=&quot;.\/dist\/bundle.js&quot; &gt;&lt;\/script&gt;<\/code><\/pre>\n<p>index.js 18<\/p>\n<h2>entry \u548c output[\u6838\u5fc3\u6982\u5ff5]<\/h2>\n<ul>\n<li>1.entry: \u6307\u5b9a\u5165\u53e3\u6587\u4ef6 \/\/\u5355\u5165\u53e3,\u591a\u5165\u53e3\u600e\u4e48\u5199 webpack.config.js<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code> entry: {\n        main: &#039;.\/src\/index.js&#039;,\n        search:&#039;.\/src\/search.js&#039;\n    },<\/code><\/pre>\n<ul>\n<li>2.output<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>module.exports = {\n    mode:&#039;development&#039;,\n    \/\/\u5355\u5165\u53e3: entry: &#039;.\/src\/index.js&#039;,\n    entry: {\n        main: &#039;.\/src\/index.js&#039;,\n        search:&#039;.\/src\/search.js&#039;\n    },\n    \/\/ output: {\n    \/\/     path: path.resolve(&#039;dist&#039;),\n    \/\/     filename: &#039;bundle.js&#039;\n    \/\/ }\n    output: {\n        path: path.resolve(&#039;dist&#039;),\n        filename: &#039;[name].js&#039;\n    }\n};<\/code><\/pre>\n<h2>loader[\u6838\u5fc3\u6982\u5ff5]<\/h2>\n<p>webpack\/js\/css \u56fe\u7247<\/p>\n<ul>\n<li>loader \u8ba9 webpack \u80fd\u591f\u53bb\u5904\u7406\u90a3\u4e9b\u975e JS \u6587\u4ef6\u7684\u6a21\u5757<\/li>\n<li>2.babel-loader npm install --save-dev babel-loader@8.1.0<\/li>\n<li>3.\u5b89\u88c5 Babel npm install --save-dev @babel\/core@7.11.0 @babel\/preset-env@7.11.0<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>.babelrc\n{\n  &quot;presets&quot;:[&quot;@babel\/preset-env&quot;]\n}<\/code><\/pre>\n<ul>\n<li>npm install --save-dev core-js@3.6.5<\/li>\n<li>4.\u914d\u7f6e babel-loader <a href=\"https:\/\/www.webpackjs.com\/loaders\/\">https:\/\/www.webpackjs.com\/loaders\/<\/a><\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>  webpack.config.js\n  module: {\n      rules: [{\n          test:\/\\.js$\/,\n          exclude: \/node_modules\/,\n          loader: &quot;babel-loader&quot;\n      }]\n  }<\/code><\/pre>\n<ul>\n<li>5.\u5f15\u5165 core-js \/\/\u7f16\u8bd1\u65b0\u589e API npm install --save-dev core-js@3.6.5 import &quot;core-js\/stable&quot;;<\/li>\n<\/ul>\n<h2>plugins[\u6838\u5fc3\u6982\u5ff5]<\/h2>\n<ul>\n<li>1.loader \u88ab\u7528\u4e8e\u5e2e\u52a9 webpack \u5904\u7406\u5404\u79cd\u6a21\u5757,\u800c\u63d2\u4ef6\u5219\u53ef\u4ee5\u7528\u4e8e\u6267\u884c\u8303\u56f4\u66f4\u5e7f\u7684\u4efb\u52a1 <a href=\"https:\/\/www.webpackjs.com\/plugins\/\">https:\/\/www.webpackjs.com\/plugins\/<\/a><\/li>\n<li>2.html-webpack-plugin npm install --save-dev html-webpack-plugin@4.3.0<\/li>\n<li>3.\u914d\u7f6e html-webpack-plugin \u63d2\u4ef6<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>webpack.config.js\n  plugins: [\n        new HtmlWebpackPlugin({\n            template: &#039;.\/1.html&#039;\n        })\n    ]<\/code><\/pre>\n<ul>\n<li>4.\u591a\u9875\u9762\u65f6 html-webpack-plugin \u63d2\u4ef6\u7684\u914d\u7f6e<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>const path = require(&#039;path&#039;);\nconst HtmlWebpackPlugin = require(&#039;html-webpack-plugin&#039;);\nmodule.exports = {\n    mode: &#039;development&#039;,\n    entry: {\n        index: &#039;.\/src\/index.js&#039;,\n        search: &#039;.\/src\/search.js&#039;\n    },\n    output: {\n        path: path.resolve(&#039;dist&#039;),\n        filename: &#039;[name].js&#039;\n    },\n    plugins: [\n        \/\/\u591a\u5165\u53e3\n        new HtmlWebpackPlugin({\n            template: &#039;.\/index.html&#039;,\n            filename: &quot;index.html&quot;,\n            chunks: [&#039;index&#039;],\n            minify: {\n                \/\/\u5220\u9664 index.html \u4e2d\u7684\u6ce8\u91ca\n                removeComments: true,\n                \/\/\u5220\u9664 index.html \u4e2d\u7684\u7a7a\u683c\n                collapseWhitespace: true,\n                \/\/\u5220\u9664\u5404\u79cd html \u6807\u7b7e\u5c5e\u6027\u503c\u7684\u53cc\u5f15\u53f7\n                removeAttributeQuotes: true\n            }\n        }),\n        new HtmlWebpackPlugin({\n            template: &#039;.\/search.html&#039;,\n            filename: &quot;search.html&quot;,\n            chunks: [&#039;search&#039;]\n        })\n    ]\n};<\/code><\/pre>\n<h2>\u5904\u7406 CSS \u6587\u4ef6<\/h2>\n<p>npm install --save-dev css-loader@4.1.1 npm install --save-dev style-loader@1.2.1<\/p>\n<pre class=\"prettyprint linenums\" ><code>body{\n    background-color: pink;\n}\nimport &#039;.\/index.css&#039;;<\/code><\/pre>\n<pre class=\"prettyprint linenums\" ><code>const path= require(&#039;path&#039;)\nconst HtmlWebpackPlugin = require(&#039;html-webpack-plugin&#039;);\nmodule.exports={\n    mode: &#039;development&#039;,\n    entry: &#039;.\/src\/index.js&#039;,\n    output: {\n        path: path.resolve(&#039;dist&#039;),\n        filename: &#039;[name].js&#039;\n    },\n    module:{\n        rules: [{\n            test:\/\\.css$\/,\n            \/\/ loader: &#039;css-loader&#039;\n            use:[&#039;style-loader&#039;,&#039;css-loader&#039;]\/\/\u53f3\u5f80\u5de6\u7528\n        }]\n    },\n    plugins: [\n        new HtmlWebpackPlugin({\n            template: &#039;.\/index.html&#039;,\n            filename: &#039;index.html&#039;\n        })\n    ]\n};<\/code><\/pre>\n<p>dist-&gt;index.html \u8fd0\u884c,\u80cc\u666f\u989c\u8272\u53d8\u4e3a pink<\/p>\n<p>npm install --save-dev mini-css-extract-plugin@0.9.0<\/p>\n<pre class=\"prettyprint linenums\" ><code>webpack.config.js\nconst MiniCssExtractPlugin = require(&#039;mini-css-extract-plugin&#039;);\n module:{\n        rules: [{\n            test:\/\\.css$\/,\n            use:[MiniCssExtractPlugin.loader,&#039;css-loader&#039;]\n        }]\n    },\n    plugins: [\n        new HtmlWebpackPlugin({\n            template: &#039;.\/index.html&#039;,\n            filename: &#039;index.html&#039;\n        }),\n        new MiniCssExtractPlugin({\n            filename: &#039;css\/[name].css&#039;\n        })\n    ]\n};<\/code><\/pre>\n<h2>\u4f7f\u7528 file-loader \u5904\u7406 CSS \u4e2d\u7684\u56fe\u7247<\/h2>\n<ul>\n<li>\u5982\u679c\u662f\u5916\u90e8\u7684\u8d44\u6e90,\u662f\u4e0d\u9700\u8981\u8003\u8651 webpack \u7684,\u53ea\u6709\u672c\u5730\u7684\u56fe\u7247\u624d\u9700\u8981\u88ab webpack \u5904\u7406<\/li>\n<\/ul>\n<p>-file-loader npm install --save-dev file-loader@6.0.0<\/p>\n<pre class=\"prettyprint linenums\" ><code>body{\n    \/*background-image: url(https:\/\/www.imooc.com\/static\/img\/index\/logo.png);*\/\n    background-image: url(img\/logo.png);\n    background-repeat: no-repeat;\n}<\/code><\/pre>\n<pre class=\"prettyprint linenums\" ><code>const path = require(&#039;path&#039;)\nconst HtmlWebpackPlugin = require(&#039;html-webpack-plugin&#039;);\nconst MiniCssExtractPlugin = require(&#039;mini-css-extract-plugin&#039;);\nmodule.exports = {\n    mode: &#039;development&#039;,\n    entry: &#039;.\/src\/index.js&#039;,\n    output: {\n        path: path.resolve(&#039;dist&#039;),\n        filename: &#039;[name].js&#039;\n    },\n    module: {\n        rules: [{\n            test: \/\\.css$\/,\n            use: [{loader: MiniCssExtractPlugin.loader,\n                options: {\n                    publicPath:&#039;..\/&#039;\n                }\n            }, &#039;css-loader&#039;]\n        },\n            {\n                test:\/\\.(jpg|png|gif)$\/,\n                use:{\n                    loader: &#039;file-loader&#039;,\n                    options: {\n                        name:&#039;img\/[name].[ext]&#039;\n                    }\n                }\n            }\n        ]\n    },\n    plugins: [\n        new HtmlWebpackPlugin({\n            template: &#039;.\/index.html&#039;,\n            filename: &#039;index.html&#039;\n        }),\n        new MiniCssExtractPlugin({\n            filename: &#039;css\/[name].css&#039;\n        })\n    ]\n};<\/code><\/pre>\n<h2>\u4f7f\u7528 html-withimg-loader \u5904\u7406 HTML \u4e2d\u7684\u56fe\u7247<\/h2>\n<ul>\n<li>npm install --save-dev <a href=\"mailto:html-withimg-loader@0.1.16\">html-withimg-loader@0.1.16<\/a><\/li>\n<li>esModule:false<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>&lt;img src=&quot;.\/src\/img\/logo.png&quot; alt=&quot;&quot;&gt;\n  {\n            test:\/\\.(jpg|png|gif)$\/,\n            use:{\n                loader: &#039;file-loader&#039;,\n                options: {\n                    name:&#039;img\/[name].[ext]&#039;,\n                    esModule:false\n                }\n            }\n        },\n  {\n            test:\/\\.(htm|html)$\/,\n            loader: &#039;html-withimg-loader&#039;\n        }<\/code><\/pre>\n<h2>\u4f7f\u7528 file-loader \u5904\u7406 JS \u4e2d\u7684\u56fe\u7247<\/h2>\n<pre class=\"prettyprint linenums\" ><code>package.json\n&quot;devDependencies&quot;: {\n    &quot;css-loader&quot;: &quot;^4.1.1&quot;,\n    &quot;file-loader&quot;: &quot;^6.0.0&quot;,\n    &quot;html-webpack-plugin&quot;: &quot;^4.3.0&quot;,\n    &quot;mini-css-extract-plugin&quot;: &quot;^0.9.0&quot;,\n    &quot;style-loader&quot;: &quot;^1.2.1&quot;,\n    &quot;webpack&quot;: &quot;^4.44.1&quot;,\n    &quot;webpack-cli&quot;: &quot;^3.3.12&quot;\n  }<\/code><\/pre>\n<pre class=\"prettyprint linenums\" ><code>  &lt;img src=&quot;.\/src\/img\/logo.png&quot; alt=&quot;&quot;&gt;\nbody{\n    background-color: pink;\n}\nindex.js\nimport &#039;.\/index.css&#039;;\nimport img from &#039;.\/img\/logo.png&#039;;\nconsole.log(img);\nconst imgEl = document.createElement(&#039;img&#039;);\nimgEl.src=img;\ndocument.body.appendChild(imgEl);<\/code><\/pre>\n<h2>\u4f7f\u7528 url-loader \u5904\u7406\u56fe\u7247<\/h2>\n<ul>\n<li>\u7528\u4e8e\u56fe\u6807\u5b57\u4f53 npm install --save-dev url-loader@4.1.0<\/li>\n<li>\u5927\u4e8e limit \u7684\u503c,\u8fd8\u662f\u6309\u7167 file-loader \u6765\u5904\u7406<\/li>\n<li>\u5c0f\u4e8e,,\u5219\u6309 base64 \u5904\u7406<\/li>\n<\/ul>\n<p><img data-original=\"http:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/01\/2022012320435216.png\"  alt=\"\" \/><\/p>\n<noscript><img decoding=\"async\" src=\"http:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/01\/2022012320435216.png\" alt=\"\" \/><\/p><\/noscript>\n<h2>\u4f7f\u7528 webpack-dev-server \u642d\u5efa\u5f00\u53d1\u73af\u5883<\/h2>\n<p>npm install --save-dev <a href=\"mailto:webpack-dev-server@3.11\">webpack-dev-server@3.11<\/a>.0<\/p>\n<ul>\n<li>&quot;dev&quot;: &quot;webpack-dev-server --open chrome&quot;<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>index.js\nimport &#039;.\/index.css&#039;;\nconsole.log(&#039;index2&#039;);\npackage.json\n  &quot;scripts&quot;: {\n    &quot;webpack&quot;: &quot;webpack&quot;,\n    &quot;dev&quot;: &quot;webpack-dev-server --open chrome&quot;\n  },\n  &quot;author&quot;: &quot;&quot;,\n  &quot;license&quot;: &quot;ISC&quot;,\n  &quot;devDependencies&quot;: {\n    &quot;css-loader&quot;: &quot;^4.1.1&quot;,\n    &quot;html-webpack-plugin&quot;: &quot;^4.3.0&quot;,\n    &quot;mini-css-extract-plugin&quot;: &quot;^0.9.0&quot;,\n    &quot;webpack&quot;: &quot;^4.44.1&quot;,\n    &quot;webpack-cli&quot;: &quot;^3.3.12&quot;,\n    &quot;webpack-dev-server&quot;: &quot;^3.11.0&quot;\n    }<\/code><\/pre>\n<pre class=\"prettyprint linenums\" ><code>webpack.config.js\nconst path = require(&#039;path&#039;)\nconst HtmlWebpackPlugin = require(&#039;html-webpack-plugin&#039;);\nconst MiniCssExtractPlugin = require(&#039;mini-css-extract-plugin&#039;);\nmodule.exports = {\n    mode: &#039;development&#039;,\n    entry: &#039;.\/src\/index.js&#039;,\n    output: {\n        path: path.resolve(&#039;dist&#039;),\n        filename: &#039;[name].js&#039;\n    },\n    module: {\n        rules: [{\n            test: \/\\.css$\/,\n            use: [{loader: MiniCssExtractPlugin.loader,\n                options: {\n                    publicPath:&#039;..\/&#039;\n                }\n            }, &#039;css-loader&#039;]\n        }]\n    },\n    plugins: [\n        new HtmlWebpackPlugin({\n            template: &#039;.\/index.html&#039;,\n            filename: &#039;index.html&#039;\n        }),\n        new MiniCssExtractPlugin({\n            filename: &#039;css\/[name].css&#039;\n        })\n    ]\n};<\/code><\/pre>\n<h1>\u603b\u7ed3<\/h1>\n<p><img data-original=\"http:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/01\/2022012320444362.png\"  alt=\"\" \/><\/p>\n<noscript><img decoding=\"async\" src=\"http:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/01\/2022012320444362.png\" alt=\"\" \/><\/p><\/noscript>\n","protected":false},"excerpt":{"rendered":"<p>Module \u6a21\u5757 Module \u662f\u4ec0\u4e48 \u6a21\u5757:\u4e00\u4e2a\u4e00\u4e2a\u7684\u5c40\u90e8\u4f5c\u7528\u57df\u7684\u4ee3\u7801\u5757 \u4ec0\u4e48\u662f\u6a21\u5757\u7cfb\u7edf: \u6a21\u5757\u7cfb\u7edf\u9700\u8981\u89e3 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-2672","post","type-post","status-publish","format-standard","hentry","category-web"],"_links":{"self":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/2672","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2672"}],"version-history":[{"count":17,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/2672\/revisions"}],"predecessor-version":[{"id":4108,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/2672\/revisions\/4108"}],"wp:attachment":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2672"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2672"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2672"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}