前言
接到任务是写个 h5 页面，瞬间心中呼啸而过了一排火车，当时就想狠狠甩自己一巴掌，玩个球，之前3月份搞事儿写个网站编辑器，早点完成一个 h5 编辑器这里不久省事儿了么，于是寻思着怎么写一个 h5 编辑器。
对于 h5 编辑器，我是蛮熟悉的，此前专门调研过易企秀的内容，深知一个 h5 编辑器到底是什么样子的，这不就打算实现以下了。
导言
本章的主体内容并不涉及 h5 编辑器的实际编写，此处是做一定的配置。
我寻思着，自己的博客里面也没有写什么和 webpack 相关的内容，于是这里就先放一个基础的webpack配置吧。
文件的主要结构大致如下:
|-/
package.json
.babelrc
index.html
-src/
main.js
main.scss
-config/
devserver.js
webpack.dev.js
1. package.json
首先生成 package.json ，这里很多新人都会搞混 dependence 和 devdependence，很多就完全都安装到 dependence里面去了，其实按照 npm 那边的说法， dev抬头的依赖是仅在开发阶段使用的，比如 babel，webpack 等都属于这个范畴。
我大致做了如下配置：
{
"name": "h5",
"version": "1.0.0",
"description": "a h5 builder",
"main": "index.js",
"keywords": [
"h5"
],
"author": "icepro",
"license": "MIT",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-preset-stage-2": "^6.24.1",
"css-loader": "^0.28.11",
"node-sass": "^4.9.0",
"sass-loader": "^7.0.1",
"style-loader": "^0.21.0",
"webpack": "^4.6.0",
"webpack-cli": "^2.1.2",
"webpack-dev-server": "^3.1.3",
"babel-preset-es2015": "^6.24.1",
"html-webpack-plugin": "^3.2.0"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "node ./config/devserver.js"
},
"dependencies": {
"jquery": "^3.3.1"
}
}主要添加一些依赖，基本要用的依赖都已经放上去了（后续再添加会继续说明），在dev的配置中，我们使用编写的 devserver 去实时编译并输出内容，随后让我们开始编写 webpack 文件。
2. webpack
首先我们要注意版本，这里我是用的是 4.0 版本，所以大家在使用的时候，主要大版本有差异。
const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
mode: "development",
entry: {
'app': [path.resolve(__dirname, "../src/main.js")]
},
output: {
path: path.resolve(__dirname, '../build'),
publicPath: "/",
filename: 'js/[name][hash].js'
},
module: {
rules: [{
test: /\.scss$/,
loader: ['style-loader', 'css-loader', 'sass-loader']
}, {
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
}]
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: path.resolve(__dirname, './../index.html'),
inject: true,
chunks: ['app']
}),
]
}3. 配置devserver
作为一个前端想要所见即所得，是每一个前端的梦想，这里我们优先配置一下 devserver，这个由于我只需要最简单的配置，所以这里devserver用的几乎是最简单的配置：
const webpack = require('webpack');
const WebpackDevServer = require('webpack-dev-server')
var config = require("./webpack.dev.js");
// 这里读取的config的entry作为入口，当然多入口的话需要遍历添加，这个自行解决吧
config.entry.app.unshift("webpack-dev-server/client?http://localhost:8080/");
var compiler = webpack(config);
var server = new WebpackDevServer(compiler);
server.listen(8080);ip也用的是固定的ip。
结尾
然后让我们运行一下 npm run dev 这样基本的环境就搭建完成了
本文标题：[h5] 写个h5编辑器有多难？[0]
永久链接：https://iceprosurface.com/2018/05/01/2018/h5/h5-0/
作者授权：本文由 icepro 原创编译并授权刊载发布。
版权声明：本文使用「署名-非商业性使用-相同方式共享 4.0 国际」创作共享协议，转载或使用请遵守署名协议。