webpack4详细教程，从无到有搭建react脚手架（三）

相关链接

• webpack4详细教程，从无到有搭建react脚手架（一）
• webpack4详细教程，从无到有搭建react脚手架（二）

Css

安装loader

yarn add style-loader css-loader -D

配置

config/webpack.common.js

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

创建src/app.css

src/app.css

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

src/App.js

        + import './app.css';

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

yarn start， 效果：

Scss

安装loader

    yarn add sass-loader node-sass -D

配置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"]
                        }
                    ]
                },
                ...
            }
        }

创建src/app.scss

src/app.scss

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

src/App.js

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

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

yarn start, 效果：

配置css-module模式

修改配置

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"
                            + ]
                        }
                    ]
                },
                ...
            }
        }

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);

yarn start

现在编译后的css由js动态内联在html中，需要分离到单独的文件

安装插件extract-text-webpack-plugin， 注意最新版才支持webpack4

yarn add extract-text-webpack-plugin@next -D

配置

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"
            }),
        ]

yarn build, 效果：

使用postcss对css3属性添加前缀

安装

yarn add postcss-loader postcss-import autoprefixer -D

配置

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')()
                            +         ]
                            +     }
                            + }
                        ]
                    })
                },
                ...
            ]
        }

对生产模式下的css进行压缩

安装

yarn add optimize-css-assets-webpack-plugin -D

配置

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
            +     }),
            + ],
        }
        ...

yarn build， 效果：

css相关配置完了，当然还有一些静态资源的配置

字体

安装loader

yarn add file-loader -D

配置

config/webpack.common.js

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

图片

安装loader

yarn add url-loader -D

配置

config/webpack.common.js

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

添加两张图片

• src/assets/small.jpg -- 6kb
• src/assets/bigger.jpg -- 20kb

引入图片

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);

效果

可以看到，小于10k的图片编译成了base64格式，而大于10k的图片以链接形式赋值给src， 由url-loader的limit选项决定界限

---

相关链接

• webpack4详细教程，从无到有搭建react脚手架（四）

源码github仓库： https://github.com/tanf1995/W...