开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

社区首页 >专栏 >Webpack系列——Webpack + xxx配合使用

Webpack系列——Webpack + xxx配合使用

用户1515472

发布于 2019-07-24 14:13:02

6530

发布于 2019-07-24 14:13:02

举报

文章被收录于专栏：忽如寄的前端周刊忽如寄的前端周刊忽如寄的前端周刊

渣渣一枚，目前只能想到这些了，以后想到再补。

Webpack + Babel

在webpack中使用Babel通过使用babel-loader即可，babel中的配置可以通过options选项进行配置。安装：

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进行编译需要使用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 -D

const config = {
  // ......
  module: {
    rules: [{
      test: /\.scss$/,
      use: [
        'style-loader',
        'css-loader',
        'less-loader'
      ]
    }]
  }
};

module.exports = config;

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

评论

登录后参与评论

0 条评论

热度

最新

LV.

目录

Webpack + Babel
Webpack + ESLint
Webpack + Sass
Webpack + Less