使用webpack构建vue项目

简单记录下使用webpack构建vue项目。

环境依赖

1、安装vue

yarn add vue

2、安装webpack相关开发包

yarn add webpack babel-core babel-loader babel-preset-env --dev

3、安装vue-loader和vue-template-compiler

yarn add vue-loader
yarn add vue-template-compiler

.barbelrc

新建.barbelrc，添加内容如下：

{
   "presets": ["env"]
}

webpack.config.js配置

const webpack = require("webpack");
const path = require('path');
module.exports = {
    // path.resolve 解决了 Windows 和 Linus 路径斜杠相反的问题
    entry: path.resolve(__dirname + "/src/main.js"),
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname + "/dist/js/")
    },
    devtool: "source-map",
    watch: true,
    watchOptions: {
        ignored: /node_modules|dist|build|docs|css/,
        poll: 1000
    },
    module: {
        // loader 预处理
        // vue 文件  本身是不能被js 引用的
        loaders :[
            {
                test: /\.js$/,
                loader: "babel-loader"
            },
            {
                test: /\.vue$/,
                loader: "vue-loader"
            }
        ]
    },
    resolve:{
        extensions: [".js", ".vue"],
        // 强行识别vue
        alias:{
            'vue$':'vue/dist/vue.esm.js'
        }
    }
}