使用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'
        }
    }
}

版权声明:著作权归作者所有。

相关推荐

查看项目使用Swift的版本

使用xcode创建swift项目,你需要知道在项目中正在使用的swift版本。使用终端查看:swift -version 比较稳妥的方法是在xcode上查看,因为每个项目可能设定的swift 版本不一样。按路径打开:Project -> 选择项目的target -> Build Settings ->

使用Webpack、TypeScript 和React搭建应用

这里简单介绍基于webpack + typescript + react搭建一个应用。初始化项目创建一个空文件夹demo,使用npm在空文件夹初始化项目。npm init npm install --save-dev webpack npm install --save-dev types

使用stackblitz在线运行github上基于Angular CLI构建的项目

在Github上面有很多Angular的demo,示例等等,我们要运行Github里的示例,需要经过下载,初始化项目,然后才到运行项目,这中间会花去很多时间。有一个叫做StackBlitz的项目,它可以看作一个轻量级的在线的IDE,它允许我们在线运行基于Angular CLI构建的项目。更进一步,对于Github上的项目,我们只需要简单地在浏览器输入对应的url即可运行我们想要的项目。示

基于webpack的vue项目使用别名避免../深路径

在vue的项目里,我们可以使用../这样的相对路径的方式引用不同目录的组件:import userinfo from '../../../components/userinfo.vue'; 使用../引用的路径比较深,定位路径和书写不方便,并且不直观。由于项目是基于webpack,比较好的做法是使用webpack对路径定义一个别名。在webpack.base.config.js找到resolve节

Vue实例里this的使用

要理解Vue实例里this的使用,首先要理解this在JavaScript里的用法,可以参考理解JavaScript普通函数以及箭头函数里使用的this。这是vue文档里的原话:All lifecycle hooks are called with their 'this' context pointing