实战篇

使用ES6

能将ES6代码转为ES5代码

npm i -D babel-core babel-loader
npm i -D babel-preset-env

module.exports = {
  module: {
    rules: [
      {
        test: /.js$/,
        use: ['babel-loader'],
      },
    ]
  },
  // 输出 source-map 方便直接调试 ES6 源码
  devtool: 'source-map'
};

使用TS

npm i -D typescript awesome-typescript-loader

 resolve: {
    // 先尝试 ts 后缀的 TypeScript 源码文件
    extensions: ['.ts', '.js']
  },
  module: {
    rules: [
      {
        test: /.ts$/,
        loader: 'awesome-typescript-loader'
      }
    ]
  },
  devtool: 'source-map',// 输出 Source Map 方便在浏览器里调试 TypeScript 代码

SCSS

• npm i -g node-sass
• npm i -D sass-loader css-loader style-loader (安装 Webpack Loader 依赖)
• npm i -D node-sass sass-loader (依赖 node-sass)

module.exports = {
  module: {
    rules: [
      {
        test: /.scss$/,
        // SCSS 文件的处理顺序为先 sass-loader 再 css-loader 再 style-loader
        use: ['style-loader', 'css-loader', 'sass-loader'],
      },
    ]
  },
};

PostCss

• npm i -D postcss-loader css-loader style-loader (安装 Webpack Loader 依赖)
• npm i -D postcss-cs(安装对应的 PostCSS 插件依赖)

module.exports = {
  module: {
    rules: [
      {
        // 使用 PostCSS 处理 CSS 文件
        test: /.css$/,
        use: ['style-loader', 'css-loader', 'postcss-loader'],
      },
    ]
  },
};