webpack之引入css样式

由于webpack只识别标准的javascript语法,无法识别css语法，所有需要用专门的css-loader转换，然后再用style-loader构建在html页面

1.新建style.css文件,app.css文件（控制react中的div样式）

body{
    background: red;
}

.rea{background: orange}

　　

2.在app.js引入style.css文件

import  React    from  'React';
import  ReactDOM from  'react-dom';
import './style.css';

import './app.css';

ReactDOM.render( <div className='rea'>React</div>, document.getElementById('cdd') );

3.安装css-loader

cnmp i -D css-loader

4.安装style-loader

cnmp i -D style-loader

5.在webpack.config.js文件配置style-loader,css-loader

const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports={//node.js语法导出一个对象
    entry:'./src/app.js',
    output:{
        path:path.resolve(__dirname,'dist'),//绝对路径
        filename:'main.js',
    },
    plugins:[//生成html
        new htmlWebpackPlugin({
            filename:'index.html',
            template:'src/index.html'
        })
    ],
    module:{
        rules:[{
            test:/\.js$/,
            use:[{
                loader:'babel-loader',
                options:{
                    presets:['react']
                }
            },]
             },
            {
                test:/\.css$/,
                use:['style-loader','css-loader']//程序会先加载css-loader，然后在加载style-loader文件
            }]
    },
    devServer:{
        open:true,//自动打开服务器首页
        port:9000,
        inline:true,
    }
}

6.在服务器中运行配置

cnmp run start