对于从零开始搭建Webpack+react框架感兴趣的读者，本文将会是一篇不错的选择，我们将详细介绍webpack搭建react项目，并为您提供关于CTF丨从零开始搭建WEBDocker靶场、Thew

对于从零开始搭建Webpack+react框架感兴趣的读者，本文将会是一篇不错的选择，我们将详细介绍webpack搭建react项目，并为您提供关于CTF丨从零开始搭建WEB Docker靶场、The way of Webpack learning (I.) -- Configure Webpack from zero（从零开始配置webpack）、webpack 基础 从零开始搭建项目、webpack+vue+koa+mongoDB,从零开始搭建一个网站的有用信息。

• 从零开始搭建Webpack+react框架（webpack搭建react项目）
• CTF丨从零开始搭建WEB Docker靶场
• The way of Webpack learning (I.) -- Configure Webpack from zero（从零开始配置webpack）
• webpack 基础 从零开始搭建项目
• webpack+vue+koa+mongoDB,从零开始搭建一个网站

从零开始搭建Webpack+react框架（webpack搭建react项目）

$ node -v
v10.15.0

$ npm -v
6.4.1

"scripts": {
  "start": "webpack-dev-server --hot --inline --colors --content-base ./build","build": "webpack --progress --colors"
}

CTF丨从零开始搭建WEB Docker靶场

第十二届全国大学生信息安全竞赛即将开始，小伙伴们有报名参加的吗？大家在比赛前是否开始进行模拟演练了？今天，i春秋将与大家分享靶场搭建的相关内容，帮助大家更好的进行实操演练。

学习搭建Docker靶场之前，我们先了解一下为什么要用Docker？

• 相对于虚拟机，Docker启动更快。
• 成本考虑
• 更安全

环境部署

搭建环境>>

• OS: Ubuntu 16.04
• 设备类型: VM
• 宿主机：ESXI 6.5

卸载原有Docker>>

安装>>

Ubuntu 16.04 + 上的Docker CE默认使用overlay2存储层驱动，无需手动配置。

使用APT安装：由于APT源使用HTTPS以确保软件下载过程中不被篡改。因此，我们需要添加使用HTTPS传输的软件包以及CA证书。

 鉴于国内网络问题，建议使用国内源。

为了确认所下载软件包的合法性，需要添加软件源的GPG密钥。

 然后，我们需要向source.list中添加Docker软件源。

 以上命令会添加稳定版本的Docker CE APT镜像源，如果需要测试或每日构建版本的Docker CE请将stable改为test或者nightly。

安装 Docker CE>>

更新APT软件包缓存，并安装 docker-ce：

 

Tips：

• 使用脚本自动安装
• 在测试或开发环境中Docker官方为了简化安装流程，提供了一套便捷的安装脚本，Ubuntu系统上可以使用这套脚本安装。

 执行这个命令后，脚本就会自动的将一切准备工作做好，并且把Docker CE的Edge版本安装在系统中。

启动Docker CE>>

 建立Docker用户组>>

默认情况下，Docker命令会使用Unix socket与Docker引擎通讯。而只有Root用户和Docker组的用户才可以访问Docker引擎的Unix socket。出于安全考虑，一般Linux系统上不会直接使用Root用户。因此，更好地做法是将需要使用Docker的用户加入Docker用户组。

建立Docker组：

$ sudo groupadd docker

$ sudo usermod -aG docker $USER

退出当前终端并重新登录，进行如下测试。

测试Docker是否安装正确>>

 若能正常输出以上信息，则说明安装成功。

环境测试

搭建>>

首先制作一个WEB容器，了解端口映射原理和数据卷挂载原理。

操作过程

第一步：准备工作

• 根目录： /opt/docker
• 网站根目录：/opt/docker/www
• nginx相关目录：/opt/docker/nginx/conf.d

第二步：安装php7,nginx,mysql

 注意！MySQL务必加上版本号，否则会拉取MySQL8.0的镜像下来导致后面各种奇奇怪怪的错。

第三步：启动基础环境

命令详解

-v /opt/docker/www/:/var/www/html/：把宿主机（Ubuntu）的/opt/docker/www/挂载到了docker的/var/www/html/

--name php 命名为php

-p 80:80 把宿主机的80映射到docker的80端

-e MYSQL_ROOT_PASSWORD=123456

设置MySQL密码为123456

测试环境是否正确>>

编辑文件/opt/docker/www/index.php

 然后在宿主机目录/opt/docker/nginx/conf.d/新建index.conf

内容如下：

 然后重启nginx docker

 访问10.16.11.231【你部署Docker的机器的地址】查看是否输出PHPINFO

