Webpack构建前端框架是现代前端开发的基本前提。 如果不熟悉web包，可以阅读这篇文章，从零开始构建可执行的web框架。
正文和源代码均位于github中，参见XP 44毫米/超文本- RXJS -测试仓库。
正文虽然很长，但都是不需要直接复制、粘贴、变更的内容。 配置好之后，很少更改，所以请读者耐心听从操作。
先决条件
前端框架hyperscript-rxjs是一个js函数库，可以通过node.js的npm软件包管理器的方法使用。 我认为我们使用babel和webpack这个软件包系列是前端所需的工具。 测试使用jest。
Basic Setup
第一次写入目录，初始化NPM :mkdir超文本- rxjs -测试
CD超文本- RXJS -测试
名为npm init -y的项目完成后，目录大致有以下结构和文件。
d :XP 44毫米超文本- rxjs -测试
. .gitignore
babel.config.js
index.css
index.js
package.json
prettier.config.js
自述文件
web包.com mon.js
web包. DEV.JS
web包. prod.js
资产管理系统
favicon.ico
index.html
CSS
节点模型
(女子足球俱乐部
js源代码位于src目录中，样式表文件位于css目录中，其他资源文件位于assets目录中，index.js是代码的根文件，index.css是css的web包配置文件babel配置文件重点介绍几个重要的配置文件的内容。 其他内容可以直接引用源代码。
在文本编辑器中打开目录的package.json，然后在其中添加依赖关系：
{
'从属关系' : {
' deep-rxjs': '1.0.12 '、
' hyperscript-rxjs': '1.0.14 '，
' rxjs': '7.1.0'
(、
' dev从属关系' : {
' @ Babel /酷睿' : ' 7.14.6 '、
' @ babel /插件专业类属性' : '7. 14.5 '，
' @ babel /插件专业出口默认从' : '7. 14.5 '，
' @ babel /插件专业出口命名空间' : '7. 14.5 '，
' @ babel /插件专业管线操作员' : '7. 14.5 '，
' @babel/preset-env': '7.14.5 '、
' @ web包- CLI/serve ' : '1.5.1'，
' babel-loader': '8.2.2 '、
'清除web包插件' : '3.0.0'，
'酷睿- JS ' : ' 3.14.0 '、
' css-loader': '5.2.6'、
' html-loader': '2.1.2'、
' html-web包插件' : '5.3.1'，
'样式加载器' : '2.0.0'，
' tslib': '2.3.0'，
' web包' : '5. 39.0 '、
' web包- CLI ' : '4.7.2'，
' web包- dev -服务器' : '3. 11.2 '，
' web包合并' : '5.8.0'
(、
脚本：
“构建”:“web包- -配置web包. prod.js”，
“开始”:“web包服务器- -配置web包. dev.js”
(、
'名称' : '超文本- rxjs -测试'
设置web包。 根目录下的web包.com mon.js
恒定路径=需要('路径) ) )。
常数=请求(清除- web包-插件) )
consthtmlwebpackplugin=要求(html-web包-插件) )。
module .导出={
条目： './索引. js '，
输出：
路径：路径.解析(_ _ dirname，' dist ' )、
(、
解析： {
extensions: ['.js', '.json'], modules: [path.resolve(__dirname, 'node_modules')], }, module: { rules: [ { test: /.js$/, exclude: [/[\/]node_modules[\/]/], use: [ { loader: 'babel-loader', options: { babelrc: true }, }, ], }, { test: /.css$/, exclude: [/[\/]node_modules[\/]/], use: [{ loader: 'style-loader' }, { loader: 'css-loader' }], }, { test: /.html$/, exclude: [/[\/]node_modules[\/]/], use: [{ loader: 'html-loader' }], }, { test: /.(png|svg|jpg|jpeg|gif)$/i, exclude: [/[\/]node_modules[\/]/], type: 'asset', }, ], }, plugins: [ new CleanWebpackPlugin(), new HtmlWebPackPlugin({ template: './assets/index.html', favicon: './assets/favicon.ico', }), ], }根目录下，webpack.dev.js
const { merge } = require('webpack-merge') const common = require('./webpack.common.js') module.exports = merge(common, { mode: 'development', devtool: 'eval-source-map', output: { filename: '[name].[contenthash].js', }, devServer: { port: 3000, disableHostCheck: true, open: true, }, })说明一下，merge是后来者赢，如果配置对象的属性路径相同，dev文件中的属性会覆盖common文件的属性。
我们用到ES的新特性，需要babel转译，在根目录下添加文件babel.config.js
module.exports = function (api) { api.cache.using(() => process.env.NODE_ENV) let presets = [ [ '@babel/preset-env', { targets: api.env('test') ? { node: 'current' } : { edge: '91' }, loose: true, // convert from es6 to es5 loosely. corejs: 3, //declaring a core-js version useBuiltIns: 'entry', }, ], ] let plugins = [ '@babel/plugin-proposal-export-default-from', '@babel/plugin-proposal-export-namespace-from', '@babel/plugin-proposal-class-properties', ['@babel/plugin-proposal-pipeline-operator', { proposal: 'fsharp' }], ] return { presets, plugins } }babel配置文件大部分无需修改，edge浏览器的版本，可以从浏览器的关于页面查看到。
添加一个文件夹，assets，其中添加html的开始模板index.html：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>hyperscript rxjs test</title> </head> <body> <div id="root"></div> </body> </html>webpack插件不支持模板变量，读者不必尝试。
添加一个js代码的入口文件，index.js
import { fragment, p } from 'hyperscript-rxjs' import './index.css' let elem = p('hello world!') document.addEventListener('DOMContentLoaded', function () { const root = document.getElementById('root') let element = elem instanceof Array ? fragment(...elem) : elem root.appendChild(element) })这个程序向模板中id为root的元素添加你编写的元素。这个元素可以很复杂，并且带有交互功能。
测试运行
回到命令行窗口，确保路径是在项目文件夹的根目录。安装包
npm i安装成功后，要想开发运行程序，请执行
npm start稍等片刻，程序会自动打开浏览器，网页标签为hyperscript rxjs test，网页内容是hello world!
想要退出代码服务，在命令行按ctrl + C，键入y则退出。
合理分割代码
现代javascript的好处就是代码模块化，所以我们才会使用webpack。我们把框架代码留在主index.js中，具体的元素实现放到其他文件中。新建一个文件夹src，并在其中新建一个文件hello.js：
import { p } from 'hyperscript-rxjs' export const hello = p('hello world!')修改根目录下的index.js
import { fragment } from 'hyperscript-rxjs' import { hello as elem } from './src/hello' import './index.css' document.addEventListener('DOMContentLoaded', function () { const root = document.getElementById('root') let element = elem instanceof Array ? fragment(...elem) : elem root.appendChild(element) })这样我们只需要导入root中的内容，就可以做出千变万化的前端网页。
重新测试，看看程序是否正常。
接下来的教程，只需要要修改第二行的文件路径，就可以测试程序。