webpacker踩坑记

写在前面

阅读前请注意，本文提到的是rails/webpacker而非前端的webpack

1. alias配置

项目里经常会用到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>;
  }
};

一样可以正常处理。