从零开始搭建一个简单的基于webpack的vue开发环境

从零开始搭建一个简单的基于webpack的vue开发环境

注：基于webpack3.X的版本，webpack4.X的版本不适用
参考链接：
https://segmentfault.com/a/1190000012789253?utm_source=tag-newest
我的github：
https://github.com/meilulan/webpack-vue-practice

[TOC]

总结

_summary.png

项目初始化

1. 安装node.js

2. 创建项目目录并npm初始化

1. 新建“webpack-vue-practice”文件夹

2. 初始化并获取package.json文件

cd webpack-vue-practice
npm init -y

“-y”表示将项目设置默认，以后可在package.json中更改

3. 引入webpack

1. 在项目中安装webpack、vue等相关插件

npm install --save-dev webpack@3 webpack-dev-server@2
npm i --save-dev vue

2. 在项目根目录下新建“index.html”文件

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>基于webpack3.X的vue开发环境</title>
</head>
<body>
    
</body>
</html>

3. 在项目根目录下新建“webpack.config.js”配置文件

webpack.config.js

const path = require('path');
const webpack = require('webpack');

module.exports = {
    
}

4. 在项目根目录下新建“src"文件夹，并在/src下新建“main.js”入口文件

到目前为止，项目目录的整体结构如下：

webpack-vue-practice01.png

5. 在/src文件夹下新建测试js文件“util.js”

util.js

export default function say() {
    console.log("hello webpack!!");
}

6. 在main.js文件中引入util.js文件

main.js

import say from './util';
say();

配置

1. 配置webpack.config.js文件

webpack.config.js

const path = require('path');
const webpack = require('webpack');

module.exports = {
    entry: './src/main.js',//项目的入口文件
    output: {
        path: path.resolve(__dirname, './dist'),//项目的打包文件目录
        publicPath: '/dist/',//通过devServer访问路径
        filename: 'index.js'//打包后的文件名
    },
    devServer: {
        historyApiFallback: true,//如果找不到界面就返回默认首页index.html
        overlay: true//可以在浏览器打开的页面显示终端编译时产生的错误
    }
}

2. 配置package.json文件中的"scripts"对象

package.json

"scripts": {
    "dev": "webpack-dev-server --open --hot",
    "build": "webpack --progress --hide-modules"
  },

3. 修改index.html，引入打包后的文件

index.html

<body>
    <script src="/dist/build.js"></script>
</body>

4. 运行项目

npm run dev

可以发现浏览器自动打开了一个窗口，在浏览器的控制台里输出"hello webpack"
并且可以发现，我们随意修改util.js的文件，浏览器会自动刷新

5. 打包项目

npm run build

可以发现，在项目中自动新建了“/dist/build.js”的路径和文件

引入vue

1. 在main.js文件中引入vue，并在入口文件index.html中调用vue

main.js

import Vue from 'vue';
const vue = new Vue({
    el: "#app",
    data: {
        message:"hello webpack-vue"
    }
});

index.html

<div id="app">{{message}}</div>

2. 在webpack.config.js文件中的配置解析vue模块的引用

resolve: {//帮组webpack找到bundle中需要引入的模块代码，这些代码包含在每个require/import语句中
    alias: {
        'vue$': 'vue/dist/vue.esm.js'
    }
}

webpack.config.js文件的整体配置如下：

const path = require('path');
const webpack = require('webpack');

module.exports = {
    entry: './src/main.js',//项目的入口文件
    output: {
        path: path.resolve(__dirname, './dist'),//项目的打包文件目录
        publicPath: '/dist/',//通过devServer访问路径
        filename: 'build.js'//打包后的文件名
    },
    devServer: {
        historyApiFallback: true,//如果找不到界面就返回默认首页index.html
        overlay: true//可以在浏览器打开的页面显示终端编译时产生的错误
    },
    resolve: {//帮组webpack找到bundle中需要引入的模块代码，这些代码包含在每个require/import语句中
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        }
    }
}

引入scss和css

注：webpack默认只支持js的模块化，如需其他格式的文件当成模块引入，需要用到webpack的loader解析器

1. 在项目中安装css

终端

npm install --save-dev css-loader vue-style-loader

2. 在项目中安装scss

终端

npm install --save-dev node-sass sass-loader

3. 在webpack.config.js的modules中配置css和sass

module: {
    rules: [
        //css
        {
            test: /\.css$/,
            use: [
                "vue-style-loader",
                "css-loader"
            ]
        },
        //scss为扩展名的sass
        {
            test: /\.scss$/,
            use: [
                "vue-style-loader",
                "css-loader",
                "sass-loader"
            ]
        },
        //sass为扩展名的sass
        {
            test: /\.sass$/,
            use: [
                "vue-style-loader",
                "css-loader",
                "sass-loader"
            ]
        }
    ]
}

4. 我们做个测试

在src目录下，新建“assets”目录，并在其下新建common.scss文件，写入以下样式
common.scss

body {
    color: rgb(0, 128, 0);
}

启动后，可以看到浏览器中的文字颜色已改变，说明scss文件已经起作用了

使用babel转码

