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

1、webpack基礎(chǔ)應(yīng)用篇1.6.1 什么是loader webpack 只能理解 javascript 和 json 文件，這是 webpack 開箱可用的自帶能力。loader 讓 webpack 能夠去處理其他類型的文件，并將它們轉(zhuǎn)換為有效 模塊，以供給用程序用法，以及被添加到依靠圖中。 在 webpack 的配置中，loader 有兩個屬性： test 屬性，識別出哪些文件會被轉(zhuǎn)換。 use 屬性，定義出在舉行轉(zhuǎn)換時，應(yīng)當用法哪個 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; , , ; 以上配置中，對一個單獨的 module 對象定義了 rules 屬性，里面包含兩個必需屬性：test 和 use。這告知 webpack 編譯器(compiler) 如下信息： 嘿，webpack 編譯器，當你遇到在 require()/import 語句中被解析為 ‘.txt’ 的路徑時，在你對它打包之前，先 u

3、se(用法) raw-loader 轉(zhuǎn)換一下。 1.6.2 加載css 為了在 javascript 模塊中 import 一個 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 可以鏈式調(diào)用。鏈中的每個 loader 都將對資源舉行轉(zhuǎn)換。鏈會逆序執(zhí)行。第一個 loader 將其結(jié)果（被轉(zhuǎn)換后的資源）傳遞給下一個 loader，依此類推。最后，webpack 期望鏈中的最后的 loader 返回 javas

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