webpack 配置 vue jsx 和postcss

1.安装

npm i postcss-loader autoprefixer babel-loader babel-core

2.在根目录创建两个文件

.babelrc
postcss.config.js

3.在postcss.config.js中

const autoprefixer = require('autoprefixer')

module.exports={
  plugins:[
    autoprefixer()
  ]
}

4.在.bablerc文件中

{
  "presets": [
    "env"
  ],
  "plugins": [
    "transform-vue-jsx"
  ]
}

5.安装依赖包

npm i babel-preset-env babel-plugin-transform-vue-jsx

6.在webpack.config.js
中配置

{
        test: /\.jsx$/,
        loader: 'babel-loader'
      },

{
        test:/\.styl$/,
        use:['style-loader','css-loader',{
            loader:'postcss-loader',
            options:{
              sourceMap:true
            }
        },'stylus-loader']
      },

7.查看少什么package

npm i babel-helper-vue-jsx-merge-props  babel-plugin-syntax-jsx

8 npm run dev