验证篇章 — 搭建和目录
最后更新于：2022-04-02 08:10:49
>[success] # 准备篇章 -- 搭建简单的运行
~~~
1.如果你使用的是现成的'webpack' 配置请忽略下面为了，测试而搭建的步
骤。
2.如果你还不知道，如何搭建可以看我的另一个文档'前端知识扩展'中有对webpack
搭建的讲解
3.我将会带你搭建一个简单的环境，但这里只有步骤，没有详细的内容讲解，想看
更多详细内容可以转移'前端知识扩展'中有对webpack搭建的讲解
~~~
~~~
1.初始化'npm' -- npm init -y
2.安装'webpack' -- npm i webpack --save-dev
3.安装'webpack-cli' -- npm i webpack-cli --save-dev
4.构建一个实时打包'webpack-dev-server' -- npm i webpack-dev-server --save-dev
5.安装'html-webpack-plugin' 内存中生成html 并且将js自动加入html中 -- npm i html-webpack-plugin --save-dev
6.把js 高级语法es6 转成低级语法:
6.1 npm install -D babel-loader@7 babel-core babel-preset-env
6.2 npm i babel-core babel-loader babel-plugin-transform-runtime -D
6.3 npm i babel-preset-env babel-preset-stage-0 -D
6.4 npm i babel-plugin-transform-decorators-legacy
7.配置吧高级语法转换低级语法的文件在根目录叫.babelrc:
{
"presets": ["env", "stage-0"],
"plugins": ["transform-runtime","transform-decorators-legacy"]
}
8.配置'webpack.config.js',文件：
const path = require('path');
const webpack = require('webpack'); // 启用热更新的 第2步
const htmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry:path.join(__dirname,'/src/main.js') , // 入口，表示，要使用 webpack 打包哪个文件
output: { // 输出文件相关的配置
path: path.join(__dirname, '/dist'), // 指定 打包好的文件，输出到哪个目录中去
filename: 'bundle.js' // 这是指定 输出的文件的名称
},
devServer: {
open: true, // 自动打开浏览器
port: 3000, // 设置启动时候的运行端口
contentBase: 'src', // 指定托管的根目录
hot: true // 启用热更新 的 第1步
},
plugins: [
new webpack.HotModuleReplacementPlugin(), // new 一个热更新的 模块对象， 这是 启用热更新的第 3 步
new htmlWebpackPlugin({ // 创建一个 在内存中 生成 HTML 页面的插件
template: path.join(__dirname, './src/index.html'), // 指定 模板页面，将来会根据指定的页面路径，去生成内存中的 页面
filename: 'index.html' // 指定生成在内存的页面的名称
})
],
module: { // 这个节点，用于配置 所有 第三方模块 加载器
rules: [ // 所有第三方模块的 匹配规则
{ test:/\.js$/, use: 'babel-loader', exclude:/node_modules/ },
]
}
}
9.配pack.json 快速启动：
"scripts": {
"dev": "webpack-dev-server"
},
~~~
>[info] ## 目录搭建 -- 说明
~~~
.
├── dist // 打包后的文件
├── src // 源码文件
| ├── model // 对项目个个模块的数据管理
│ │ ├── baseValidator // 存放常用的基本验证类文件
│ │ │ └── 'BaseValidator.js' // 所有自定验证规则的基类
│ │ ├── module // 存放业务对应接口的管理类文件
│ │ │ └── 'BaseModel.js' // 所有对应接数据的基类
│ │ └── untils // 存放整个数据管理所需要的工具文件
│ │ └── 'decorators.js' // 存放一些装饰共同的方法
| └── js
| └── index.html
| └── main.js // 这是 main.js 是我们项目的JS入口文件
└── package.json // npm init 生成的NPM包的所有相关信息，其中sprict可以脚本
~~~
';