node+webpack(三)

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

1.在根目录创建    postcss.config.js

const autoprefixer = require('autoprefixer')

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

2.在根目录创建      .babelrc 

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

3.安装依赖

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

4.修改webpack.config.js

在rules节点下新增

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

5.修改webpack.config.js

 修改为

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

6.安装依赖

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

 

 

https://github.com/itPoet/vue-webpack-todoapp