静态资源打包（样式）

以.scss为例

const path = require('path');

module.exports = {
    mode: 'development',
    entry: {
        main: './src/index.js'
    },
    module: {
        rules: [{
            test: /\.scss$/,
            use: [
                //将css代码挂载到页面上
                'style-loader', 
                //识别css语法，将多个css代码编译成一段css代码
                {
                    loader: 'css-loader',
                    options: {
                        //当scss文件里引入了其他scss样式文件时，重新走前面两个loader
                        importLoaders: 2,
                        //配置css是否按照模块化打包，当值为true时，想要css生效需要使用该语法
                        //import style from "./../.."
                        //

                        modules: true,
                    }
                },
                //识别scss/sass语法，编译成css语法
                'sass-loader',
                //自动添加各浏览器兼容语法，添加浏览器前缀
                'postcss-loader'
            ]
        }]
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
}

在使用前需要npm install 对应的loader,在安装了postcss-loader之后，我们需要对该loader进行单独的配置。

• 新建一个文件夹为postcss.config.js

• 进行如下配置，postcss-loader会按照该文件夹规则进行打包

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

样式loader

• style-loader: 将css代码挂载到页面上

• css-loader: 识别css语法，将多个css代码编译成一段css代码

• sass-loader: 识别scss/sass语法，编译成css语法

• postcss-loader: 自动添加各浏览器兼容语法，添加浏览器前缀