从零开始学webpack笔记 3

自行学习整理，边学边记，没了解过webpack的同学可以一点点看完，或许会有些帮助，不成熟的地方欢迎指正，转载请注明出处！！！

js和html都打包了，那下一步当然就是样式文件了，先从普通的css文件说起

1，编辑index.css文件

简单的写个样式就行

body{
  background: skyblue;
}

然后在index.js引入css文件

import Show from './show.js';
import './index.css';

Show();
function component () {
  let element = document.createElement('div');

  element.innerHTML = 'Hello webpack123'

  return element;
}

document.body.appendChild(component());

2，打包css文件

需要安装两个插件css-loader和style-loader

npm i css-loader style-loader -D

什么是loader呢？这里粘贴webpack官网的解释

loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS文件！

简言之，loader就是把其他东西转为js

3，编辑webpack.config.js文件

需要增加module，先看代码

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = () => {
  return {
    // entry: path.resolve(__dirname, 'src/index.js'),
    // entry: path.resolve(__dirname, 'src', 'index.js'),
    entry: {
      index: [path.resolve(__dirname, 'src/index.js')]
    },
    output: {
      filename: 'js/[name].js',
      path: path.resolve(__dirname, 'dist'),
    },
    plugins: [
      new HtmlWebpackPlugin(),
    ],
    module: {
      rules: [
        {
          test: /\.css$/,
          use: [
            // {
            //   loader: 'style-loader'
            // },
            'style-loader',
            // {
            //   loader: 'css-loader',
            //   options: {
            //     modules: true
            //   }
            // },
            'css-loader'
          ]
        }
      ]
    }
  }
}

注释：
这里用到的module，rules，test，use解释起来比较麻烦，可以点击前往官网查看说明
module.rules test use 条件

注意：
loader的执行顺序是从下到上，也就是这里会先执行’css-loader’，然后再执行’style-loader’，如果写反，会报错

4，重新npm start

应该就能看到样式了，不过此时样式是以style标签直接写在html中的，这是style-loader的效果
其他各种loader的功能可以点击loaders查看，建议看一些常用的loader，可以让你了解ues中的顺序到底应该怎么放，至于哪些是常用的，去自己做过的项目里看或者百度都ok
推荐看一下css-loader及下面的modules，因为这可能是最基本的部分