从0开始学习webpack-管理资源-极光社区

代码路径

可以在 github-webpack-管理资源找到本小节要学习的代码

为什么要用loader

webpack只能识别 .js，如果碰到了 .css .png 这些是识别不出来的，如果直接使用，会报错

加载css

使用 npm 安装两个loader，分别是 css-loader 和 style-loader: npm install save-dev css-loader style-loader,两个loader作用如下：

css-loader: 把css文件变成对象形式（代码中有相应的log打印，可以查看）
style-loader: 把css转成的对象插入到js中

大致代码如下：

webpack.config.js loader加载部分

module: {
     rules: [
       {
         test: /\.css$/,
         use: [
           'style-loader',
           'css-loader'
         ]
       }
     ]
}

src/style.css

.hello {
  color: red;
}

src/index.js

import _ from 'lodash';
import './style.css';

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

    // lodash 是由当前 script 脚本 import 导入进来的
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
    element.classList.add('hello');

    return element;
  }

document.body.appendChild(component());

大家可以运行代码，在页面可以看到相应的样式变化

css-loader的题外话

大家如果用过react、vue框架的话，肯定知道样式隔离（两个组件有相同的样式，不会被覆盖）

vue中处理样式隔离是通过scope，原理是生成唯一的属性选择器在元素中，从而进行隔离

react则通过css-module进行隔离，原理是改写class，让其唯一，这里就需通过webpack对css-loader进行配置，代码如下：

webpack.config.js

 module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: false, // 默认是 false

                            /**** css module配置 ****/
                            modules: true,
                            localIdentName: '[path]-[name]-[local]-[hash:base64:5]',
                            camelCase: true 
                        }
                    }
                ]
            }
                ]
}

其中参数进行一些讲解：

modules: 是否开启css-module
localIdentName: 生成的class的规则
- path：目录路径
- name：文件名称
- local：原先的className
- [hash:base64:5]: base64的hash值，取前五位
camelCase: true，那么在jsx中使用的className={style.titleTest},在css可以定义成title-test: {...}

加载图片

安装相应的loader：npm i save-dev fle-loader

webpack配置 file-loader

相应代码如下：

webpack.config.js

 {
         test: /\.(png|svg|jpg|gif)$/,
         use: [
           'file-loader'
         ]
 }

src/index.js

  import _ from 'lodash';
  import './style.css';
  import Icon from './icon.png';

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

    // lodash，现在由此脚本导入
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
    element.classList.add('hello');

    // 将图像添加到我们已经存在的 div 中。
    var myIcon = new Image();
    myIcon.src = Icon;

    element.appendChild(myIcon);

    return element;
  }

  document.body.appendChild(component());

为什么要import图片

看到上面代码，有些同学可能觉得 myIcon.src='path/img/xxx.png',为什么还要import进图片了？

这是因为webpack打包之后的图片路径以及图片名称跟原先都由可能是不一样的（demo中可以查看编译之后的图片路径和名称），所以如果在写代码中写死了路径，那么在打包运行因为找不到图片是会报错的

扯一扯框架（vue、react）

我们了解了为什么要import图片之后，其实就很容易理解为什么react中使用图片要先import，在使用。

不过使用vue框架的同学可能会说，vue中就是直接通过src写死路径的，打包之后也不报错。其实vue可以直接这么使用，是因为vue-loader中已经提前处理了，但是原理不变，代码如下：

<img src="../image.png"> // html页面

将会编译为：

createElement('img', { attrs: { src: require('../image.png') }}) // require跟import都是引入资源

结束语

本篇文章主要讲解的是管理资源，主要通过样式和图片资源进行讲解，其他的资源都是差不多的形式，大家找到对应资源的loader，就可以很轻易的进行资源管理了，下一章将跟大家分享下管理输出相关的知识

从0开始学习webpack-管理资源