已调试好的 Webpack 版本

yarn add webpack@4.44.2 webpack-cli@3.3.12 webpack-dev-server@3.11.2  -D

package.json script 修改

"scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+         "dev":    "webpack-dev-server"
},

创建目录与文件

src

• main.js 入口文件

public

• index.html

  • 写入一个 <div id="app"></div> 用于 Vue 挂载
  • 导入 CDN unpkg.com / jsdelivr.net
    • Vue2 https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js
    • Vue3 https://cdn.jsdelivr.net/npm/vue@3.1.2/dist/vue.global.js

      插件

      html-webpack-plugin@4.5.0
      支持 vue sfc

• Vue2

  • vue-loader (15.x)
  • vue-template-compiled
• Vue3
  • vue-loader@next (16.x)
  • @vue/compiler-sfc

    Webpack 配置文件

    webpack.config.js
    Vue2 ```javascript const { resolve } = require(‘path’); const HtmlWebpackPlugin = require(‘html-webpack-plugin’); const VueLoaderPlugin = require(‘vue-loader/lib/plugin’);

module.exports = { mode: ‘development’, entry: ‘./src/main.js’, output: { path: resolve(dirname, ‘dist’), filename: ‘main.js’, }, externals: { vue: ‘Vue’, }, devtool: ‘source-map’, module: { rules: [{ test: /.vue$/, loader: ‘vue-loader’ }], }, plugins: [ new VueLoaderPlugin(), new HtmlWebpackPlugin({ template: resolve(dirname, ‘public/index.html’), }), ], };

Vue3 要修改 VueLoaderPlugin 的引入的写法，直接从 vue-loader 中解构出来
```javascript
- const VueLoaderPlugin = require('vue-loader/lib/plugin');
+ const { VueLoaderPlugin } = require('vue-loader');

src 文件测试

App.vue

<template>
  <div>{{ title }}</div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      title: "Hello, Vue!!!",
    };
  },
};
</script>

main.js
Vue2

import App from './App.vue';
new Vue({
  render: (h) => h(App),
}).$mount('#app');

Vue3

import App from './App.vue';
Vue.createApp(App).mount("#app);