必须要有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 中首行也添加 这行代码