说明
玩转webpack课程学习笔记。
解析 CSS
1、安装依赖
npm i style-loader css-loader -D
css-loader 用于加载 .css 文件，并且转换成 commonjs 对象。
style-loader 将样式通过 <style> 标签插入到 head 中。
2、search.css测试文件
.search-text { font-size: 48px; color: green; }
3、search.js测试文件
import React from 'react'; import ReactDOM from 'react-dom'; import './search.css'; class Search extends React.Component { render() { return <div className="search-text">Search Text</div> } } ReactDOM.render( <Search/>, document.getElementById('root') )
4、webpack.config.js配置
注意：loader是链式调用的，顺序是从右到左的，先是css-loader调用完再调用style-loader，所以应该style-loader写在前面。
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: /.css$/, use: [ 'style-loader', 'css-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>
