webpack之引入css样式

流程

默认webpack只会打包js的代码，想要webpack打包其他内容的时候，就要使用相应的loader。

安装css-loader

1	npm i -D css-loader

安装style-loader

1	npm i -D style-loader

在配置文件添加css loader和style loader模块

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {

    entry: './src/app.js',

    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'app.js',
    },

    plugins: [
        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' ]
            }
        ]
    },

    devServer: {
        open: true,
        port: 9000
    }
};

在app.js里面引入样式文件,可以引入多个


import React from 'react';
import ReactDOM from 'react-dom';

import './main.css';
import './app.css';

ReactDOM.render(
    <div className="ret">React</div>,
    document.getElementById('root')
);

打包项目：

1	npm run dev

运行项目：

1	npm run start

小结

1、首先在配置文件添加新的规则来匹配.css格式的文件

2、然后添加两个loader,处理顺序：当匹配到css这个loader之后，会先启用css-loader来处理里面的内容，当这些内容处理完成得到结果之后会把这些处理完成的东西再继续交给style-loader来处理