有些浏览器不是很支持ES6的语法，我们可以使用babelES6转换为ES5语法。

1. 在项目中安装babel

npm install --save-dev babel-loader @babel/core @babel/preset-env

2. 在webpack.config.js的module中配置babel

module: {
    rules: [
        //babel
        {
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/
        }
    ]
}

exclude：是指不需要使用的文件或目录，相对应的是include（手动指定哪些文件或目录）

3. 在项目根目录下创建babel的配置文件.babelrc

.babelrc

{
    "presets": [
        [
            "@babel/preset-env",
            {
                "modules": false,
                "targets": {
                    "browsers": [
                        ">0.25%",
                        "not op_mini all"
                    ]
                }
            }
        ]
    ]
}

babel的配置具体见babel官网

4. 引入@babel/plugin-transform-runtime

因为babel-core只是对新引入的语法进行转换，比如箭头函数、块级作用域等
但对新引入的对象，例如Promise、Set等这些只能使用babel的插件：@babel/plugin-transform-runtime
在项目开发环境中引入@babel/plugin-transform-runtime，同时在生产环境引入@babel/runtime

npm install --save-dev @babel/plugin-transform-runtime
npm install --save @babel/runtime

在.babelrc配置文件中引入plugin

"plugins": [
    [
        "@babel/plugin-transform-runtime",
        {
            "absoluteRuntime": false,
            "corejs": false,
            "helpers": true,
            "regenerator": true,
            "useESModules": false
        }
    ]
]

.babelrc文件内容整体如下：

{
    "presets": [
        [
            "@babel/preset-env",
            {
                "modules": false,
                "targets": {
                    // The % refers to the global coverage of users from browserslist
                    "browsers": [
                        ">0.25%",
                        "not op_mini all"
                    ]
                }
            }
        ]
    ],
    "plugins": [
        [
            "@babel/plugin-transform-runtime",
            {
                "absoluteRuntime": false,
                "corejs": false,
                "helpers": true,
                "regenerator": true,
                "useESModules": false
            }
        ]
    ]
}

具体操作和解释，请查看 npm 和 babel 官网

引入图片资源

1. 安装文件模块

npm install --save-dev file-loader

2. 在webpack.config.js的module中引入文件模块

module: {
    rules: [
        //图片
        {
            test: /\.(png|jpe?g|gif|svg)$/,
            loader: 'file-loader',
            options: {
                name: '[name].[ext]?[hash]'
            }
        }
    ]
}

3. 测试

1. 在项目的src目录下，新建img目录，并引入图片example.png

webpack-vue-practice02.png

2. 在项目中引用图片

main.js

Vue.component('my-pic', {
    template: '<img :src="url" />',
    data() {
        return {
            url: require('./img/example.png')
        }
    }
});

index.html

<div id="app">
    <p>{{message}}</p>
    <my-pic></my-pic>
</div>

运行项目就能看到该图片了。

引入vue的单文件组件

在前面，我们使用了Vue.component来定义全局的组件
但在实际项目中，更推荐使用单文件组件

1. 安装单文件组件相关的插件

npm install --save-dev vue-loader vue-template-compiler

2. 在webpack.config.js的module和plugins中引用

webpack.config.js

const vueLoaderPlugin = require('vue-loader/lib/plugin');

module:{
    rules:[
        //vue单文件组件
        {
            test:/\.vue$/,
            loader:'vue-loader',
            options:{
                loaders:{
                    'scss':[
                        'vue-style-loader',
                        'css-loader',
                        'sass-loader'
                    ],
                    'sass':[
                        'vue-style-loader',
                        'css-loader',
                        'sass-loader'
                    ]
                }
            }
        }
    ]
},
plugins:[
    new vueLoaderPlugin(),
]

3. 在src目录下新建App.vue文件

App.vue

<template>
    <div id="app">
        <h1>{{msg}}</h1>
        <img src="./img/example.png" />
        <input type="text" v-model="msg" />
    </div>
</template>

<script>
import say from "./util";

export default {
    name: "app",
    data() {
        return {
            msg: "the first vue page"
        };
    },
    created() {
        this.getSay();
    },
    methods: {
        async getSay() {
            let what = await say();
            this.msg = what;
        }
    }
};
</script>

<style lang="scss">
#app {
    h1 {
        color: red;
    }
}
</style>

4. 修改main.js文件

main.js

import Vue from 'vue';
import App from './App.vue'
import './assets/common.scss';

const vue = new Vue({
    el: "#app",
    components: { App },
    template: '<App/>'
});

5. 修改index.html文件

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>基于webpack3.X的vue开发环境</title>
</head>
<body>
    <div id="app"></div>
    <script src="/dist/build.js"></script>
</body>
</html>

运行项目，即可看到页面能正确显示。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 204,189评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,577评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,857评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,703评论 1赞 276
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,705评论 5赞 366
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,620评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,995评论 3赞 396
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,656评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,898评论 1赞 298
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,639评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,720评论 1赞 330
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,395评论 4赞 319
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,982评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,953评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,195评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 44,907评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,472评论 2赞 342