webpack-用loader加载css样式、图片、字体、数据

起步

1、首先我们先创建一个项目，我将其命名为webpack-loader

mkdir webpack-loader
cd webpack-loader
npm init 
npm install webpack webpack-cli --save-dev

由于webpack是本地安装的，所以此时相较于全局安装多了node_modules和package-lock.json

安装完毕后我的目录如下所示：

image.png

其中.gitignore是自己创建的，用于在推送远端仓库时忽略node_modules（因为该文件夹很大），在这里只需把不想上传到远端仓库的文件或文件夹写上即可

node_modules/

2、创建以下目录结构、文件和内容

image.png

src/main.js #出口文件

function component() {
    var el = document.createElement('div');
    el.innerHTML="My webpack app for learning loader."
    return el;
  }

document.body.appendChild(component());

index.html #展示页

<body>
    <script src="./dist/bundle.js"></script>
</body>

webpack-config.js

const path = require('path');

module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  mode: 'development'
};

package.json

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build": "webpack" //加上这一条方便运行命令 --config在这里可以忽略不写
},

3、打包文件

npm run build

这个时候一个新的项目就基本搭建好了，接下来开始应用loader来加载其他类型的文件

管理资源

加载css

  1. 安装并添加 style-loader 和 css-loader：

    npm install --save-dev style-loader css-loader

    安装完成后你的package.json就会多出以下两项，表示安装成功了

image.png

  1. 配置webpack.config.js

    module.exports = {
  //...
  module:{
      rules:[
          {
              test: /\.css$/, //正则表达式，表示以.css结尾的文件
              use:[
                  'style-loader',
                  'css-loader'
              ]
          }
      ]
  }
};

    现在，你就可以在依赖于css样式的文件中 import css文件了

  2. 在src目录下创建index.css（名称也可以是其他），在里面任意加上一个样式：

    .font{
    color: red;
}

  3. 在入口文件src/main.js中引入该文件并应用上该样式

    import './index.css'; //引入

function component() {
    var el = document.createElement('div');
    el.innerHTML="My webpack app for learning loader."
    el.classList.add('font'); //给元素加上该样式
    return el;
  }

  4. 打包

    npm run build

    这个时候你就能在页面上看到红色字体了

加载图片

file-loader用于打包文件类型的资源，并返回其publicPath

  1. 安装file-loader

    npm install --save-dev file-loader

  2. 配置file-loader

    module.exports = {
  //...
  module:{
      rules:[ 
        {
          //...上面加载css的配置
        },
        
        //加载图片的配置
        {
          test: /\.(png|svg|jpg|gif)$/,
          loader: 'file-loader',
          query: {
              
            //指定生成的图片的名称
            name: '[name].[ext]',
              
            //指定文件的输出目录，此处应为相对于webpack输出目录dist的相对路径。这里即/dist/static/img/
            outputPath: 'static/img/',
              
            //指定请求文件时的URL。自动生成的URL为/dist/static/img/${url}，
            publicPath: './dist/static/img/'
            //为什么要这样写呢？以下方引入图片例，你引入的只是一个单纯url。
            //由于打包，该图片默认会输出在dist中，（这里因为上面配置了所以会输出在：dist/static/img/中）
            //所以如果像下方一样直接给src赋值url，会因为路径不对而显示不出来，那么该配置就起到了作用了
          }
        }
      ]
  }
};

    现在当你用 import引入本地图片或在其他地方用到图片时，该图片将被处理并添加到出口文件中

  3. 在src目录下随意添加一个图片，我添加了一张yebo.jpg的图片

  4. 在src/main.js引入该图片

    import Yebo from './yebo.jpg'; //变量yebo就是被处理后的图片url

function component() {
    var el = document.createElement('div');
    el.innerHTML="My webpack app for learning loader."

    var myyebo = new Image();//创建一个图片对象（img标签）
    myyebo.src = Yebo
    myyebo.style.width='300px'
    el.appendChild(myyebo)//在div中插入图片

    return el;
  }

document.body.appendChild(component());

  5. 打包

    npm run build

加载字体

  1. 在安装了file-loader的基础上配置package.json

    module.exports = {
  //...
  module:{
      rules:[ 
        {//...之前加载图片的配置},
        {//...加载图片的配置},
            
        //加载字体的配置
        {
          test:/\.(woff|woff2|eot|ttf|otf)$/,
          loader: 'file-loader',
          //同理这里也修改下路径，否则会看不到效果
          query: {
            name: '[name].[ext]',
            outputPath: 'static/fonts/',
            publicPath: './dist/static/fonts/'
          }
        },
      ]
  }
};

    现在就可以加载字体啦

  2. 在/src添加字体，如图，我添加了一个ttf格式的字体

    image.png

  3. 在src/index.css中引入该字体

    //自定义字体
@font-face{
    font-family: 'Test';/* 给你的字体命名 */
    src:url("./楷体.ttf");/* 引入，可以是多个 */
    font-weight: 600;
    font-style: normal;
}

.font{
    color: red;
    font-family: "Test"; /* 应用 */
    font-size: 30px;
}

  4. 此时main.js是这样的

    import './index.css';

function component() {
    var el = document.createElement('div');
    el.innerHTML="我来了。"
    el.classList.add('font'); //给元素加上该样式
    return el;
  }

document.body.appendChild(component());

  5. 打包

加载数据

加载的有用资源还有数据，如 JSON 文件，CSV、TSV 和 XML。

类似于 NodeJS，JSON 支持实际上是内置的，也就是说引入json数据默认将正常运行

如果你要导入 CSV、TSV 和 XML，那么就需要loader的帮助了

  1. 安装csv-loader& xml-loader

    npm install --save-dev csv-loader xml-loader

  2. 配置

    module.exports = {
  //...
  module:{
      rules:[ 
        //...
        {
          test:/\.(csv|tsv)$/,
          use:[
            'csv-loader'
          ]
        },
        {
          test:/\.xml$/,
          use:[
            'xml-loader'
          ]
        }
      ]
  }
};

  3. 在src目录下添加data.xml数据文件，内容如下

    <?xml version="1.0" encoding="UTF-8"?>
<note>
  <to>Mary</to>
  <from>John</from>
  <heading>Reminder</heading>
  <body>Call Cindy on Tuesday</body>
</note>

  4. 在main.js引入并应用

    import Data from './data.xml'; //引入

function component() {
    var el = document.createElement('div');
    el.innerHTML="我来了。"
    console.log(Data) //在控制台输出
    return el;
  }

document.body.appendChild(component());

  5. 打包
    这个时候你就能在控制台看到打印出来的数据了

posted @ 2020-09-01 14:58  sanhuamao  阅读(433)  评论(0)  编辑  收藏  举报