文章首发于个人github及我的博客,github请看https://github.com/huruji/blo...,转载请注明出处。
渣渣一枚,目前只能想到这些了,之后想到再补。javascript
在webpack中使用Babel经过使用babel-loader便可,babel中的配置能够经过options选项进行配置。
安装:css
npm i babel-loader -D
const config = { // ...... module: { rules: [{ test: /\.js$/, use:{ loader: 'babel-loader', options: { presets: ['env'] } } }] } }; module.exports = config;
webpack.config.jsjava
const config = { // ...... module: { rules: [{ test: /\.js$/, use:[ 'babel-loader' ] }] } }; module.exports = config;
.babelrcnode
{ "presets": [ "es2015" ] }
使用ESLint使用eslint-loader便可,相似于babel-loader的使用
安装:webpack
npm i eslint-loader -D
const config = { // ...... module: { rules: [{ test: /\.js$/, use:[ 'eslint-loader', 'babel-loader' ] }] } }; module.exports = config;
在Webpack中对Sass进行编译须要使用sass-loader,而sass-loader依赖于node-sass和webpack,所以须要安装git
npm i node-sass sass-loader webpack -D
因为sass没有提供重写url的功能,所以全部的连接资源都是相对于输出文件(output)来讲的,所以在实际开发中一般会加入resolve-url-loader来实现资源url的正常使用github
npm i resolve-url-loader -D
和style-loader、css-loader一块儿使用,这样就能够正常使用编译sass了web
const config = { // ...... module: { rules: [{ test: /\.scss$/, use: [ 'style-loader', 'css-loader', 'resolve-url-loader', 'sass-loader?sourceMap' ] }] } }; module.exports = config;
相似于Sass的使用,Less的编译只须要安装less-loader便可npm
npm i less-loader -D
const config = { // ...... module: { rules: [{ test: /\.scss$/, use: [ 'style-loader', 'css-loader', 'less-loader' ] }] } }; module.exports = config;