1. 程式人生 > >node+webpack(三)

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