搭建react 项目 及css模块化，引入第三方js

必须要有node环境

npm install -g create-react-app

create-react-app mypp

cd my-app

npm run eject //将webpack配置文件暴露出来

npm run start

前端npm build 可以自己测试

npm install -g serve 

serve -g build

安装如下依赖包：

"url-search-params-polyfill": "^5.0.0",

"babel-plugin-react-html-attrs": "^2.1.0",

"react-router-dom": "^4.3.1",

 

css使用模块化，可以使用class

webpack.config.dev.js

test: cssRegex,

            //exclude: cssModuleRegex,

            use: getStyleLoaders({

              importLoaders: 1,

                modules: true, //开启css模块化

                //[path]-[name]-[local]-[hash:base64:6]

                localIdentName: '[local]-[hash:base64:6]'

            }),

              exclude:[//排除这两个文件夹下面的css文件

                  resolve('node_modules'),

                  resolve('src/assets/css/common')

              ]

'react-html-attrs'//解决clasName的问题

function resolve (dir) {

    return path.join(__dirname, '..', dir)

}

 

{

            test: cssRegex,

            //exclude: cssModuleRegex,

            use: getStyleLoaders({

              importLoaders: 1,

                modules: true, //开启css模块化

                //[path]-[name]-[local]-[hash:base64:6]

                localIdentName: '[local]-[hash:base64:6]'

            }),

              exclude:[//排除这两个文件夹下面的css文件

                  resolve('node_modules'),

                  resolve('src/assets/css/common')

              ]

          },

            {

                test:/\.css$/,

                use:['style-loader','css-loader'],

                include:[//样式只应用到这两个文件夹下面的css文件中

                    resolve('node_modules'),

                    resolve('src/assets/css/common')

                ]



            },

 

{

            test: cssRegex,

            //exclude: cssModuleRegex,

            loader: getStyleLoaders({

              importLoaders: 1,

              sourceMap: shouldUseSourceMap,

                modules: true, //开启css模块化

                //[path]-[name]-[local]-[hash:base64:6]

                localIdentName: '[local]-[hash:base64:6]'

            }),

              exclude:[//排除这两个文件夹下面的css文件

                  resolve('node_modules'),

                  resolve('src/assets/css/common')

              ],

            // Don't consider CSS imports dead code even if the

            // containing package claims to have no side effects.

            // Remove this when webpack adds a warning or an error for this.

            // See https://github.com/webpack/webpack/issues/6571

            sideEffects: true,

          },

{

                test:/\.css$/,

                use:['style-loader','css-loader'],

                include:[//样式只应用到这两个文件夹下面的css文件中

                    resolve('node_modules'),

                    resolve('src/assets/css/common')

                ]



            },

 

 

引入第三方js

/*eslint-disable*/ 

关闭下面的所有的eslint检查

zepto.js 中首行也添加 这行代码 

 

参考：https://github.com/saturday-yh/react16.x-template