如图即为成功。

定制Docker

MySQL配置>>

由于Docker的MySQL默认是开放了Root的外连权限，因此在比赛中为了安全，Root用户务必设置强密码，比赛前数据库务必先备份原始库，方便数据库被清了恢复，权限务必配置为一个库一个用户，禁止该库所有权用户访问其他库和禁掉相关高危权限。

部署靶场Docker>>

以dedecms为例子

首先从pull下来一个集成环境然后启动并挂载到宿主机的一个数据卷上：

docker pull chengxulvtu/dedecms:utf8_full_5.7

docker run -d --name dede-lantinghe -p 8081:80 -v /opt/docker/

www/dedecms:/var/www/html chengxulvtu/dedecms:utf8_full_5.7

然后正常安装，配置数据库。

然后kill掉该docker并rm掉，FTP连接到宿主机找到安装好dedecms的目录/opt/docker/www/dedecms

在目录下创建一个新的文件夹（这里我用的src）并把dedecms的所有文件src文件夹内，再/opt/docker/www/dedecms新建一Dockerfile文件，操作后的/opt/docker/www/dedecms目录应该类似这样。

编辑Dockerfile文件内容如下：

 解释下每行命令

 在Dockerfile中第一条非注释INSTRUCTION一定是FROM，它决定了以哪一个镜像作为基准，<image>首选本地是否存在，如果不存在则会从公共仓库下载（当然也可以使用私有仓库的格式）。这里引用了eboraas最新的apache-php集成环境。

将文件<src>拷贝到container的文件系统对应的路径<dest>下。

其中<src>可以是文件、文件夹，对于文件和文件夹<src>必须是在Dockerfile的相对路径下，即只能是相对路径且不能包含../path/。

<dest>只能是容器中的绝对路径。如果路径不存在则会自动级联创建，根据你的需要是<dest>里是否需要反斜杠/，习惯使用/结尾从而避免被当成文件。

与ADD命令相比,ADD支持远程URL获取文件，但官方认为是strongly discouraged，建议使用wget或curl代替。

COPY的语法和功能与ADD相同，只是不支持上面讲到的<src>是远程URL、自动解压这两个特性，但是Best Practices for Writing Dockerfiles建议尽量使用COPY，并使用RUN与COPY的组合来代替ADD，这是因为虽然COPY只支持本地文件拷贝到container，但它的处理比ADD更加透明，建议只在复制tar文件时使用ADD，如ADD trusty-core-amd64.tar.gz /，会先自动解压内容再COPY到在容器的/目录下。

在本例中

 复制相对于Dockerfile文件位置的src/下的所有内容到/var/www/html/下：

 RUN指令会在当前镜像的顶层执行任何命令，并commit成新的（中间）镜像，提交的镜像会在后面继续用到。

另外RUN命令的格式有两种写法。

shell格式，相当于执行/bin/sh -c "<command>"：

RUN apt-get install vim -y

exec格式，不会触发shell，所以$HOME这样的环境变量无法使用，但它可以在没有bash的镜像中执行，而且可以避免错误的解析命令字符串：

 功能与shell风格相同

配置Flag项>>

进入src目录，配置你需要的Flag项目，然后就可以打包了。

打包成镜像>>

创建完上面的Dockerfile后在当前目录执行。

命令原型

稍等片刻就可以运行docker images指令并能看到名为ctf，TAG为list1的镜像了。

以上就是搭建WEB Docker靶场的全部内容，你学会了吗？

The way of Webpack learning (I.) -- Configure Webpack from zero（从零开始配置webpack）

学习之路基于webpack3.10.0，webpack4.0之后更新。

一：开始前的配置

1、初始化项目，其实就是新建一个package.json文件，后面的命令依赖里面的配置项。

npm init

2、修改npm script定义的任务，新增一项。

"scripts": {
    "start": "webpack --config webpack.config.js"
}

3、安装webpack

npm i -D webpack@3.10.0

 注：--save --dev 和 --save的区别？

答：--save --dev是开发环境需要的包，添加到devDependencies里面。

--save是生产环境需要的包，添加到dependencies里面。

二：使用webpack打包Js文件

1、页面入口文件 index.html

<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
　　<div id="app"></div>
　　<!--导入 Webpack 输出的 JavaScript 文件-->
　　<script src="./dist/bundle.js"></script>
</body>
</html>

2、JS 工具函数文件 show.js

// 操作 DOM 元素，把 content 显示到网页上
function show(content) {
  window.document.getElementById(''app'').innerText = ''Hello,'' + content;
}

