参考

webpack loaders
sass

编译Sass

webpack编译sass需要使用到的loader:

• style-loader
  创建style标签，并将模块的导出的样式添加到 标签中；
  让CSS在页面生效,让样式变成页面中的style标签;

• css-loader
  解析CSS文件后，使用import加载，并且返回 CSS代码；
  加载CSS文件，包装成webpack能够识别的CSS,但不能让CSS文件产生效果;

*sass-loader
将sass文件编译成CSS；

• postcss-cssnext
  允许使用CSS的未来特性
• postcss-loader
  给css3特性添加兼容前缀
• autoprefixer
postcss-loader需要借助autoprefixer插件来根据浏览器的兼容性为CSS3的属性添加前缀；

根据浏览器的兼容来帮助选择性添加兼容前缀，因为autoprefixer中内置了一个浏览器兼容表，某个样式大于5%（可修改），就会兼容

配置

1.创建本地项目webpack-demo

mkdir webpack-demo
cd webpack-demo

2.在webpack-demo的根目录下创建package.json文件

npm init -y

3. 安装webpack依赖包

npm i webpack webpack-cli webpack-dev-server --save-dev

模块说明：

• webpack
webpack核心

• webpack-cli
webpack的脚手架（启动器）

• webpack-dev-server
  开发环境下用于实时加载依赖

4.修改package.json文件的scripts属性值,进行打包资源的配置

"scripts": {
    "dev": "webpack-dev-server --open --mode development",
    "build": "webpack --mode production"
  },

5.安装需要的loader和依赖

cnpm i style-loader css-loader node-sass sass-loader postcss-loader autoprefixer postcss-cssnext -D

6.在项目中创建一个名为test.scss的文件

$color: #333;
$bg-color: #00a0e6;
$border:1px solid #00a0e6;
$link-color-hover:  darken($bg-color, 10%);
.btn {
  display: inline-block;
  padding: 6px 12px;
  outline: none;
  border: $border;
  color: $color;
  background: $bg-color;

}
.btn:hover {
  color:$link-color-hover;
}

并将该文件引入项目的webpack的入口文件entry.js中;

7.配置

const path = require('path');
// 显示进程的完成进度
var ProgressBarPlugin = require('progress-bar-webpack-plugin');
// 设置进度字体颜色
const chalk = require('chalk');
// 以树图的方式展示打包后的文件
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
// 输出html
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 清空dist文件夹
const {
  CleanWebpackPlugin
} = require('clean-webpack-plugin');
module.exports = {
  mode: 'production',
  entry: {
    app: './src/app.js'
  },
  output: {
    path: path.resolve(__dirname, '../dist'),
    filename: '[name].[hash].min.js'
  },
  module: {
    rules: [{
        test: /\.jsx?$/,
        use: [{
          loader: 'babel-loader'
        }]
      },
      {
        test: /\.css$/,
        use: [{
            loader: 'style-loader'
          },
          {
            loader: 'css-loader'
          },
          {
            loader: 'postcss-loader'
          }
        ]
      },
      {
        test: /\.scss$/,
        use: [{
            loader: 'style-loader'
          },
          {
            loader: 'css-loader'
          },
          {
            loader: 'postcss-loader'
          },
          {
            loader: 'sass-loader'
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Webpack Study Demo',
      filename: 'index.html', //指定生成的HTML文件名
      template: path.join(__dirname, '../public/index.html') // 指定模板路径
    }),
    new CleanWebpackPlugin(),
    new ProgressBarPlugin({
      format: chalk.green('Progressing') + '[:bar]' + chalk.green(':percent') + '(:elapsed seconds)',
      clear: false
    }),
    new BundleAnalyzerPlugin()
  ]
}

8.配置autoprefixer
在postcss.config.js中配置如下内容：

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}

9.运行编译命令

npm run build