Build react Scaffolding from scratch

A link to the

• Build react Scaffolding from scratch

• Build react Scaffolding from scratch

Css

Install the loader

yarn add style-loader css-loader -D
Copy the code

configuration

config/webpack.common.js

.function webpackCommonConfigCreator(options){
            ...
            return{... module: { rules: [ ... + { +test: /\.css$/,
                        +     include: path.resolve(__dirname, '.. /src'),
                        +     use: ["style-loader"."css-loader"[+}]},... }}Copy the code

Create a SRC/app. CSS

src/app.css

        .text{
            font-size: 20px;
            color: brown;
        }
Copy the code

src/App.js

        + import './app.css';

        function App() {return (
                - <div>
                + <div className="text">
                    hello react
                </div>
            )
        }
        ...
Copy the code

yarn start, the effect:

Scss

Install the loader

    yarn add sass-loader node-sass -D
Copy the code

Configure the loader

config/webpack.common.js

.function webpackCommonConfigCreator(options){
            ...
            return{... module: { rules: [ ... { -test: /\.css/,
                        +    test: /\.(css|scss)$/,
                            include: path.resolve(__dirname, '.. /src'),
                        -    use: ["style-loader"."css-loader"]
                        +    use: ["style-loader"."css-loader"."sass-loader"]}]},... }}Copy the code

Create a SRC/app. SCSS

src/app.scss

        .title{
            font-size: 18px;
            font-weight: 800;
            color: # 333;
            text-decoration: underline;
        }
Copy the code

src/App.js

        - import './app.css';
        + import './app.scss';

        function App() {return (
                - <div className="text">
                + <div className="title">
                    hello react
                </div>
            )
        }
        ...
Copy the code

yarn start, the effect:

Configure the CSS-module mode

Modify the configuration

config/webpack.common.js

.function webpackCommonConfigCreator(options){
            ...
            return{... module: { rules: [ ... { ... - use: ["style-loader"."css-loader"."sass-loader"]
                            + use: [
                            +         "style-loader", 
                            +         {
                            +             loader: "css-loader",
                            +             options: {
                            +                 modules: {
                            +                     mode: "local",
                            +                     localIdentName: '[path][name]_[local]--[hash:base64:5]'
                            +                 },
                            +                 localsConvention: 'camelCase'+} +}, +"sass-loader"+]}]},... }}Copy the code

src/App.js

        - import './app.scss';
        + import styles from './app.scss';

        function App() {return (
                - <div className="title">
                + <div className={styles.title}>
                    hello react
                </div>
            )
        }

        export default hot(App);
Copy the code

yarn start

The compiled CSS is now dynamically inlined in HTML by JS and needs to be separated into separate files

Install the extract-text-webpack-plugin, note that webpack4 is only supported in the latest version

yarn add extract-text-webpack-plugin@next -D
Copy the code

configuration

config/webpack.common.js

. + const ExtractTextPlugin = require('extract-text-webpack-plugin'); . module: { rules: [ ... {test: /\.(css|scss)$/,
                    include: path.resolve(__dirname, '.. /src'),
                    - use: [
                    -     "style-loader", 
                    -     {
                    -         loader: "css-loader",
                    -         options: {
                    -             modules: {
                    -                 mode: "local",
                    -                 localIdentName: '[path][name]_[local]--[hash:base64:5]'
                    -             },
                    -             localsConvention: 'camelCase'-} -}, -"sass-loader"
                    - ]
                    + use: ExtractTextPlugin.extract({
                    +     fallback: "style-loader",
                    +     use: [
                    +         {
                    +             loader: "css-loader",
                    +             options: {
                    +                 modules: {
                    +                     mode: "local",
                    +                     localIdentName: '[path][name]_[local]--[hash:base64:5]'
                    +                 },
                    +                 localsConvention: 'camelCase'+} +}, +"sass-loader"+] +})},... ]  }, plugins: [ ... new ExtractTextPlugin({ filename:"[name][hash].css"}),]Copy the code

yarn build, the effect:

Prefixes cSS3 attributes using postCSS

The installation

yarn add postcss-loader postcss-import autoprefixer -D
Copy the code

configuration

config/webpack.common.js

        module: {
            rules: [
                ...
                {
                    test: /\.(css|scss)/,
                    use: ExtractTextPlugin.extract({
                        fallback: "style-loader",
                        use: [
                            ...
                            + {
                            +     loader: "postcss-loader",
                            +     options: {
                            +         ident: 'postcss',
                            +         plugins: loader => [
                            +             require('postcss-import')({ root: loader.resourcePath }),
                            +             require('autoprefixer')() +] +} +}]})},... ] }Copy the code

Compress the CSS in production mode

The installation

yarn add optimize-css-assets-webpack-plugin -D
Copy the code

configuration

config/webpack.prod.js

        + const optimizeCss = require('optimize-css-assets-webpack-plugin');

        const config = {
            + plugins: [
            +     new optimizeCss({
            +         cssProcessor: require('cssnano'),
            +         cssProcessorOptions: { discardComments: { removeAll: true } },
            +         canPrint: true+}), +],}...Copy the code

yarn build, the effect:

CSS configuration is complete, as well as some static resource configuration

The font

Install the loader

yarn add file-loader -D
Copy the code

configuration

config/webpack.common.js

        module: {
            rules: [
                ...
                + {
                +     test: /\.(woff|woff2|eot|ttf|otf)$/,
                +     use: ['file-loader'] +},]},Copy the code

The picture

Install the loader

yarn add url-loader -D
Copy the code

configuration

config/webpack.common.js

        module: {
            rules: [
                ...
                + {
                +     test: /\.(jpg|png|svg|gif)$/,
                +     use: [
                +         {
                +             loader: 'url-loader',
                +             options: {
                +                 limit: 10240,
                +                 name: '[hash].[ext]', +} +}, +] +},]}Copy the code

Add two images

• src/assets/small.jpg — 6kb

• src/assets/bigger.jpg — 20kb

Introduction of pictures

src/App.js

        + import small_pic from './assets/small.jpg';
        + import bigger_pic from './assets/bigger.jpg';

        function App() {return (
                <div className={styles.title}>
                    hello react

                    + <img src={small_pic} alt="" />
                    + <img src={bigger_pic} alt="" />
                </div>
            )
        }

        export default hot(App);
Copy the code

The effect

As you can see, images less than 10K are compiled into Base64 format, while images greater than 10K are assigned to SRC as links, bound by the urL-loader limit option

---

A link to the

• Build react Scaffolding from Scratch

Github repository:Github.com/tanf1995/We…