資訊專欄INFORMATION COLUMN
0x001 概述
上一章講的是裝載模板，這一章講的是裝載樣式
0x002 配置環(huán)境$ mkdir 0x011-styling-loader
$ cd 0x011-styling-loader
$ npm init -y
$ npm install --save-dev webpack
$ touch ./src/index.js
$ vim webpack.config.js
// ./webpack.config.js
const path = require("path");
module.exports = {
entry : {
"index": ["./src/index.js"],
},
output: {
path : path.join(__dirname, "dist"),
filename: "[name].bundle.js"
}
;
0x003 栗子1-css-loader裝載css
安裝依賴
$ cnpm install --save-dev css-loader
添加style.css
$ vim ./src/style.css
p {
} ```
引入style.css
// ./src/index.js
var style = require("./style.css")
console.log(style.toString())
打包并查看結(jié)果
/* 2 */
/***/ (function(module, exports, __webpack_require__) {
exports = module.exports = __webpack_require__(3)(false);
exports.push([module.i, "p{color:red}", ""]);
/***/ }),
/* 3 */
/***/ (function(module, exports) {
...
module.exports = function(useSourceMap) {
var list = [];
// return the list of modules as css string
list.toString = function toString() {
return this.map(function (item) {
var content = cssWithMappingToString(item, useSourceMap);
if(item[2]) {
return "@media " + item[2] + "{" + content + "}";
} else {
return content;
}
}).join("");
};
....
可以看到，生成了兩個(gè)新的模塊，模塊2包含我們的style文件中的內(nèi)容，模塊3導(dǎo)出了一個(gè)toString,它的作用是可以將style.css中的內(nèi)容轉(zhuǎn)化成字符串來(lái)使用，所以我們?cè)?b>index.js中可以使用style.toString()來(lái)得到樣式字符串，執(zhí)行結(jié)果
$ node ./dist/index.bundle.js
p {
} ```
其他配置
minimize：壓縮css
更多配置配置，請(qǐng)查閱webpack關(guān)于css-loader章節(jié)
0x004 栗子2-style-loader配合css-loader插入
安裝依賴
$ cnpm install --save-dev css-loader
修改配置
{
test: /.css$/,
use : [
{
loader : "css-loader",
options: {}
},
{
loader : "css-loader",
options: {
minimize: true
}
}
]
}
添加index.html
Document
hello webpack
瀏覽器打開(kāi)./src/index.html,可以看到我們寫(xiě)的style.css內(nèi)容已經(jīng)被插入到head的style標(biāo)簽中
其他更多配置請(qǐng)查閱webpack關(guān)于style-loader章節(jié)
0x005 栗子3-添加file-loader獨(dú)立出style文件
安裝依賴
$ cnpm install --save-dev file-loader
修改配置
{
loader : "style-loader",
options: {}
},
{
loader : "file-loader",
options: {
name:"[name].[ext]"
}
},
打包并用瀏覽器打開(kāi)./src/index.html，可以看見(jiàn)，style.css被以文件的形式導(dǎo)出并在head中以外鏈的形式導(dǎo)入
其他更多配置查閱webpack關(guān)于style-loader章節(jié)
0x006 栗子4-sass-loader裝載sass
安裝依賴
$ npm install sass-loader node-sass webpack --save-dev
修改配置
{
test: /.(scss|css)$/,
use : [{
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: "sass-loader"
}]
}
打包并使用瀏覽器打開(kāi)index.html，可以看到，不管是style.css還是style.scss都被style-loader插入到了head
更多設(shè)置查閱關(guān)于webpack關(guān)于sass-loader章節(jié)
0x007 栗子5-postcss-loder搞定兼容性安裝依賴
$ cnpm install --save-dev postcss-loader precss autoprefixer
添加配置
{
test: /.(scss|css)$/,
use : [
{
loader: "style-loader"
},
{
loader: "css-loader"
},
{
loader: "postcss-loader"
},
{
loader: "sass-loader"
}]
}
添加postcss配置
$ vim ./postcss.config.js
// ./postcss.config.js
const precss = require("precss");
const autoprefixer = require("autoprefixer");
module.exports = ({ file, options, env }) => ({
plugins: [precss, autoprefixer]
})
打包并使用瀏覽器打開(kāi)./src/index.html，可以看到，自動(dòng)給我們添加了前綴。
其他更多配置請(qǐng)查閱webpack關(guān)于postcss-loder章節(jié)
0x008 資源源代碼
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/89616.html
摘要：同時(shí)不能直接單純的指定輸出的文件名稱，比如，將會(huì)報(bào)錯(cuò)，可以換成以下方式指定，或者其他類似方式。如果打包過(guò)程出現(xiàn)錯(cuò)誤，比如語(yǔ)法錯(cuò)誤，將會(huì)在控制臺(tái)以紅色文字顯示，并且在你修復(fù)之后會(huì)再次打包。 0x001 概述 其實(shí)我不知道怎么寫(xiě)，所以決定就一塊一塊的寫(xiě)點(diǎn)平常配置的過(guò)程，根據(jù)不同東西稍微分區(qū)一下就好了 0x002 初始化項(xiàng)目結(jié)構(gòu) $ mkdir webpack_study $ cd webp...
摘要：概述上一章講的是樣式裝載相關(guān)的，這一章見(jiàn)得是腳本加載相關(guān)的環(huán)境配置栗子加載安裝依賴修改配置添加配置文件使用編寫(xiě)腳本打包并查看結(jié)果可以看到，語(yǔ)法被自動(dòng)轉(zhuǎn)化成了更多配置請(qǐng)查閱關(guān)于章節(jié)栗子加載安裝依賴 0x001 概述 上一章講的是樣式裝載相關(guān)的loader，這一章見(jiàn)得是腳本加載相關(guān)的loader 0x002 環(huán)境配置 $ mkdir 0x012-transliling-loader $ c...
摘要：概述上一章講的時(shí)候關(guān)于文件相關(guān)的，這一章講的是模板相關(guān)的。環(huán)境配置栗子加載安裝依賴包編寫(xiě)并引入配置低于否則使用打包并查看結(jié)果可以看到，被打包成了字符串，并封裝成模塊導(dǎo)出。更多資源，請(qǐng)查閱的倉(cāng)庫(kù)和官網(wǎng)資源源代碼 0x001 概述 上一章講的時(shí)候關(guān)于文件相關(guān)的loder，這一章講的是模板相關(guān)的loder。 0x002 環(huán)境配置 $ mkdir 0x010-templating-loader...
摘要：修改配置文件匹配的文件名，這里匹配后綴為的，只要了該文件名結(jié)尾的文件，都將使用這個(gè)來(lái)處理命中后使用的加載器查看結(jié)果，和之前一致，推薦使用配置文件形式，可以保持引入文件格式的一致性。有利于維護(hù)和美觀更多配置，可以查閱關(guān)于部分。 0x001 概述 上一章講的是DLL加速編譯，這一章開(kāi)始講loader相關(guān)的部分，但是關(guān)于plugin的部分善未完結(jié)，因?yàn)榧磳⒁v的ExtractTextWebp...
摘要：概述上一章講的是腳本裝載相關(guān)的，這一章見(jiàn)得是腳本格式校驗(yàn)相關(guān)的環(huán)境配置使用校驗(yàn)格式這份配置是偷的安裝依賴包修改配置文件添加配置文件編寫(xiě)測(cè)試代碼張三打包輸出張三 0x001 概述 上一章講的是腳本裝載相關(guān)的loader，這一章見(jiàn)得是腳本格式校驗(yàn)相關(guān)的loader 0x002 環(huán)境配置 $ mkdir 0x013-linting-loader $ cd 0x013-linting-load...
閱讀 1442·2021-09-02 09:53
閱讀 2695·2021-07-29 13:50
閱讀 1742·2019-08-30 11:07
閱讀 1601·2019-08-30 11:00
閱讀 1478·2019-08-29 14:00
閱讀 1873·2019-08-29 12:52
閱讀 2592·2019-08-29 11:11
閱讀 3453·2019-08-26 12:23
