说明
玩转webpack课程学习笔记。
解析图片
1、安装依赖
npm i file-loader -D
file-loader 用于处理文件。
2、找一张自己喜欢的ido
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>
