loader如何使用(2)

// wepback 1 vue: { cssModules: { // overwrite local ident name localIdentName: '[path][name]---[local]---[hash:base64:5]', // enable camelCase camelCase: true } } // webpack 2 module: { rules: [ { test: '\.vue$', loader: 'vue', options: { cssModules: { localIdentName: '[path][name]---[local]---[hash:base64:5]', camelCase: true } } } ] }

PostCSS

任何vue-loader处理输出的css都经过PostCSS进行局部css重写，我们也可以增加PostCSS插件进行这些处理，如autoprefixer和 CSSNext。

Webpack 1.x用法：

// webpack.config.js module.exports = { // other configs... vue: { // use custom postcss plugins postcss: [require('postcss-cssnext')()] } }

Webpack 2.x用法：

// webpack.config.js module.exports = { // other configs... plugins: [ new webpack.LoaderOptionsPlugin({ vue: { // use custom postcss plugins postcss: [require('postcss-cssnext')()] } }) ] }

postcss也支持插件数组

postcss: { plugins: [...], // list of plugins options: { parser: sugarss // use sugarss parser } }

热加载

热加载不只是修改文件后页面的刷新。修改某个.vue组件后，页面中这个组件的所有实例都会被替换而不重载页面，它还保存了应用的当前状态以及被替换的组件。

如果使用了vue-cli搭建项目，自带了热加载。