webpack

webpack second

本着学习的态度去写文章，对于错误或不全还望不吝啬的指正出来（无论对错，重在讨论），十分感谢。别问我为什么学习，为了生活，为了家人，为了自己，需要提升自己来"要价"。
开始写文章主要是为了督促自己学习，买了很多很多书，但是每天上完班下来就懒得动，一天一天的过去，天天写业务逻辑，前端知识停滞不前，还附带遗忘属性，有点罩不住。别着急，先练基本功。
1. loader是什么？

• 引用官方的话说就是，算了别说了。就是一个解析非JavaScript（.json文件不需要）的转换器，转换为webpack可以识别的语言后，让webpack可以进行相关的处理。

2. 别管那么多，先用了来看

• loader很多，图片，文件，Vue，React…，我们就选择最常用的css-loader作为学习（最简单）。
• 第一步都是先安装相关的依赖（自己不带，环境也不带，不安装能干嘛）。
• 终端执行：npm install --save-dev style-loader css-loader。
• 点开webpack.config.json，此刻发呆两分钟，证明配，这时候就要想起一句话，最好的老师是–官方文档（权威，不行或者有问题还可以diss），点击来查看。
• 接下来是做什么，简单思考，你证明判断JPG和CSS文件呢，当然是看后缀啊。所以接下来我们需要根据文件的特点配置相应的规则来处理这一类（css）的文件。

const path = require('path');
module.exports = {
  entry: './src/index.js', // 等会儿再说这里的事
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.css$/i, // 正则，匹配.css结尾的，最后的i表示大小写不敏感，就是大小写都可以。
        use: ['style-loader', 'css-loader'], // 顺序很重要，从右向左解析的。
      },
    ],
  },
};

• 开始验证环节了，src下面创建一个common.css，在index中进行引入，怎么引，当然import。
• 确保打包的明显特征，不引入module1的依赖，只要console和引入的css.
• 执行：npx webpack --config webpack.config.js。
• 执行成功，打包文件，明显变化，OKOK，perfect。
  今天先休息，明日再来，加油啊，骚年们。