成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

[Webpack并不難]使用教程(二)--- module.loaders

HollisChuang / 1923人閱讀

摘要:官方的文檔模塊受到影響的選項(xiàng)。官方文檔通過注入標(biāo)簽將添加到。官方文檔這兩者一般都是配合在一起用的。代表圖片打包限制,這個(gè)限制并不是說超過了就不能打包,而是指當(dāng)圖片大小小于限制時(shí)會(huì)自動(dòng)轉(zhuǎn)成碼引用。不過它的放后面。

第一篇講了Webpack的安裝,以及配置文件的 entry,devtool,output,resolve。這篇接著說配置文件的 module。
想看看第一篇的朋友可以點(diǎn) 這里。

module (官方的文檔)
  module: {
    rules: [
      { 
        test: /.js$/, 
        loader: "babel-loader" 
      }, { 
        test: /.(png|jpg|gif|svg)$/,
        loader: "file-loader",
        options: { name: "[name].[ext]?[hash]"}
      }
    ]
  }

module:模塊受到影響的選項(xiàng)。我個(gè)人理解就是要打包的模塊會(huì)受到它配置的影響而發(fā)生一些可控的變化。常見的就是里面的rules,主要說也是這一部分。

rules:顧名思義,定規(guī)則的,怎么定呢?看有 test,正則表達(dá)式,那么要打包的模塊是要進(jìn)行匹配啊,匹配做啥?匹配的模塊就要按照Loader的規(guī)則進(jìn)行變化了。

loader:通過使用不同的 loader,webpack 有能力調(diào)用外部的腳本或工具,實(shí)現(xiàn)對(duì)不同格式的文件的處理,比如說分析轉(zhuǎn)換 scsscss,或者把下一代的JS文件(ES6,ES7)轉(zhuǎn)換為現(xiàn)代瀏覽器兼容的JS文件。

babel-loader (官網(wǎng)地址)

一個(gè)js的編譯器,可將 es6+ 轉(zhuǎn)為es5 ,從而在現(xiàn)有的瀏覽器運(yùn)行。

它十分強(qiáng)大,可看 阮一峰老師的babel教學(xué),到時(shí)我也會(huì)寫一遍詳細(xì)的 babel 使用文章。

  {
    test: /.js$/,
    loader: "babel-loader",
    exclude: /node_modules/
  }

每一個(gè)規(guī)則都有 test:正則表達(dá)式,上圖是匹配 .js 。

exclude:這規(guī)則不包含哪個(gè)模塊的意思,值可以是 正則,也可以是 包含路徑的字符串?dāng)?shù)組。有不包含當(dāng)然也有include(包含)。

babel 有自己的配置文件 .babelrctest 匹配了,就執(zhí)行配置文件(.babelrc)里的規(guī)則。

// .babelrc 的內(nèi)容。
{
  "presets": [ // 設(shè)定轉(zhuǎn)碼規(guī)則
    "env",     
    "stage-2" 
    "stage-3" 
  ],
  "plugins": ["transform-runtime"]
}

preset 只是編譯了語法,那新的API就可能沒辦法編譯了,這時(shí)候需要 plugins 了。

env: 包含 es2015,es2016,es2017 的轉(zhuǎn)碼規(guī)則 npm install babel-preset-env --save-dev

stage-2es7 第二版本的轉(zhuǎn)碼規(guī)則 npm install babel-preset-stage-2 --save-dev

stage-3: es7 第三版本的轉(zhuǎn)碼規(guī)則 npm install babel-preset-stage-2 --save-dev

babel-polyfill 雖然支持編譯某些新的API,但還有不支持的API,那 plugins 提供了輔助的作用,transform-runtime 就是其中一個(gè)。

css-loaderstyle-loader

css-loader: 很多時(shí)候會(huì)用到 require,import,@import 導(dǎo)入 css ,那么就要用到 css-loader 進(jìn)行轉(zhuǎn)換。(官方文檔)

style-loader: 通過注入