四. 打包 vue 文件

找到 vue-loader 官网 (opens new window)

对于最新的 vue-loader@15 版本, 按照官网的指导, 做如下配置

1 安装 vue-loader

执行命令, 安装 vue-loader

npm install -D vue-loader vue-template-compiler

安装完成后, 发现 vue-loader 依赖 css-loader, 因此我们也要手动安装一下 css-loader

2 安装 css-loader

执行npm install -D css-loader

3 webpack 配置

从 vue-load@15 版本开始, vue-loader 需要在 webpack 中添加一个插件

示例

// 使用node的path模块
const path = require('path')

// 引入vue-loader插件
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  // 打包的入口
  entry: './src/main.js',
  // 打包的出口
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  // 打包规则
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },
    ],
  },
  plugins: [
    // 请确保引入这个插件！
    new VueLoaderPlugin(),
  ],
}

演示

4 重新打包测试

重新打包, 在 dist 目录下就会生成 bundle.js

解决警告小问题

我们发现在 webpack 打包时会出现这个警告

解决

找到 webpack.config.js 在配置中添加 mode

5 在主页中引入 bundle.js

在 index.html 中引入 bundle.js 测试, 发现报错

原因

Vue 会打包生成三个文件:

• runtime only 的文件 vue.common.js
• compiler only 的文件 compiler.js
• runtime + compiler 的文件 vue.js

而默认导出的是 vue.common.js, 如何解决呢?

解决

在 webpack 中, 添加别名的配置

resolve: {
    alias: {
      'vue': 'vue/dist/vue.js'
    }
  },

演示

重新打包, 测试

6 小结

通过上面的练习, 我们知道

1. webpack 本身只能打包 js 文件, 如果要打包其他文件就需要借助于 loader
2. loader 其实就是专门用于打包特定文件的处理程序