创建目录，初始化package.json , 安装vue , 安装Webpack 和 Babel

    1. # 新建目录，并且进入
    2. mkdir vue-webpack && cd $_
    3. # 创建 package.json
    4. npm init -y
    5. # 安装 vue 依赖
    6. npm i vue
    7. # 安装 webpack 和 webpack-cli 开发依赖
    8. npm i webpack webpack-cli -D
    9. # 安装 babel
    10. npm i babel-loader @babel/core @babel/preset-env -D
    11. # 安装 loader
    12. npm i vue-loader vue-template-compiler -D
    13. # 安装 html-webpack-plugin
    14. npm i html-webpack-plugin -D

    然后在 src 文件夹下新建 App.vue 和 index.js 两个文件，内容如下：

    1. // app.js
    2. import Vue from 'vue';
    3. import App from './app.vue';
    4. Vue.config.productionTip = false;
    5. new Vue({
    6. render: h => h(App)
    7. }).$mount('#app');
    1. <template>
    2. <div id="app">
    3. Hello Vue & Webpack
    4. </div>
    5. </template>
    6. <script>
    7. export default {};
    8. </script>

    然后创建一个 HTML 文件 index.html ：

    1. <!DOCTYPE html>
    2. <html lang="zh-CN">
    3. <head>
    4. <meta charset="UTF-8" />
    5. <title>Webpack Vue Demo</title>
    6. </head>
    7. <body>
    8. <div id="app"></div>
    9. </body>
    10. </html>

    最后配置 webpack.config.js ，内容如下：

    1. const HtmlWebpackPlugin = require('html-webpack-plugin');
    2. const VueLoaderPlugin = require('vue-loader/lib/plugin');
    3. module.exports = {
    4.     resolve: {
    5.         alias: {
    6.             vue$: 'vue/dist/vue.esm.js'
    7.         },
    8.         extensions: ['*', '.js', '.vue', '.json']
    9.     },
    10.     module: {
    11.         rules: [{
    12.                 test: /\.js$/,
    13.                 exclude: /node_modules/,
    14.                 use: {
    15.                     loader: 'babel-loader'
    16.                 }
    17.             },
    18.             {
    19.                 test: /\.vue$/,
    20.                 loader: 'vue-loader'
    21.             }
    22.         ]
    23.     },
    24.     plugins: [
    25.         new VueLoaderPlugin(),
    26.         new HtmlWebpackPlugin({
    27.             template: './src/index.html',
    28.             filename: 'index.html'
    29.         })
    30.     ]
    31. };