需求分析

使用webpack搭建简单的基于Vue3的VueCli

搭建前提

这是package.json的插件引用

这是webpack.config.json的基本架构

目录结构

从Vue中复制过来的index.html文件

引入vue文件

1、简易版的VueDemo

在命令行写入npm i vue指令，并且在main.js文件中写最简单的一个demo

然后进行npm run build进行打包，然后再浏览器打开查看页面内容

2、书写成sfc.vue的形式

代码结构

当我们执行打包指令的时候，发现打包错误，提示我们需要一个loader来进行处理vue文件的内容。

命令行写入npm i vue-loader -D引入Vue的loader，然后到webpack.config.js中写入配置信息。

再次进行打包，查看

它提示我们vue-loader依旧依赖一个插件,但是这个插件不需要我们再次安装，因为vue-loader内置了这个插件，只需要对象解构获取即可。

const { VueLoaderPlugin } = require("vue-loader/dist/index")
...
plugins: [ //找到这个属性
    ...
    new VueLoaderPlugin() //引用实例
]

这时再次打包webpack，没有报错，并且打开页面查看内容

但是如果我们给元素添加样式的时候就会有所不同！

再次打包，直接报错

又提示我们需要一个loadernpm i css-loader style-loader -D安装配置这两个loder即可

    module: [
       ...
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
      ]

展示结果 但是值得注意的是，在vue-loader 在16.2.0版本左右时依赖另一个loader的，就是@vue/compiler-sfc。但是我使用版本是17.0.0左右，所以不需要引入@vue/compiler-sfc

优化代码

在我们打包完后，其实是会出现这么个警告！__VUE_OPTIONS_API__和__VUE__PROD_DEVETOOLS他们的意思就是说，你最好对这两个属性进行赋值，即便Vue本身已经帮你设置了初始值，__VUE_OPTIONS_API_:true&&__VUE_PROD_DEVTOOLS__:false，前者是是否保存Vue2Options的API，false的话就会通过webpack的tree shaking移除Vue2的代码，减少打包体积；
后者是因为在运行/上线阶段是否禁用vue的调试工具，一般是默认禁用。那么既然官方要求我们尽量自己选择那就自己配置他的属性，我们可以在DefiendPlugin中设置属性内容。

    ...
    new DefinePlugin({
      ...
      __VUE_OPTIONS_API__: true, //保留Vue2的Option模式代码
      __VUE_PROD_DEVTOOLS__: false, //项目上线后禁用vue-devtools工具
    }),
    ...

resolve属性的配置

在对于Vue脚手架创建出的项目中，一般可见一个resolve属性，这个属性是对文件进行配置的，比如说对文件后缀名称进行省略的extensions以及起别名的alias。

知识补充

vue文件几个版本

这是几个常见的vue文件类型，在我使用时，默认引用vue版本就可以使用，但是在去年6月左右，要想在webpack搭建vue，必须先使用vue.esm-bundler文件

对vue而言常见的操作DOM方式

后记

该文章是学习过程的笔记，感谢codewhy老师

基于webpack简单搭建的Vue