Webpack基礎(chǔ)應(yīng)用篇

1、webpack基礎(chǔ)應(yīng)用篇1.6.1 什么是loader webpack 只能理解 javascript 和 json 文件，這是 webpack 開箱可用的自帶能力。loader 讓 webpack 能夠去處理其他類型的文件，并將它們轉(zhuǎn)換為有效 模塊，以供給用程序用法，以及被添加到依靠圖中。 在 webpack 的配置中，loader 有兩個(gè)屬性： test 屬性，識(shí)別出哪些文件會(huì)被轉(zhuǎn)換。 use 屬性，定義出在舉行轉(zhuǎn)換時(shí)，應(yīng)當(dāng)用法哪個(gè) loader。 const path = require(&39;path&39;); module.exports = output: fi

2、lename: &39;my-first-webpack.bundle.js&39;, , module: rules: test: /.txt$/, use: &39;raw-loader&39; , , ; 以上配置中，對(duì)一個(gè)單獨(dú)的 module 對(duì)象定義了 rules 屬性，里面包含兩個(gè)必需屬性：test 和 use。這告知 webpack 編譯器(compiler) 如下信息： 嘿，webpack 編譯器，當(dāng)你遇到在 require()/import 語句中被解析為 ‘.txt’ 的路徑時(shí)，在你對(duì)它打包之前，先 u

3、se(用法) raw-loader 轉(zhuǎn)換一下。 1.6.2 加載css 為了在 javascript 模塊中 import 一個(gè) css 文件，你需要安裝 style-loader 和 css-loader，并在 module 配置 中添加這些 loader： felix webpack5 $ npm install -save-dev style-loader css-loader 1 修改配置文件： module: rules: test: /.css$/i, use: &39;style-loader&39;, &39;css-loader&39;, ,

4、, 07-manage-assets/webpack.config.js /. module.exports = /. / 配置資源文件 module: rules: /. test: /.css$/i, use: &39;style-loader&39;, &39;css-loader&39;, , , , /. 模塊 loader 可以鏈?zhǔn)秸{(diào)用。鏈中的每個(gè) loader 都將對(duì)資源舉行轉(zhuǎn)換。鏈會(huì)逆序執(zhí)行。第一個(gè) loader 將其結(jié)果（被轉(zhuǎn)換后的資源）傳遞給下一個(gè) loader，依此類推。最后，webpack 期望鏈中的最后的 loader 返回 javas

5、cript。 應(yīng)保證 loader 的先后挨次：&39;style-loader&39; 在前，而 &39;css-loader&39; 在后。假如不遵守此商定，webpack 可能會(huì)拋出錯(cuò)誤。webpack 按照正則表達(dá)式，來確定應(yīng)當(dāng)查找哪些文件，并將其提供應(yīng)指定的 loader。在這個(gè)示例中，全部以 .css 結(jié)尾的文件，都將被提供應(yīng) style-loader 和 css-loader。 這使你可以在依靠于此樣式的 js 文件中 import &39;./style.css&39;?，F(xiàn)在，在此模塊執(zhí)行過程中，含有 css 字符串的 標(biāo)簽，將被插入到 html