資訊專欄INFORMATION COLUMN
摘要：渣渣一枚，目前只能想到這些了，以后想到再補(bǔ)。在中使用通過使用即可，中的配置可以通過選項(xiàng)進(jìn)行配置。
文章首發(fā)于我的github及個(gè)人博客，github請(qǐng)看https://github.com/huruji/blo...，轉(zhuǎn)載請(qǐng)注明出處。
渣渣一枚，目前只能想到這些了，以后想到再補(bǔ)。
在webpack中使用Babel通過使用babel-loader即可，babel中的配置可以通過options選項(xiàng)進(jìn)行配置。
安裝：
npm i babel-loader -D
const config = {
// ......
module: {
rules: [{
test: /.js$/,
use:{
loader: "babel-loader",
options: {
presets: ["env"]
}
}
}]
}
};
module.exports = config;
webpack.config.js
const config = {
// ......
module: {
rules: [{
test: /.js$/,
use:[
"babel-loader"
]
}]
}
};
module.exports = config;
.babelrc
{
"presets": [
"es2015"
]
}
Webpack + ESLint
使用ESLint使用eslint-loader即可，類似于babel-loader的使用
安裝：
npm i eslint-loader -D
const config = {
// ......
module: {
rules: [{
test: /.js$/,
use:[
"eslint-loader",
"babel-loader"
]
}]
}
};
module.exports = config;
Webpack + Sass
在Webpack中對(duì)Sass進(jìn)行編譯需要使用sass-loader，而sass-loader依賴于node-sass和webpack，因此需要安裝
npm i node-sass sass-loader webpack -D
由于sass沒有提供重寫url的功能，因此所有的鏈接資源都是相對(duì)于輸出文件（output）來說的，因此在實(shí)際開發(fā)中通常會(huì)加入resolve-url-loader來實(shí)現(xiàn)資源url的正常使用
npm i resolve-url-loader -D
和style-loader、css-loader一起使用，這樣就可以正常使用編譯sass了
const config = {
// ......
module: {
rules: [{
test: /.scss$/,
use: [
"style-loader",
"css-loader",
"resolve-url-loader",
"sass-loader?sourceMap"
]
}]
}
};
module.exports = config;
Webpack + Less
類似于Sass的使用，Less的編譯只需要安裝less-loader即可
npm i less-loader -D
const config = {
// ......
module: {
rules: [{
test: /.scss$/,
use: [
"style-loader",
"css-loader",
"less-loader"
]
}]
}
};
module.exports = config;
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/91764.html
摘要：以為例，編寫來幫助我們完成重復(fù)的工作編譯壓縮我只要執(zhí)行一下就可以檢測(cè)到文件的變化，然后為你執(zhí)行一系列的自動(dòng)化操作，同樣的操作也發(fā)生在這些的預(yù)處理器上。的使用是針對(duì)第三方類庫使用各種模塊化寫法以及語法。 showImg(https://segmentfault.com/img/bVbtZYK); 一：前端工程化的發(fā)展 很久以前，互聯(lián)網(wǎng)行業(yè)有個(gè)職位叫做 軟件開發(fā)工程師 在那個(gè)時(shí)代，大家可能...
摘要：了解相關(guān)什么是是一個(gè)模塊打包器。配置文件默認(rèn)是一個(gè)模塊，返回一個(gè)格式的配置信息對(duì)象插件插件件可以完成一些不能完成的功能。插件的使用一般是在的配置信息選項(xiàng)中指定。 了解Webpack相關(guān) 什么是webpack Webpack是一個(gè)模塊打包器(bundler)。 在Webpack看來, 前端的所有資源文件(js/css/img/less/...)都會(huì)作為模塊處理 它將根據(jù)模塊的依...
摘要：了解相關(guān)什么是是一個(gè)模塊打包器。配置文件默認(rèn)是一個(gè)模塊，返回一個(gè)格式的配置信息對(duì)象插件插件件可以完成一些不能完成的功能。插件的使用一般是在的配置信息選項(xiàng)中指定。 了解Webpack相關(guān) 什么是webpack Webpack是一個(gè)模塊打包器(bundler)。 在Webpack看來, 前端的所有資源文件(js/css/img/less/...)都會(huì)作為模塊處理 它將根據(jù)模塊的依...
摘要：了解相關(guān)什么是是一個(gè)模塊打包器。配置文件默認(rèn)是一個(gè)模塊，返回一個(gè)格式的配置信息對(duì)象插件插件件可以完成一些不能完成的功能。插件的使用一般是在的配置信息選項(xiàng)中指定。 了解Webpack相關(guān) 什么是webpack Webpack是一個(gè)模塊打包器(bundler)。 在Webpack看來, 前端的所有資源文件(js/css/img/less/...)都會(huì)作為模塊處理 它將根據(jù)模塊的依...
摘要：前言老項(xiàng)目，項(xiàng)目情況端配置運(yùn)行環(huán)境方面有些人開發(fā)環(huán)境是，有些是。以我的開發(fā)環(huán)境為例老項(xiàng)目的運(yùn)行，開發(fā)時(shí)需要先執(zhí)行一個(gè)腳本經(jīng)歷過一次風(fēng)波之后做的人走光啦，但是老項(xiàng)目要繼續(xù)維護(hù)。老項(xiàng)目改造其實(shí)還有不少坑，等我想起來再慢慢更新。 前言 老項(xiàng)目，React + PHP + nginx 項(xiàng)目情況 PHP端配置 PHP運(yùn)行環(huán)境方面：有些人開發(fā)環(huán)境是wamp（apache + PHP），有些是np...
閱讀 2167·2023-04-26 00:09
閱讀 3202·2021-09-26 10:12
閱讀 3559·2019-08-30 15:44
閱讀 2925·2019-08-30 13:47
閱讀 981·2019-08-23 17:56
閱讀 3300·2019-08-23 15:31
閱讀 537·2019-08-23 13:47
閱讀 2627·2019-08-23 11:56
