刚刚开始学习react不久,用react和webpack3搭建了一个脚手架  

和之前的webpack第一版本不一样,css的配置:

 module:{
        rules:[
            {
                test: /\.less$/, exclude: /node_modules/, use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    //如果需要,可以在 sass-loader 之前将 resolve-url-loader 链接进来
                    use: ['css-loader', 'postcss-loader', 'less-loader']
                })
            },
            {
                test: /\.css$/, exclude: /node_modules/, use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    //如果需要,可以在 sass-loader 之前将 resolve-url-loader 链接进来
                    use: ['css-loader', 'postcss-loader']
                })},
            {
                test: /\.scss/, exclude: /node_modules/, use: ExtractTextPlugin.extract({
                use:[ 'css-loader','sass-loader'],
                fallback: 'style-loader',
            })
            }
    }

插件的配置也有变化:

new webpack.LoaderOptionsPlugin({
            options: {
                postcss: function () {
                    return [precss, autoprefixer];
                },
                eslint:{
                    configFile: '.eslintrc'
                }
            }
        })

详细的脚手架在:https://github.com/weiweiyx/react/tree/master 

posted on 2017-11-22 15:49  薇笑感染嘴角  阅读(143)  评论(0编辑  收藏  举报