// 通过 CommonJS 规范导出 show 函数
module.exports = show;

3、JS 执行入口文件 main.js

// 通过 CommonJS 规范导入 show 函数
const show = require(''./show.js'');
// 执行 show 函数
show(''Webpack'');

4、Webpack 在执行构建时默认会从项目根目录下的 webpack.config.js 文件读取配置，所以你还需要新建它，其内容如下：

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

module.exports = {
  // JavaScript 执行入口文件
  entry: ''./main.js'',
  output: {
    // 把所有依赖的模块合并输出到一个 bundle.js 文件
    filename: ''bundle.js'',
    // 输出文件都放到 dist 目录下
    path: path.resolve(__dirname, ''./dist''),//path.resolve() 方法会把一个路径或路径片段的序列解析为一个绝对路径。

}
};

5、打包js文件

npm start

一切文件就绪，在项目根目录下执行 webpack 命令运行 Webpack 构建，你会发现目录下多出一个 dist目录，里面有个 bundle.js 文件， bundle.js 文件是一个可执行的 JavaScript 文件。

webpack 基础 从零开始搭建项目

原文链接: webpack 基础 从零开始搭建项目

上一篇: vue 父组件 使用hook 监听子组件 生命周期事件

下一篇: webstorm 本地安装插件 import cost

初始化项目

npm init

安装

cnpm i webpack webpack-cli -D

项目结构

msg.js

const msg = "hello world msg"

export default msg

index.js

import msg from ''./msg''
console.log(msg)

使用webpack打包

npx  webpack src/index.js

输出的main可以直接运行或者放入浏览器中

使用配置文件webpack.config.js

webpack.config.js

let path = require(''path'')
module.exports = {
  entry: ''./src/index.js'',
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, ''dist'') // 输出路径必须为绝对路径
  }
}

打包

npx webpack

按照我们设置的名称和路径打包成功,并且也是可以运行的

webpack+vue+koa+mongoDB,从零开始搭建一个网站

github 地址 https://github.com/wangxiaoxi...

webpakc+vue的搭建
1.新建项目文件夹（see-films);
2.npm init //初始化项目
3.搭建webpack的基本框架

const path = require("path");
const webpack = require("webpack");
module.exports = {
    entry:{
        entry:"./src/entry.js"
    },
    output:{
        path:path.resolve( __dirname,"dist" ),
        filename:"[name].js"
    },
    module:{

    },
    plugins:[

    ],
    devServer:{    
        
    }
};

同时安装依赖

npm i -D webpack(版本号4.14.0)  
npm i -D webpack-cli 

4.webpack的热更新

npm i -D webpack-dev-server 
devServer:{    
        contentBase:path.resolve( __dirname,"dist" ),
        host:"127.0.0.1",
        compress:true,
        port:9001
    }

创建一个src文件夹，创建一个entry.js文件测试能否打包，发现报错 缺少mode
在webpacl.config.js文件里面的入口entry上面加上mode:"development",现在先是在本地跑起来，如果是生产环境的话mode:"production"，此时再进行打包----打包成功。第一步完成。

5.安装模板文件依赖
npm i -D html-webpack-plugin
在webpack.config.js文件中的plugins中
plugins:[

    new htmlPlugin({
        minify:{
            removeAttributeQuotes:true
        },
        hash:true,
        template:"./src/index.html"
    })
]

在src文件夹下面创建index.html
然后webpack测试能否打包成功
此时的目录结构是这样子的!

图片描述

6.vue的搭建!!!

根目录新建文件夹client
创建文件 main.js和App.vue
在根目录创建index.html
然后修改webpack.config.js文件中的入口和plugin插件的模板

并安装依赖
npm i -S vue
npm i -D vue-template-complier
npm i -D extract-text-webpack-plugin
npm i -D vue-loader vue-style-loader css-loader

此时的webpack.config.js是这样的

const path = require("path");
const webpack = require("webpack");
const htmlPlugin = require("html-webpack-plugin");
const ExtractTextPlugin = require(''extract-text-webpack-plugin'');
const VueLoaderPlugin = require(''vue-loader/lib/plugin'');
module.exports = {
    mode:"development",
    resolve: {
        extensions: [''.js'', ''.vue'', ''.json''],
        alias: {
            ''vue$'': ''vue/dist/vue.esm.js''
        }
    },
    entry:{
        entry:"./client/main.js",
        vue:"vue"
    },
    output:{
        path:path.resolve( __dirname,"dist" ),
        filename:"[name].js"
    },
    module:{
        rules:[
            {
                test: /\.vue$/,
                loader: ''vue-loader'',
                options: {
                    loaders: {
                        css: ExtractTextPlugin.extract({
                            use: {loader: ''css-loader''},
                            fallback: ''vue-style-loader''
                        })
                    }
                }
            }
        ]
    },
    plugins:[
        new htmlPlugin({
            minify:{
                removeAttributeQuotes:true
            },
            hash:true,
            template:"./index.html"
        }),
        new VueLoaderPlugin()，
        new ExtractTextPlugin("css/index.css")
    ],
    devServer:{    
        contentBase:path.resolve( __dirname,"dist" ),
        host:"127.0.0.1",
        compress:true,
        port:9001
    }
};

