webpack只理解JavaScript文件，其他的非JavaScript文件需要对应的loader转为JavaScript文件后再交给webpack处理

vue文件打包

vue文件使用vue-loader处理
目前vue-loader的最新版本为 Vue Loader v15
下面是基于V15的用法

  1. 安装vue, vue-loader

    1
    2
    3
    npm i vue --save
    //vue-loader依赖于css-loader和vue-template-compiler，需要手动安装  
    npm i css-loader vue-template-compiler vue-loader --save-dev

  2. index.html文件中增加vue需要挂载的节点

    1
    <div id="main"></div>

  3. src下新建main.vue文件

    一个简单的vue组件，测试使用

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <template>
      <div class="main">it is a vue main template: {{content}}</div>
    </template>
    <script>
    export default {
      data () {
        return {
          content:'123'
        }
      }
    }
    </script>
    <style scoped>
    .main{
      background-color: blueviolet;
    }
    </style>

  4. 更改main.js文件 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    import FaskClick from "fastclick";
    //+++
    import Vue from 'vue';
    import Main from './main.vue';
    //+++
    document.body.style.background = 'red';
    //+++
    new Vue({
      el:'#main',
      render: h => h(Main)
    })
    //+++

  5. 配置 *webpack.config.js，增加vue-loader

    vue-loader 需要 css-loader 和 vue-style-loader/style-loader来解析vue文件中的css

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    const path = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    //+++
    //vue loader插件
    /**
     * 这个插件是必须的！它的职责是将你定义过的其它规则复制并应用到 .vue 文件里相应语言的块。例如，如果你有一条匹配 /\.js$/ 的规则，那么它会应用到 .vue 文件里的 <script> 块
     */
    const VueLoaderPlugin = require('vue-loader/lib/plugin')
    //+++
    const config = {
      entry:'./src/main.js',
      output: {
        filename:'bundle.js',
        path: path.resolve(__dirname,'dist')
      },
      //+++
      /**
       * 此处定义不同模块的处理方式
       */
      module: {
        rules: [//规则数组，里面每一项是一个rule
          //第一个rule表示文件名以.vue结尾的用vue-loader来处理
          {
            test: /\.vue$/, //匹配特定条件。一般是提供一个正则表达式或正则表达式的数组
            loader: 'vue-loader'
          },
          //第二个rule表示文件名以.css结尾的用css-loader和vue-style-loader来处理
          {
            test: /\.css$/,
            use: [//使用use可配置多个loader进行处理。顺序由最后一个至第一个。此处匹配到css文件后，先由css-loader进行处理，css-loader处理后再交由vue-style-loader处理
              'vue-style-loader', //将样式通过style标签的方式加入到dom中
              'css-loader' //css-loader 解释(interpret) @import 和 url() 
            ]
          }
        ]
      },
      //+++
      plugins:[
        //+++
        //新增的vue loader 插件
        new VueLoaderPlugin(),
        //+++
        new HtmlWebpackPlugin({
          template:'index.html'
        })
      ]
    }
    module.exports = config;

  6. 执行npm run start生成文件

本文地址： http://gehaiqing.com/blog/2018/07/06/20180706-webpack-3-vue/