webpack基础篇（七）：资源解析--解析图片-CFANZ编程社区

webpack基础篇（七）：资源解析--解析图片

说明

玩转webpack课程学习笔记。

解析图片

1、安装依赖

npm i file-loader -D

file-loader 用于处理文件。

2、找一张自己喜欢的ido，比如：

webpack基础篇（七）：资源解析--解析图片_html

3、search.js 引入图片

import React from 'react';
import ReactDOM from 'react-dom';
import './search.less';
import cxk from './images/cxk.jpg';
console.log(cxk);

class Search extends React.Component {
  render() {
    return <div className="search-text">
      Search Text
      <img src={ cxk } />
    </div>
  }
}

ReactDOM.render(
  <Search/>,
  document.getElementById('root')
)

4、webpack.config.js配置

const path = require('path');
module.exports = {
  entry: {
    index: './src/index.js',
    search: './src/search.js'
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].js'
  },
  mode: 'production',
  module: {
    rules: [
      {
        test: /.(png|jpg|gif|jpeg)$/,
        use: 'file-loader'
      }
    ]
  }
};

5、浏览器打开index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="root"></div>
  <script src="./search.js"></script>
</body>
</html>

webpack基础篇（七）：资源解析--解析图片_webpack_02

0 条评论