webpack进阶之路（二）

加载CSS文件

//加载CSS文件
npm install --save-dev style-loader css-loader

css-loader： 辅助解析 js 中的 import "../css/index.css" ;（webpack不能解析css文件，需要借助于loader解析css代码）
style-loader: 把 js 中引入的 css 内容 注入到 html 标签中，并添加 style 标签。 

//webpack.config.js
const path = require("path");
module.exports = {
    mode: "development",
    entry: "./src/js/index.js",
    output: {
        path: path.resolve(__dirname,"dist"),
        filename: "main.js"
    },
    module: {
        rules: [
          {
            test: /\.css$/,
            use: ['style-loader', 'css-loader'] //从后往前执行,先用css-loader解析css，在用style-loader把样式注入到style标签里
          }
        ]
    }
}

//index.js
import "../css/index.css";
function createDomElement() {
  var dom = document.createElement('div');
  dom.innerHTML = '有勇气改变可以改变的,有胸怀接受不可改变的,有智慧分辨两者的不同';
  dom.className = "box";
  return dom;
}
document.body.appendChild(createDomElement());

console.log("syy");

/* index.css */
.box{
    background: #f00;
}

 执行npx webpack进行构建

手动将main.js引入到index.html后，预览index.html，发现css-loader已解析成功，样式成功呈现。 

 打开控制台，会发现样式注入到了style中：

 加载scss原理基本相同：

//加载Sass文件
npm install sass-loader node-sass --save-dev

//CSS3自动添加前缀
npm i postcss-loader autoprefixer -D

//webpack.config.js
const path = require("path");
module.exports = {
    mode: "development",
    entry: "./src/js/index.js",
    output: {
        path: path.resolve(__dirname,"dist"),
        filename: "main.js"
    },
    module: {
        rules: [
          {
            test: /\.(sc|c|sa)ss$/,
            use: [
                'style-loader', 
                {
                    loader: "css-loader",
                    options: {//sourceMap作用是，可以在控制台的样式里看到样式对应的文件，方便调试,截图如下
                      sourceMap: true,
                      insertAt:'top' //打包后，位置在style的最上面
                    }
                },
                {
                    loader: 'postcss-loader', //自动添加css3前缀
                    options: {
                        ident: 'postcss',
                        sourceMap: true,
                        plugins: loader => [require('autoprefixer')({ overrideBrowserslist: ['> 0.15% in CN'] }) // 添加前缀
                        ]
                    }
                },
                {
                    loader: "sass-loader",
                    options: {
                        sourceMap: true
                    }
                }//从后往前执行,先用sass-loader解析scss,再用style-loader把样式注入到style标签里
            ]
          }
        ]
      }
}

入口文件index.js引入index.scss后，执行npx webpack，刷新，页面样式变化：

特别说明，为了方便调试，配置sourceMap，配置后与配置前控制台对比：

对应的css/scss文件内容：

//index.css
.box{
    background: #f00;
}


//index.scss
$height:100px;
.box{
    height: $height;
}

综上所述职，webpack打包css/scss文件，完整的配置如下：

//webpack.config.js
const path = require("path");
module.exports = {
    mode: "development",
    entry: "./src/js/index.js",
    output: {
        path: path.resolve(__dirname,"dist"),
        filename: "main.js"
    },
    module: {
        rules: [
          {
            test: /\.(sc|c|sa)ss$/,
            use: [
                'style-loader', 
                {
                    loader: "css-loader",
                    options: {//sourceMap作用是，可以在控制台的样式里看到样式对应的文件，方便调试,截图如下
                      sourceMap: true
                    }
                },
                {
                    loader: 'postcss-loader', //自动添加css3前缀
                    options: {
                        ident: 'postcss',
                        sourceMap: true,
                        plugins: loader => [require('autoprefixer')({ overrideBrowserslist: ['> 0.15% in CN'] }) // 添加前缀
                        ]
                    }
                },
                {
                    loader: "sass-loader",
                    options: {
                        sourceMap: true
                    }
                }//从后往前执行,先用sass-loader解析scss,再用style-loader把样式注入到style标签里
            ]
          }
        ]
      }
}