在上一章，我們已經(jīng)可以正常的編譯運(yùn)行項(xiàng)目了
我們還需要一些插件來加快我們的開發(fā)速度
1.postcss-loader和autoprefixer
這兩個(gè)loader用于補(bǔ)齊css的兼容前綴
類似 -webkit
-moz
-o
先下載兩個(gè)模塊
npm install postcss-loader autopredixer

配置
postcss-loader
項(xiàng)目根目錄下新建一個(gè) postcss.config.js

const autoprefixer =require('autoprefixer')

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

2.bable-loader,bable-core
這個(gè)兩個(gè)模塊支持jsx轉(zhuǎn)換js
先下載兩個(gè)模塊
npm install bable-loader bable-core
還需要下載
babel-preset-env
babel-plugin-transform-vue-jsx
npm install babel-preset-env babel-plugin-transform-vue-jsx

配置
項(xiàng)目根目錄下新建一個(gè) .babelrc
···
{
"presets":[
"env"
],
"plugins": [
"transform-vue-jsx"
]
}

webpack.config.js配置
在rules下加一個(gè)babel-loader的配置

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

style-loader的配置改為

{
test:/.style/,
use:[
'style-loader',
'css-loader',
{
loader:'postcss-loader',
options:{
sourceMap:true,//用前面的sourceMap加快速度
}
},
'stylus-loader'
]
}