如何用webpack打包一个网站应用

　　拿到一个项目，我们应该如何去完成这个项目呢。 是直接上手？ 还是先进行分析，然后再去解决呢？毫无疑问，如果直接上手解决，那么可能会因为知道目标所在，而导致出现各种问题。 所以，我们应该系统的分析这个项目，然后再去完成。 

　　

第一步： 需求

　　

　　除了上面的基本需求之外，我们还需要实现登录、注册的相关功能，这样可以保证用户的唯一性，并在后台做出记录。 

 

 

 

第二步：确定技术栈

express --- 首先，作为前端使用node就可以取代后端java、php开发的工作，对于这个项目是必须的。作为node的框架，express可以帮助我们减少不必要的代码，从而高效完成工作。 

react、react-router、redux --- 作为非常流行的前端框架，组件化的设计思想是本项目的最大优势，可以进行尝试使用。因为本项目需要使用登录、注册，所以要做成web单页面应用，因为需要使用到react-router。另外，对于数据的管理较为复杂，需要使用到redux, 对于redux我们可以查看这篇文章。

webpack打包 --- webpack是当前最流行的打包工具，通过webpack，我们可以实现前端工程化，对代码的管理以及后期的维护都有很大的帮助，但是可能上手不太容易，需要花费时间进行探索。

socket.io --- socket.io是对websock（实现全双工通信的应用层协议）的封装，对于实时的聊天很有帮助。 因为聊天需要某个人发送消息给服务器端, 但是其他用户怎么快速得到你的消息呢？ 这就需要服务器端及时将这个消息推送到其他的用户了，但是其他用户并没有向服务器端发出请求，所以原来采用的就是轮询的方式，通过这种方式可以完成功能，但是会增加客户端和服务器端的负担。 这篇文章也介绍了一些使用场景。(注意： 有时候，也许我们在请求中看不到websocket协议相关，而是http协议，这也是正常的，因为有可能浏览器后者服务器不支持，就要使用其他方式来实现。)

mongodb --- 因为项目需求中提到刷新页面之后，还需要展示加入过的房间的历史聊天记录，通常在前端可能是可以通过localStorage来实现的，但是使用localStorage是有问题的，对于其他人的推送消息，我们都需要调用localStorage，并且如果你一旦更换浏览器，那么数据就没有办法保存了。 但是如果我们使用mongodb作为node来操作的数据库，那么我们就可以在用户进入某个房间的时候，及时将存储在数据库中的数据（所以，每次用户发送的数据，都要根据相应的房间号存储到mongodb数据库中）推送给用户。

ant.design --- ant.design是蚂蚁金服的一个基于react的前端UI框架，可以方便我们使用设计好的、一致性强的UI。 

less --- 对于html5，在某些pc浏览器上可能支持的不好，所以目前并没有广泛使用，但是对于less，它使用嵌套语法、变量、minxin等使得css的书写更加清晰、整洁，并且它最终是可以编译为css的，所以鼓励使用less。 

es6 --- 同less一样，我们使用es6可以使得语法更简洁，效率更高效，只需要使用babel进行转译即可，所以推荐所有的项目都使用es6甚至是es7的语法来实现。 

 

 

第三步： 技术学习

　　确定了以上技术栈之后，我们就需要学习没有用过的技术了。 有人提倡的是边做项目边学习，这种方法是没有错的。 但是我认为提前学习是一种比较好的做法，即首先需要对相应技术的基本概念、api等做一个初步的了解，在这个基础上做项目，我们就可以知道应该在遇到问题时使用那些方法来解决，这时再进入边做项目边学习的阶段是比较理想的了。 

　　比如上面的技术socket.io、redux、react-router、ant.design都是我之前没有用过的，就需要做一个简单的学习，大概记录一下博客加深印象即可。 

 

 

第四步： 项目架构

　　实际上对于一个项目，最重要的是项目的架构实现，当我们组织好了项目的架构并对webpack打包的部署完成之后，再去写项目的逻辑就会简单的多了，因为我们已经有了整体的思路。 如果项目的整体架构考虑不周，那么就有可能造成代码的可读性、可扩展性、可维护性很差，使得项目质量不高。

src文件夹 - 项目的核心代码文件,其中应该区分为客户端和服务器端。

config文件夹 - 项目打包、api等的配置文件。 （通过不同文件的分离，使得项目易于管理）

