首先上代码

注意代码中的devServer

里面的hot、hotOnly都设置为true

拉下webpack的 HotModuleReplacementPlugin模块

然后实例化即可

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const webpack = require('webpack')

module.exports ={
  mode: 'development',
  devServer: {
    hot: true,
    hotOnly: true,
    contentBase: path.resolve(__dirname, 'dist')
  },
  entry: {
    main: './src/index.js'
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
          'postcss-loader'
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    new CleanWebpackPlugin(),
    new webpack.HotModuleReplacementPlugin()
  ]
}

这篇文章是我对照着webpack官方文档一个一个翻译的，绝非右键翻译。保证同学们能看得懂

[ext] 表示 文件的后缀

[name] 表示 当前文件名

[path] 表示 相对于webpack的路径

[folder] 表示源文件所在文件夹路径

[emoji] 表示一个随机的emoji表情

[emoji:<length>]  表示 自定义随机表情的数量

[hash] 表示文件的hash值

[contenthash] 也是一个hash值只不过是内容hash 上一个是文件名hash

我写这篇文章一来是为了巩固自己的学习

二来是为了更多的同学在学习webpack中有所收获

webpack安装分为两种 一种是全局安装global

一种是局部安装local

我个人觉得我比较喜欢使用局部安装。不管然和插件

全局暗转只需要执行

npm install webpack webpack-cli -g

安装完成之后就可以是看到版本号了

webpack -v

本地安装命令一样不需要加-g

本地安装的同学大家使用webpack一定会报错 not fount webpack

因为我们没有全局安装所以在执行webpack的时候没有找到 很正常

原理很简单在termainal中执行webpack 的时候是全局的webpack

这个时候我们就可以使用npx webpack了

npx是执行局部的webpack

下面我们来看一看webpack如何使用

第一种方法是

直接执行npx webpack index.js

可以看到打包了一个js文件

第二种方法是配置一个webpack.config.js

里面的配置大家可以跟我一起写

我就不用代码高亮了，这个代码高亮的编辑器使用太麻烦。自己也懒得改

直接写了，写一句我会解释一句

const path = require('path')

这一句的意思是引入nodejs的path模块因为我们后面会使用到

module.exports = {

    mode: 'production', 

    这一句的意思是 告诉webpack我们要使用什么模式 有生产模式 和开发模式 分别为production and development

    entry: {

            main:  './src/index.js',

            sub: 'xxx.js'

    }

    这一句的意思是 告诉webpack 我们要从什么文件开始打包，我这里填写为src目录下面的index.js文件开始, 如果为对象即是打包多个文件的意思

    output: {

        这里面填写打包完成的文件放到什么地方

        filename: 'mian.js',

        这一句意思是打包完成后文件叫main.js

        path: path.resolve(__dirname, 'dist')

        这一句的意思是打包好的文件放到什么路径，我们这里填写dist目录下

    },

    module: {

        这里面是告诉webpack我们如何打包除了js以外的文件

        rules: [

            这里面填写相应的规则

            {

                test: /\.png$/,

                这一句的意思是要对png文件作出处理

                use: {

                    loader: 'file-loader',

                    这里是告诉webpack 我们要处理的png使用file-loader模块处理

                    name: '[hash]_[name].[ext]',

                    这里是告诉webpack 我们需要输出的名称

                    outputPath: 'images/',

                    这里我们告诉webpack我们这个文件要输出的地址                    

                }

            },

            {

                test: /\.scss/,

                这里设置sass文件打包设置

                use: [

                    'style-loader',

                    'css-loader',

                    'sass-loader',

                    'postcss-loader'

                    这个loader的意思是要将打包的css进行浏览器适配处理

                ]

            }

        ]

    },

    plugins: [

        new HtmlWebpackplugin([

            template: '/src/index.html'

            这里是设置模版文件

        ]),

        new CleanWebpackPlugin()

        这个插件是帮助我们自动清理打包目录的

    ]

}

中间层



目前我发现的最大的改良架构的通解 就是增加中间层。



比方说 前后端分离，使用 node 来做BFF（backend for frontend），实际上就是在传统前后端 增加了 node这一层，通过此有两点好处，一个是前端彻底接管了 view 层，后端渲染也开始全部由前端掌控，另一个就是 接口层 增加了一层。



 BFF 的前端接口层



我称之为前端接口层，众所周知，后端接口返回的数据往往是不适合前端使用，因为后端的数据是来自于领域建模，而前端作为数据的消费者，所想要的数据其实是 ui数据，无论是数据的含义、还是需要的数据种类、数据结构都往往有巨大的改变，所以我们需要做 数据转换。



 service 层



如果把这些数据转换 集中式处理的时候，通常会称之为 service 层。在有 node 之前 这个 service层实际上是在前端完成的，这有时候会导致严重的性能问题，



性能上



比方用户的一个点击事件，我们需要三种数据源，并且数据源之间互相依赖，这时候，我们必须异步串行的请求数据，一个交互事件所需的等待耗时大大加剧。



其次，复用和缓存 很难做，比方说跨页面的 相同service 需求。



在 node 端 实现的 BFF 的前端接口层实际上还是 service 层，只不过 service 层 是在服务器上运行的，缓存就很好利用起来了，比方说，A 需要 一种service，B 也需要相同的 service ，又恰好 A、B 的输入 key 相同，则这个 service的结果可以缓存起来，并且被复用。



开发上



BFF 的 service 层，可以很容易做到应用级别的复用。



还有很重要的一点是，解耦。



