Open
Description
渣渣一枚，目前只能想到这些了，以后想到再补。
Webpack + Babel
在webpack中使用Babel通过使用babel-loader即可，babel中的配置可以通过options选项进行配置。
安装：
npm i babel-loader -Dconst 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 -Dconst config = {
// ......
module: {
rules: [{
test: /\.js$/,
use:[
'eslint-loader',
'babel-loader'
]
}]
}
};
module.exports = config;Webpack + Sass
在Webpack中对Sass进行编译需要使用sass-loader，而sass-loader依赖于node-sass和webpack，因此需要安装
npm i node-sass sass-loader webpack -D由于sass没有提供重写url的功能，因此所有的链接资源都是相对于输出文件（output）来说的，因此在实际开发中通常会加入resolve-url-loader来实现资源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 -Dconst config = {
// ......
module: {
rules: [{
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
'less-loader'
]
}]
}
};
module.exports = config;
Activity