寫在前面

閱讀前請注意，本文提到的是rails/webpacker而非前端的webpack

1. alias配置

項目里經(jīng)常會用到alias，需要進行配置：

# config/webpack/environment.js

const { resolve } = require('path')

environment.config.resolve.alias = {
    '@': resolve('app/javascript/packs')
}

2. less，scss與css

webpacker默認是支持這些預處理的，在vue組件里完全可以直接用如下語法引入文件：

@import './global.less'
@import './global.scss'
@import './global.sass'
@import './global.css'

其次需要注意的是，postcss-import無法解析alias語法：

@import '~@/global.less'

目前的解決方案是手動替換掉~@

# postcss.config.js

require('postcss-import')({
  resolve(fileName){
    if(fileName.charAt(0) == '~'){
      return path.join(__dirname, `app/javascript/packs/${fileName.substr(3)}`)
    }
  }
})

如果你期望在vue模板語法中使用less，你可能還需要安裝并配置：

yarn add install less less-loader

# config/webpack/environment.js

const LessLoader = {
    test: /\.less$/,
    use: [{
        loader: "style-loader"
    }, {
        loader: "css-loader"
    }, {
        loader: "less-loader",
        options: {
            javascriptEnabled: true
        }
    }]
}

environment.loaders.append('less', LessLoader);

3. 處理jsx語法

在vue中可以使用jsx語法，但一般情況下，可能會遇到一些問題，比如語法錯誤，參考文檔可以使用如下解決方案：

yarn add @vue/babel-plugin-transform-vue-jsx

# babel.config.js

plugins: [
  ...
  '@vue/babel-plugin-transform-vue-jsx',
  ...
]

你也許需要引入外部jsx就像這樣：

# hello.jsx

module.export = ()=>{
  return
    <p>hello</p>
}

# app.vue

import jsx from '@/demo.jsx';
export default {
  render(h) {
    return <p>hello</p>;
  }
};

一樣可以正常處理。