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