webpack初始化vue项目(四)——其它插件安装

在上一章，我们已经可以正常的编译运行项目了
我们还需要一些插件来加快我们的开发速度
1.postcss-loader和autoprefixer
这两个loader用于补齐css的兼容前缀
类似 -webkit
-moz
-o
先下载两个模块
npm install postcss-loader autopredixer

配置
postcss-loader
项目根目录下新建一个 postcss.config.js

const autoprefixer =require('autoprefixer')

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

2.bable-loader,bable-core
这个两个模块支持jsx转换js
先下载两个模块
npm install bable-loader bable-core
还需要下载
babel-preset-env
babel-plugin-transform-vue-jsx
npm install babel-preset-env babel-plugin-transform-vue-jsx

配置
项目根目录下新建一个 .babelrc
···
{
"presets":[
"env"
],
"plugins": [
"transform-vue-jsx"
]
}

webpack.config.js配置
在rules下加一个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'
]
}