到此处就是一个最基础的vue架构；
此时的目录结构如下
图片描述

看到这里，相信你也测试过，然后发现有个问题，就是在.vue文件里面的style中对样式进行修改会报错，原因是webpack4.x版本得使用mini-css-extract-plugin代替原来的extract-text-webpack-plugin，修改之后如下

const path = require("path");
const webpack = require("webpack");
const htmlPlugin = require("html-webpack-plugin");
const VueLoaderPlugin = require(''vue-loader/lib/plugin'');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    devtool:"cheap-module-eval-source-map",
    mode:"development",
    resolve: {
        extensions: [''.js'', ''.vue'', ''.json''],
        alias: {
            ''vue$'': ''vue/dist/vue.esm.js''
        }
    },
    entry:{
        entry:"./client/main.js",
        vue:"vue"
    },
    output:{
        path:path.resolve( __dirname,"dist" ),
        filename:"[name].js",
        publicPath:"http://127.0.0.1:9001/"
    },
    module:{
        rules:[
            {
                test: /\.js$/,
                use: ''babel-loader'',
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use:[
                    MiniCssExtractPlugin.loader,
                    {
                        loader: ''css-loader?modules=false'',
                        options: {
                            importLoaders: 1,
                            minimize: true
                        }
                    }
                ]
            },
            {
                test: /\.vue$/,
                loader: ''vue-loader''
            }
        ]
    },
    plugins:[
        new htmlPlugin({
            minify:{
                removeAttributeQuotes:true
            },
            hash:true,
            template:"./index.html"
        }),
        new VueLoaderPlugin(),
        new MiniCssExtractPlugin({
            filename: "[name].css",
            chunkFilename: "[id].css"
        })
    ],
    devServer:{    
        contentBase:path.resolve( __dirname,"dist" ),
        host:"127.0.0.1",
        compress:true,
        port:9001
    }
};

7.VUE热更新

只需要安装vue-hot-reload-api依赖 配合就能够轻松实现。

8.VUE路由

安装vue-router 然后修改main.js如下，并在同层目录生成router.config.js,此时的就能根据你的喜好去建立路由了。

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

import VueRouter from ''vue-router'';
Vue.use(VueRouter);
import routes from ''./router.config.js'';
const router = new VueRouter({
    routes: routes
});

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

9.KOA的引入和基础测试

const Koa = require(''koa'');
const Rrouter = require(''koa-router'');
const cors = require(''koa2-cors'');

( async () => {
    const app = new Koa();
    
    app.use( cors() );
    
    const router = new Rrouter();
    router.get(''/getFirstMessage'',async ctx=>{
        ctx.body = {
            message:"get"
        } 
    });
    app.use(router.routes()).use(router.allowedMethods());
    app.listen(9001 ,async ()=>{
        console.log("CONNECTED")
    });
} )()

http://127.0.0.1:9001/getFirstMessage
此时就能够通过接口拿到数据

10.改装路由---使用装饰器

在server文件夹下建立如上文件夹和文件

npm i -S babel-core babel-plugin-transform-decorators-legacy babel-polyfill ramda lodash babel-preset-stage-0

/*装饰器注册*/
require(''babel-core/register'')();
require(''babel-polyfill'');

const Koa = require(''koa'');

/*该方法用来批量引入中间件*/
const useMiddlewares = require(''./lib/useMiddlewares'');

( async () => {
    const app = new Koa();

    await useMiddlewares(app);

    app.listen(9001 ,async ()=>{
        console.log("CONNECTED")
    });
} )()

关于从零开始搭建Webpack+react框架和webpack搭建react项目的问题就给大家分享到这里，感谢你花时间阅读本站内容，更多关于CTF丨从零开始搭建WEB Docker靶场、The way of Webpack learning (I.) -- Configure Webpack from zero（从零开始配置webpack）、webpack 基础 从零开始搭建项目、webpack+vue+koa+mongoDB,从零开始搭建一个网站等相关知识的信息别忘了在本站进行查找喔。