用webpack搭建简易的vue-cli工程项目

头像
渣渣辉
    阅读 6 分钟

    1.项目结构

    image.png

    2.开启一个本地服务器

    2.1安装依赖

    mkdir webpack-vue
cd webpack-vue
npm init
cnpm install webpack webpack-cli webpack-dev-server --save-dev

    2.2webpcka配置

    //webpack.config.js
const path = require('path')
module.exports = {
    entry:{
        app: './main.js'
    },
    devServer:{
        port:8000,
        inline: true, //自动刷新
    }
}
    //main.js

console.log('aa')

    2.3修改package.json

      "scripts": {
    "start": "webpack-dev-server  --inline --config ./webpack.config.js"
  },

    2.4新建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>Document</title>
</head>
<body>
    <div id='app'>webpack-vue</div>
</body>
</html>

    2.5运行起来

    npm run start

    image.png

    3.最基本的打包

    3.1html-webpack-plugin

    html-webpack-plugin的作用
    • 为html文件中引入的外部资源如script、link动态添加每次compile后的hash，防止引用缓存的外部文件问题
    • 可以生成创建html入口文件
    操作配置
    1. 引入插件html-webpack-plugin，并配置
    2. 设置webpack的model
    const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    mode:'development',
    entry:{
        app: './main.js'
    },
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: "[name].js"
    },
    plugins:[
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: path.resolve(__dirname, './index.html'),
        })
    ],
    devServer:{
        port:8000,
        inline: true, //自动刷新
    }
}

    3.2配置package.json

      "scripts": {
    "build": "webpack --config ./webpack.config.js",
  },

    3.3打包

    执行如下命令会得到一个dist文件夹

    npm run bild

    image.png

    4.配置vue，css，js的loader

    4.1vue

    安装依赖
    cnpm install vue vue-loader vue-template-compiler --save
    文件内容
    // src/App.vue
<template>
    <div id="app">
        {{msg}}
    </div>
</template>
<script>
    export  default  {
        data(){
            return {
                msg: 'this is app.vue'
            }
        }
    }
</script>
    // main.js

import  Vue from  'vue'
import App from './src/App'

new Vue({
    el: '#app',
    components: {App},
    template: '<App/>',

})
    // webpack.config.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
    mode:'development',
    entry:{
        app: './main.js'
    },
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: "[name].js"
    },
    resolve:{
        extensions: ['.js', '.vue', '.json'],
        alias: {
            'vue$': 'vue/dist/vue.esm.js',  //设置别名，不然使用 import  识别不了 vue
            '@': path.join(__dirname, 'src')
        }
    },
    module:{
        rules:[
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                exclude:/node_modules/, //排除 node_modules 文件夹
                options: {
                    extractCSS: true // 提取.vue文件中的style作为单个css文件
                }
            }
        ]
    },
    plugins:[
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: path.resolve(__dirname, './index.html'),
        })
    ],
    devServer:{
        port:8000,
        inline: true, //自动刷新
    }
}

    4.2css

    安装依赖
    cnpm install css-loader style-loader vue-style-loader --save
    文件内容
    // src/App.vue

<template>
    <div id="app">
        {{msg}}
    </div>
</template>
<script>
    export  default  {
        data(){
            return {
                msg: 'this is app.vue'
            }
        }
    }
</script>
<style scoped>
    #app {
        width: 100%;
        height: 100%;
        font-size: 20px;
        color: red;
    }
</style>
    // webpack.config.js

{
                test:/\.css$/,
                loader:'style-loader!css-loader',
                exclude:/node_modules/
            },

    4.3js

    安装依赖
     cnpm install babel-core babel-loader babel-preset-env --save
    文件内容
    //webpack.config.js

{
                test:'/\.js$/',
                loader:'babel-loader',
                exclude:/node_modules/,
                options:{
                    presets:['env']
                }
            }

    4.4效果

    image.png

    完整webpack.config.js

    const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
    mode:'development',
    entry:{
        app: './main.js'
    },
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: "[name].js"
    },
    resolve:{
        extensions: ['.js', '.vue', '.json'],
        alias: {
            'vue$': 'vue/dist/vue.esm.js',  //设置别名，不然使用 import  识别不了 vue
            '@': path.join(__dirname, 'src')
        }
    },
    module:{
        rules:[
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                exclude:/node_modules/, //排除 node_modules 文件夹
                options: {
                    extractCSS: true // 提取.vue文件中的style作为单个css文件
                }
            },
            {
                test:/\.css$/,
                loader:'style-loader!css-loader',
                exclude:/node_modules/
            },
            {
                test:'/\.js$/',
                loader:'babel-loader',
                exclude:/node_modules/,
                options:{
                    presets:['env']
                }
            }
        ]
    },
    plugins:[
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: path.resolve(__dirname, './index.html'),
        })
    ],
    devServer:{
        port:8000,
        inline: true, //自动刷新
    }
}

    5.把打包后的文件，放到服务器中作为静态资源运行

    5.1项目结构

    image.png

    5.2node本地服务器

    mkdir node-server
cd node-server
npm init
cnpm install koa koa-static --save

    5.3文件内容

    //app.js


const koa = require('koa');
const path = require('path');
const static = require('koa-static');
const app = new koa();
app.use(static(path.join(__dirname, './dist')))

app.listen(3000, () => {
    console.log("koa is starting at localhost:3000")
});

    5.4运行

    node app.js

    image.png

    web
    渣渣辉
    1.3k 声望147 粉丝
    « 上一篇
    NestJs学习系列之使用Swagger自动生成接口文档，处理接口
    下一篇 »
    electron基础篇(一)

    引用和评论

    推荐阅读
    头像
    springboot(二)、RestApi

    渣渣辉阅读 868

    头像
    Flutter开发者 3.29版本关注要点

    程序员老刘阅读 552

    头像
    PHP又出Bug了？md5('240610708')竟然等于 md5('QNKCDZO')！

    da_miao_zi阅读 459

    头像
    📥 x-cmd install | Wuzz - Web 开发与安全测试利器,交互式 HTTP 工具

    xcmd阅读 433

    头像
    现代Web环境核心技术解析与架构实践

    大蜀山长阅读 377

    头像
    web端隔离环境通信库

    defghy阅读 296

    0 条评论
    得票最新