其他分享
首页 > 其他分享> > Webpack + VueJS 学习、跳坑和总结

Webpack + VueJS 学习、跳坑和总结

作者：互联网

这篇随笔会陆续地更新下去，用于汇集一些关于Webpack的初学跳坑总结还有VueJS的基础知识。

Webpack部分

① 快速建立一个Webpack-Vue项目开发环境(4.36.1-2019/08/07)

Step 1 安装 Webpack：

    COPY EXPAND
1
npm install webpack -g
    COPY EXPAND

Step 2 Webpack 4 需要再安装 Webpack-Cli：

    COPY EXPAND
1
npm install webpack-cli -g
    COPY EXPAND

Step 3 快速初始化一个Vue项目

    COPY EXPAND
1
npm init --yes
    COPY EXPAND

安装Vue和Webpack-dev-server

vue@2.6.10

webpack-cli@3.3.6

webpack-dev-server@3.7.2

    COPY EXPAND
1
npm install vue --save
    COPY EXPAND

这里安装webpack-dev-server，目的是方便调试，其热加载工具可以侦测项目文件夹下的文件变动，相应地进行自动刷新，当然，还需要手动配置，后面会讲到。

    COPY EXPAND
1
npm install webpack-dev-server --save
    COPY EXPAND

项目文件夹下安装，webpack，webpack-cli

    COPY EXPAND
1
npm install webpack --save
    COPY EXPAND

webpack现在的版本需要这样安装webpack-cli

    COPY EXPAND
1
npm install -D webpack-cli --save
    COPY EXPAND

安装vue-loader，同时还要安装vue-template-complier

    COPY EXPAND
1
npm install vue-loader vue-template-compiler --save
    COPY EXPAND

Step 4 开始动工一个项目

创建文件夹目录和文件，例如项目根目录叫做webpack-test，其下创建2个文件夹：dist/、src/，创建3个文件：index.html、packge.json、webpack.config.js，src/下创建main.js、templates/以及templates/main.vue，具体文件关系如下图：

按照如下编辑文件内容：

 

  index.html COPY EXPAND
1
2
3
4
5
6
7
8
9
10
11
12
13
<!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>webpack-test</title>
</head>
<body>
    <div id="app"></div>
</body>
<script src="./dist/build.js" type="text/javascript"></script>
</html>
  index.html COPY EXPAND

 

  package.json COPY EXPAND
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{
  "name": "webpack-test",
  "version": "1.0.0",
  "description": "webpack-test",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server --open --hot --mode development",
    "build": "webpack --progress --hide-modules --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "vue": "^2.6.10",
    "vue-loader": "^15.7.1",
    "vue-template-compiler": "^2.6.10",
    "webpack": "^4.39.1",
    "webpack-dev-server": "^3.7.2"
  },
  "devDependencies": {
    "webpack-cli": "^3.3.6"
  }
}
  package.json COPY EXPAND

 

  webpack.config.js COPY EXPAND
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
const path = require("path");
// vue-loader
const VueLoaderPlugin = require("vue-loader/lib/plugin");
const argvs = require("process").argv;
module.exports = {
    entry: './src/main.js', // 项目的入口文件，webpack会从main.js开始，把所有依赖的js都加载打包
    output: {
        path: path.resolve(__dirname, './dist'), // Webpack 打包目标文件夹
        // publicPath: './dist', // webpack-dev-serve 访问路径
        // 判断是开发模式还是打包发布模式设置合理的文件路径
        publicPath: argvs[argvs.indexOf("--mode")+1] === "development" ? "/dist/" : "./dist/",
        filename: 'build.js' // 打包后的文件名
    },
    devServer: {
        historyApiFallback: true, // 404 则返回到 index.html
        overlay: true, // html 页面顶层显示报错提示信息
        // clientLogLevel: "none" // 减少浏览器控制台 log
    },
    resolve: {
        alias: {
            vue$: "vue/dist/vue.esm.js"
        }
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: "vue-loader"
            }
        ]
    },
    plugins: [
        // 加载 vue-loader
        new VueLoaderPlugin()
    ]
};
  webpack.config.js COPY EXPAND

 

  main.js COPY EXPAND
1
2
3
4
5
6
7
import Vue from "vue";
import appMain from "./templates/main.vue";
new Vue({
    "el": "#app",
    "template": "<app-main/>",
    "components": { appMain }
})
  main.js COPY EXPAND

 

  main.vue COPY EXPAND
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<template>
    <div class="main">
        <p v-text="txt">...</p>
    </div>
</template>
<script>
export default {
    "name": "appMain",
    data () {
        return {
            txt: "Hello,Vue!"
        }
    }
}
</script>
  main.vue COPY EXPAND

Step 5 webpack 使用

先运行打包看看：

    COPY EXPAND
1
npm run build
    COPY EXPAND

之后便在 dist/ 下打包好一个 build.js 文件

 

开发模式，热加载，很方便，一旦它监测文件更改，便会热加载，解放了键盘刷新操作，很省心。

    COPY EXPAND
1
npm run dev
    COPY EXPAND

之后会开启一个webpack-dev服务，然后默认浏览器跳转到 localhost 页面，不出意外，屏幕上已经打印出了 Hello, Vue! ：

 

标签：main,vue,VueJS,跳坑,webpack,js,Webpack,COPY,EXPAND
来源： https://www.cnblogs.com/Orcim/p/11316307.html