build文件夹 - 与webpack相关的build文件。

static文件夹 - 存放一些css、js、img等静态文件。

package.json - 该文件记录了整个项目的基本信息如入口、名称、仓库、依赖等等。

index.html - REACT技术使用的就是单页应用，所以，这里只需要一个html页面。

... 

　 以上大概就是本项目的架构了，至于.gitignore、REDEME.md等是一个项目所必须的且不重要，不再赘述 。 

 

 

第五步： 开始写代码

　　就是从头开始一步一步完成这个项目，无需多说。

 

第六步： 遇到的难点以及解决思路、方案

　　做项目中难免会遇到一些问题，并且有时候还比较难解决，这时就需要我们及时的记录。 一来是可以记录问题、随时着手解决；二来是可以通过记录在以后遇到问题时可以及时的查看记录，不再踩相同的坑或者再去从头寻找、思考解决思路。 

 

使用express、react、webpack打包、socket.io、mongodb、ant.design、less、es6实现聊天室

标签：php   sock   有用   优势   html   org   变量   dex   使用   

随着前端技术的发展，越来越多新名词出现在我们眼前。angularjs、react、gulp、webpack、es6、babel……新技术出现，让我们了解了解用起来吧！今天我来介绍一下如何用webpack打包一个网页应用。
一般我们写页面，大概都是这样的结构：
index.html
css
style.css
js
index.js
...........

这样我们的html里直接引用css和js，完成一个网页应用。用webpack也类似，只是webpack把图片、css和js都编译打包成一个文件，我们只需要引用一个文件就可以了。
1.我们需要先安装node环境。没安装的请自行安装
2.在项目目录下输入npm init初始化一个node项目，输入项目名称等信息，完成后生成一个package.json文件。
3.在项目目录下安装webpack
npm install --save-dev webpack
4.我们需要一个webpack.config.js文件，记录webpack配置信息。它的配置大概这样：
var webpack = require('webpack');
var path = require('path');
var buildPath = path.resolve(__dirname, 'build');
var config = {
//入口文件
entry: {
index : './src/js/index.js'
},
extensions: ['', '.js', '.json', '.css', '.less'],
output: {
path: buildPath, //编译后的文件路径
filename: 'app.js'
},
mole: {
//Loaders
loaders: [
//.css 文件使用 style-loader 和 css-loader 来处理
{ test: /\.css$/, loader: 'style-loader!css-loader' },
{ test: /\.less$/,
loader: 'style-loader!css-loader!less-loader'
},
//.js 文件使用 babel 来编译处理
{ test: /\.js$/, loader: 'babel' },
//图片文件使用 url-loader 来处理，小于8kb的直接转为base64
{ test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
]

},
};

mole.exports = config;

我们需要指定编译的入口文件和输出的目录路径，以及css和js用什么loader处理，比如我使用了less，要编译less文件，就指定less-loader，js我要用es6来写，为了兼容性，用babel来转成es5的代码。如果要使用react，也可以指定jsx等的编译方式。
5.这些loader都是需要npm安装的
npm install --save-dev css-loader less less-loader style-loader url-loader babel babel-core babel-loader babel-preset-es2015

6.如果需要用babel，在项目目录下新建一个名为.babelrc的隐藏文件，里面这样写：
{"presets":["es2015"]}

保存。
7.根据配置可以看到我们需要一个src文件夹和一个build文件夹，src放图片、css和js的源代码，build作为输出文件夹放编译后的文件。
8.src/js/index.js文件作为我们的入口文件，我们在里面可以愉快地写es6的代码，比如：
'use strict';
require('../css/base.css');
require('../css/animate.css');
require('../css/style.less');
require('../js/zepto.min.js');
let a = 'world';
let hello = `hello ${a}`;
console.log(hello);

可以看到css我们都通过require的方式引进来，这样webpack会把css和js打包进一个文件。
9.我们还差个index.html，放在项目文件夹下就可以，正常写，引入build/app.js就可以啦！
10.让我们试试吧

1. 打包多个页面的js文件 读取src/views下的目录，约定每一个目录当成一个页面，打包成一个js chunk。 2. 打包多个html 循环生成多个HtmlWebpackPlugin插件，把每一个插件的chunks各自指向上面打包的js chunk。

本文如未解决您的问题请添加抖音号：51dongshi（抖音搜索懂视），直接咨询即可。