假如没有 service层，我们可以想象，当后端数据源发生了改变，那么前端页面也需要改变，当然，我们通常会要求后端数据源不变，但是总有万一，一旦数据源发生改变，由于前端页面是紧密耦合到数据接口的，所以需要改动的地方非常之多。但是在这种情况下，如果我们有数据转换这一层，实际上在这一层改改，保证前端消费的数据格式不变，即可应对这次数据源的变化。



缓存



上面提到了缓存，其实，缓存也是中间层的一个显著代表，它就是 数据源 和 数据消费者 中间的一层。只不过它的用途不是 fordev 而是 for performance。



缓存的思想在计算机领域被广泛应用，cpu、内存、外存、web 后端开发、web 前端开发，实际上我们也可以理解成 中间层在计算机领域被广泛利用，最著名的还包括 计算机网络 五层模型。



 总结



以上只是我罗列的几点，实际上我觉得，基本上中间层的意义 就在于 开发上的复用和解耦、性能上的提升（其实缓存也就是在复用）。

今天在项目中遇到一个问题

在ant-design-pro中需要加入script标签

于是找了好久没有找到入口文件 没有index.html 也没有index.ejs

最后在src中的docment.ejs

ant-design-pro加入script标签

只需要在docment.ejs中加入即可

首先我们最好有一台Linux的服务器

然后我们到docker hub 上面搜索registry

找到命令

docker run -d -p 5000:5000 --restart always --name registry registry:2

然后复制粘贴

后面我们打开服务器添加doemon.json文件到/etc/docker/目录下

内容大约可以为

{ "insecure-registries":["129.28.193.114:5000"] }

虽然不安全但是注册了的地址

然后到文件/lib/systemd/system/docker.service中添加一句话

EnvironmentFile=-/etc/docker/doemon.json

最后我们重启docker程序即可

sudo service docker restart

FROM 

FROM scratch 制作base image

FROM centos 制作base image

FROM ubuntu:14.04

LABEL

LABEL maintainer='admin@zyt8.cn'

LABEL version='v1.0'

LABEL description='this is zhangyutong blog'

RUN

RUN yum update && yum install vim 为了避免多余的无用layer尽量合并为一行代码

WORKDIR

WORKDIR /root 用WORKDIR改变当前工作目录，如果根目录没有root将会自动创建root

其实WORKDIR 和 RUN cd 一样 但是尽量使用WORKDIR

ADD and COPY

ADD hello / 将hello可执行程序add到image的根目录

ADD hello.tar.gz / 添加到根目录并且解压缩

ENV

ENV MYSQL_VISION 5.4 定义一个常量

RUN and CMD

RUN 是执行命令并且创建新的image layer

CMD 是设置容器启动后默认设置的命令和参数

ENTRYPOINT 是设置容器启动时运行的命令

今天在做一个项目的时候遇到了一个问题。

其实下在文件是很简单的一件事情。但是使用到前后分离的这个概念，下载文件就变得稍微有一点点复杂了。

因为用户使用的是前端路由。而不能够直接使用后端的路由

所有任何操作都要通过API来实现

这样的话即使服务器上面有文件也很难下载。

因为链接不能够直达

所有我就用服务器返回我们需要下载文件的二进制字节流格式

然后在前端直接下载即可。但是由于经过前端的一层layer所以最好就是下载小文件。大文件就不必使用这种方法了

首先我们在前端ant-design中新建一个路由

export async function download(id) {
    return request(`/api/testadmin/download_template/${id}`,{
        responseType : 'blob'
    })
}

然后在模型中写一个方法effect

*_download({ id }, { call }) {
            return yield call(download, id)
        }

if (window.navigator.msSaveOrOpenBlob) {
                navigator.msSaveBlob(temp_data, '项目必要文件.zip');
            } else {
                const link = document.createElement('a');
                const evt = document.createEvent('MouseEvents');
                link.style.display = 'none';
                link.href = window.URL.createObjectURL(temp_data);
                link.download = '项目必要文件.zip';
                document.body.appendChild(link); // 此写法兼容可火狐浏览器
                evt.initEvent('click', false, false);
                link.dispatchEvent(evt);
                document.body.removeChild(link);
            }

docker 基础命令

docker run imageName # 运行一个image容器
docker build -t ImageName . # 意思是在当前目录下寻在Dockerfile文件并且编译
docker image ls # 列出所有image
docker container ls -a # 列出已经退出的container
docker container ls # 列出运行中的container
docker container rm containerName # 移除一个container
docker rm containerName # 是docker container rm containerName 简写
docker image rm imageName # 移除一个image
docker rmi imageName # 移除一个image 是 docker image rm imageName 的简写
docker ps # 和docker container ls 一个意思
docker container ls -aq # 列举出来所有container的ID
docker ps -aq # 是docker container ls -aq的简写
docker container rm $(docker container ls -aq) # 清楚所有container

docker commit containerName newContainerName # 将container提交成新的image

如何创建一个docker的容器呢？

起始非常简单

我们首先需要简单的写一个小程序

就用c语言些吧。

Linux中需要使用到gcc 和 glibc-static包

#include<stdio.h>

int main() 
{
    printf('hello world\n')
}

将我们刚刚写的小程序编译 gcc -static hello.c -o hello即可

然后我们创建一个Dockerfile文件

vim Dockerfile

FROM scratch
ADD hello /
CMD ["/hello"]

输入命令

docker build -t 295367893/hello .

怎么编译呢？在当前目录下自动查找Dockerfile 文件

使用以下命令以运行

docker run 295367893/hello

还有一条命令是可以看到docker image 的语句的 也就是layer

docker history imageId