deniro
deniro

说说如何利用 Webpack 来搭建 Vue 单文件组件环境

说说如何利用 Webpack 来搭建 Vue 单文件组件环境_第1张图片

首先必须先安装与配置好 Webpack。可参考以下内容：

  1. 说说如何安装 Webpack
  2. 说说如何配置 Webpack

.vue 单文件组件：是一个后缀名为 .vue 的文件，我们可以利用 Webpack 的 vue-loader 插件来处理 *.vue 的文件。

1 安装加载器

使用 npm 安装 vue-loader、vue-style-loader、babel 以及 babel-loader 等加载器（之所以要加载最后两个加载器，是为了支持 ES6 语法）。

npm install --save vue
npm install --save-dev vue-loader
npm install --save-dev vue-style-loader
npm install --save-dev vue-template-compiler
npm install --save-dev vue-hot-reload-api
npm install --save-dev babel
npm install --save-dev babel-loader@7
npm install --save-dev babel-core
npm install --save-dev babel-plugin-transform-runtime
npm install --save-dev babel-preset-es2015
npm install --save-dev babel-runtime

对应安装的加载器版本是：

注意： 因为我们安装的 babel 是 6.x 版本，而它所对应的 babe-loaderl 版本必须是 7.x，所以在命令行中，我们明确指定了版本号。如果版本不对应，就会抛出 Cannot find module '@babel/core' 错误。

2 配置 webpack

在 webpack.config.js 中，新增对 .vue 文件以及 ES6 语法的解析支持：

//插件
const ExtractTextPlugin = require('extract-text-webpack-plugin');

//Vue Loader v15+
const VueLoaderPlugin = require('vue-loader/lib/plugin');

var config = {
    module: {
        rules: [
            {//vue 解析
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    loaders: {
                        css: ExtractTextPlugin.extract({
                            use: 'css-loader',
                            fallback: 'vue-style-loader'
                        })
                    }
                }
            },
            {//js 解析
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {//css 解析
                test: /\.css$/,
                use: ExtractTextPlugin.extract({//插件
                    use: 'css-loader',
                    fallback: 'style-loader'
                })
            }
        ]
    },
    entry: {
        main: './main'
    },
    output: {
        //目标输出目录
        path: '/public/assets',
        //资源文件引用目录
        publicPath: '/dist/',
        //输出文件的文件名
        filename: 'main.js'
    },
    plugins: [//插件
        new ExtractTextPlugin('main.css'),
        new VueLoaderPlugin()
    ]
};
module.exports = config;
  • 针对 .vue 文件，使用 vue-loader 来解析。注意：如果 Vue Loader 版本为 15+，那么必须在此配置 VueLoaderPlugin。
  • 因为 vue-loader 在编译 .vue 文件时，会对