webpack系列学习十一(支持vue、react)

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第19天，点击查看活动详情

支持Vue, 使用Vue Loader

Vue Loader 是一个 webpack 的 loader，它允许你以一种名为单文件组件 (SFCs)的格式撰写 Vue 组件

Vue Loader 还提供了很多酷炫的特性：

• 允许为 Vue 组件的每个部分使用其它的 webpack loader，例如在 <style> 的部分使用 Sass 和在 <template> 的部分使用 Pug；
• 允许在一个 .vue 文件中使用自定义块，并对其运用自定义的 loader 链；
• 使用 webpack loader 将 <style> 和 <template> 中引用的资源当作模块依赖来处理；
• 为每个组件模拟出 scoped CSS；
• 在开发过程中使用热重载来保持状态。

简而言之，webpack 和 Vue Loader 的结合为你提供了一个现代、灵活且极其强大的前端工作流，来帮助撰写 Vue.js 应用。

安装：npm install -D vue-loader vue-template-compiler webpack配置：

// webpack.config.js
const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
  module: {
    rules: [
      // ... 其它规则
      {
        test: /.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    // 请确保引入这个插件！
    new VueLoaderPlugin()
  ]
}

vue-template-compiler 需要独立安装的原因是你可以单独指定其版本。

每个 vue 包的新版本发布时，一个相应版本的 vue-template-compiler 也会随之发布。编译器的版本必须和基本的 vue 包保持同步，这样 vue-loader 就会生成兼容运行时的代码。这意味着你每次升级项目中的 vue 包时，也应该匹配升级 vue-template-compiler。

具体配置可参考vue-loader.vuejs的官方说明

支持react，使用@babel/preset-react

配置React打包环境：npm install react react-dom -S

安装babel与react转换的插件：npm install @babel/preset-react -D

示例代码：

index.js中编写react代码

class App extends Component {
  render() {
    return <div>hello react</div>
  }
}

const container = document.getElementById('app');
const root = createRoot(container);
root.render(<App />)
// ReactDom.render(<App />, document.getElementById('app'))

在.babelrc文件里添加配置

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "edge": "17",
          "firefox": "60",
          "chrome": "67",
          "safari": "11.1"
        },
        "corejs": 2,
        "useBuiltIns": "usage"
        }
      ],
      "@babel/preset-react"
  ]
}