webpack从0开始搭建react的ts开发环境（7）

本章演示对css less scss的支持
webpack从0开始搭建react的ts开发环境（6）
demo https://github.com/757566833/webpack-guide

1. 安装对应的loader
   这里不再解释style-loader和 mini-css-extract-plugin的具体细节
   样式文件最终要拆成单独的css文件，就不演示那么多了，一步到位

yarn add mini-css-extract-plugin css-loader --dev

2.添加css支持 webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");
// 这里增加
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
    entry: './src/app.tsx',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'app.js'
    },
    module: {
        rules: [{
                test: /\.tsx?$/,
                loader: "ts-loader",

                exclude: /node_modules/,
            },
//这里增加
            {
                test: /\.css$/,
                use: [{
                        loader: MiniCssExtractPlugin.loader,
                    },
                    {
                        loader: "css-loader",
                    },

                ],
                exclude: /node_modules/,
            },
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: "test",
           template: path.resolve(__dirname, "template.html"),
        }),
//这新加
     new MiniCssExtractPlugin({
           filename: "app.css",
         
        }),
    ]
};

3.src下的app.tsx文件修改为

import React from "react";
import ReactDOM from "react-dom";
import './app.css'
class App extends React.Component {
    public render() {
        return (
            <div>
             <div className='red'>hello red</div>
            </div>
        );
    }
}

ReactDOM.render(<App />, document.getElementById("root"));

4.在src下新加css文件app.css

.red{
    color:red
}

5.npm run webpack

6. 打开dist下的index.html
   7.添加less支持

// 由于antd目前的稳定版为3，所以我们只装less@2
yarn add less@2.7.3 less-loader --dev

8.添加webpack的loader

const path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
    entry: './src/app.tsx',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'app.js'
    },
    module: {
        rules: [{
                test: /\.tsx?$/,
                loader: "ts-loader",

                exclude: /node_modules/,
            },
            {
                test: /\.css$/,
                use: [{
                        loader: MiniCssExtractPlugin.loader,
                    },
                    {
                        loader: "css-loader",
                    },

                ],
                exclude: /node_modules/,
            },
            {
                test: /\.less$/,
                use: [{
                    loader: MiniCssExtractPlugin.loader,
                },
                {
                    loader: "css-loader",
                },
                {
                    loader: "less-loader",

                },
                ],
            },
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: "test",
           template: path.resolve(__dirname, "template.html"),
        }),
        new MiniCssExtractPlugin({
            filename: "app.css",       
        }),
    ]
};

9.新建src/app.less

.green{
    color: green;
}

10.index/app.tsx修改

import React from "react";
import ReactDOM from "react-dom";
import './app.css'
import './app.less'
class App extends React.Component {
    public render() {
        return (
            <div>
                <div className='red'>hello red</div>
                <div className='green'>hello green</div>
            </div>
        );
    }
}

ReactDOM.render(<App />, document.getElementById("root"));

11.npm run webpack

12.添加sass支持

yarn add sass-loader node-sass --dev

13.修改webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
    entry: './src/app.tsx',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'app.js'
    },
    module: {
        rules: [{
                test: /\.tsx?$/,
                loader: "ts-loader",

                exclude: /node_modules/,
            },
            {
                test: /\.css$/,
                use: [{
                        loader: MiniCssExtractPlugin.loader,
                    },
                    {
                        loader: "css-loader",
                    },

                ],
                exclude: /node_modules/,
            },
            {
                test: /\.less$/,
                use: [{
                        loader: MiniCssExtractPlugin.loader,
                    },
                    {
                        loader: "css-loader",
                    },
                    {
                        loader: "less-loader",
                    },
                ],
            },
            {
                test: /\.scss$/,
                use: [{
                    loader: MiniCssExtractPlugin.loader
                }, {
                    loader: 'css-loader',
                }, {
                    loader: 'sass-loader'
                }],
                exclude: /node_modules/
            },
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: "test",
            template: path.resolve(__dirname, "template.html"),
        }),
        new MiniCssExtractPlugin({
            filename: "app.css",
        }),
    ]
};

14.修改app.tsx

import React from "react";
import ReactDOM from "react-dom";
import './app.css'
import './app.less'
import './app.scss'
class App extends React.Component {
    public render() {
        return (
            <div>
                <div className='red'>hello red</div>
                <div className='green'>hello green</div>
                <div className='blue'>hello blue</div>
            </div>
        );
    }
}

ReactDOM.render(<App />, document.getElementById("root"));

15.添加src/app.scss

.blue {
    color: blue
}

16.npm run webpack
17.打开dist/index.html
webpack从0开始搭建react的ts开发环境（8）