NODE-WEB03:Webpack框架

2019-10-27  本文已影响0人  杨强AT南京

  本主题把目光聚焦在Javascript的前端开发技术上；用Javascript做前端开发等于使用C++开发Qt，使用Python开发TkInter或者PyQt一样。不过因为Javascript的发明背景与发展过程的缘故，采用的技术手法不同，核心是翻译，其实也等同于编译。本主题的webpack就是把标准的Javascript程序打包成浏览器能运行的程序，更重要的是包含HTML，CSS等都可以作为模块打包，有了Webpack，就可以像传统开发一样开发前端。
   1. Webpack安装与工具使用；
   2. 项目构建；
   3. 项目配置；

环境安装

构建Web项目工程结构

创建项目结构

创建npm配置文件与运行环境

创建需要配置的Web资源

  1. 创建包含处理逻辑的js文件（入口文件）
    • 文件名：index.js
    document.write("<div style='width:100px; height:100px; background-color:red;'>打包脚本输出</div>");
  1. 创建使用js的html文件（引用入口js文件）
    • 文件名：index.html
    <!DOCTYPE html>
    <html>
        <head>
            <title>
                Webpack后的js调用
            </title>
            <meta charset="utf-8">
            <link rel="shortcut icon" href="#" />
        </head>
        <body>
            <!--因为js脚本包含支持node的require语法，所以下面的直接调用是存在问题的-->
            <script src="./index.js"></script>
        </body>
    </html>

配置框架

  1. 文件格式

    • webpack的配置文件采用的是js脚本；
    • 文件名可以随意命名，推荐命名：webpack.dev.conf.js

  2. 核心基本配置

    • entry：因为webpack会自己处理js中的依赖关系，从入口js文件，会打包所有相关的js文件，在前端页面中，只需要引入一个打包好的静态js文件即可。
    • output：entry打包后的输出文件（可能多个文件，单也是依赖的，只有一个调用入口，output指定这个输出入口文件）
    • devServer：webpack-dev-server服务器的配置：包括端口，日志、缺省主页，错位重定位等。
    • plugins：用在webpack中的各种插件（比如对HTML模板的处理，CSS的处理加载等）
    • module：配置工具模块
    • mode：两个选项：development与production

  3. 配置格式

    module.exports= {
        // 模式：开发development与生产production模式
        mode: 'development',
        // entry入口
        entry: {},
        // entry入口的打包输出文件
        output: {},

        // 需要调用的模块配置
        module: {},

        // 需要使用的插件
        plugins:[],
        // webpack-dev-server Web服务器服务参数配置
        devServer:{}
    }
  1. entry与output配置
    • 这两个配置一般成对。
    const path = require("path");

    module.exports= {
        // 模式：开发development与生产production模式
        mode: 'development',
        // entry入口
        entry: {
            main: './src/index.js'     // 采用的相对路径行项目目录开始
        },
        // entry入口的打包输出文件
        output: {
            path: path.resolve(__dirname, '../dist'),   // 输出路径(避免出错，使用绝对路径)
            filename: 'index.js'    // 输出的文件名
        },

        // 需要调用的模块配置
        module: {},

        // 需要使用的插件
        plugins:[],
        // webpack-dev-server Web服务器服务参数配置
        devServer:{}
    }
  1. 配置devServer
    const path = require("path");

    module.exports= {
        // 模式：开发development与生产production模式
        mode: 'development',
        // entry入口
        entry: {
            main: './src/index.js'       // 采用的相对路径行项目目录开始
        },
        // entry入口的打包输出文件
        output: {
            path: path.resolve(__dirname, '../dist'),   // 输出路径(避免出错，使用绝对路径)
            filename: 'index.js'    // 输出的文件名
        },

        // 需要调用的模块配置
        module: {},

        // 需要使用的插件
        plugins:[],
        // webpack-dev-server Web服务器服务参数配置
        devServer:{
            contentBase: path.resolve(__dirname, '../dist'),   // 指定服务资源路径
            port: 9999,   // 服务端口
        }
    }
  1. 在npm的package.json中配置webpack打包与服务器启动命令

    {
      "name": "webpackserver-demo",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "build": "webpack --config=config/webpack.dev.conf.js",
        "start": "webpack-dev-server --config=config/webpack.dev.conf.js"
      },
      "keywords": [],
      "author": "",
      "license": "ISC"
    }

执行

  1. 打包
    • 指令：npm run build
打包
  1. 启动服务器
    • 指令：npm run start
启动服务
  1. 使用浏览器访问
    • url:http://127.0.0.1:9999
浏览器访问

说明

附录


<template>
    <!--template只支持一个根节点-->
    <div class="ai_index">
        <!--背景容器-->
        <div class="index_bg"></div>
        <!--页头：logo与导航-->
        <div class="nav_top">
            <!--logo-->
            <img src="../../assets/imgs/logo.png" alt="人工智能">
            <!--菜单-->
            <ul>
                <li v-for="menu in menus" v-bind:class="menu.isactive">
                    <router-link v-bind:to="menu.url">{{menu.name}}</router-link>
                </li>
            </ul>
        </div>
        <!--工作区：块菜单-->
        <div>
        </div>
        <!--页脚：版本或者联系方式-->
        <div class="footer">
            <p>Copyright © 2015-2019 <span>人工智能负责人</span> 京ICP备00000000000号</p>
            <p>联系方式：电话（13300000000），微信（000000），QQ（0000000），邮箱（0000000）</a></p>
        </div>
    </div>
</template>
<script>
// 页面交互处理
export default {
    name: 'm01_index',
    data: () => {
        return {
            menus: [
                {name: '站点介绍', url: '/', isactive: 'menu_active'},
                {name: '技术学习', url: '/technology/index.html', isactive: ''},
                {name: '应用实践', url: '/practice/index.html', isactive: ''},
                {name: '学习路径', url: '/studymap/index.html', isactive: ''},
                {name: '业务合作', url: '/coorperation/index.html', isactive: ''},
                {name: '技术团队', url: '/group/index.html', isactive: ''},
            ],
        };
    },
    methods: {
    },
};
</script>
<style>
/*样式表定义*/
</style>
上一篇 下一篇

猜你喜欢

热点阅读