1. npx create-react-app my-app
2. cd my-app
3. npm start //运行该项目
create-react-app生成的项目文,看不到webpack相关的配置文件,需要先暴露出来,使用如下命令即可
4. npm run eject //yes
5. npm install less-loader less --save-dev //如果之前已经全局安装过less了,去掉`-dev`即可
修改 webpack.config.dev.js 和 webpack.config-prod.js 配置文件
exclude: [
/\.html$/,
/\.(js|jsx)$/,
/\.(css|less)$/, //敲黑板,划重点
/\.json$/,
/\.bmp$/,
/\.gif$/,
/\.jpe?g$/,
/\.png$/,
],
{
test: /\.(css|less)$/, //敲黑板,划重点
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
},
},
{
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
},
//敲黑板,划重点
{
loader: require.resolve('less-loader') // compiles Less to CSS
}
],
}
.在项目中安装 Babel 转换器,需要用到插件 babel-preset-react, babel-preset-latest,latest 即最新的 ES 规范,包括了 Async/Await 这些新特性
6. npm install babel-loader babel-core babel-preset-react babel-preset-latest --save