vue项目 根目录下.babelrc postcss.config.js

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

.babelrc 作用&配置

• babel用的配置文件
• .babelrc 为了使用vue的render方法和vue支持jsx

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

• 使用以上两个包，需要安装一下

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

• 然后在 webpack-config.js加一段代码

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

• 还需要在styl 下的use加入这个loader配置
• 因为使用stylus-loader 会自动生成sourceMap； postcss-loader 自己也能生成sourceMap，当前面stylus-loader 已经生成了sourceMap ，那这个配置项能直接使用前面生成的sourceMap，好处是编译效率快，既定的用法，官方文档有说明

{
   loader: 'postcss-loader',
    options: {
        sourceMap: true
    }
},

后面需要安装两个包

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

postcss.config.js 作用&配置

• 给postcss用的
• postcss 是帮我们后处理css ，css已经编译完成了，在stylus-loader编译成css之后，在通过postcss优化css，通过一系列组件去优化，比如以下，通过autoprefixer 添加css前缀

const autoprefixer = require('autoprefixer')

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